Une brève analyse de l'utilisation d'Ajax dans Asp.net MVC

Dans ASP.NET MVC bêta, nous pouvons utiliser Ajax.BeginForm, Ajax.ActionLink pour effectuer des appels Ajax. De même, nous pouvons également utiliser certains frameworks pris en charge par Ajax tels que jQuery pour simplifier les appels ajax.

1. Utilisation de System.Web.Mvc.Ajax

　1.1 System.Web.Mvc.Ajax.BeginForm

　1.2 System.Web.Mvc .Ajax.ActionLink

2. Créez manuellement votre propre Javascript "non intrusif"

1. Utilisez System.Web.Mvc.Ajax

1.1 System.Web.Mvc.Ajax.BeginForm

Étape 1 : Créer un formulaire avec Ajax.BeginForm

  @using (Ajax.BeginForm(
    new AjaxOptions()
    {
      HttpMethod = "post",
      Url = @Url.Action("Index","Reviews"),
      InsertionMode = InsertionMode.Replace,
      UpdateTargetId = "restaurantList",
      LoadingElementId = "loding",
      LoadingElementDuration = 2000
    }))
  {
     <input type="search" name="searchItem"/>
     <input type="submit" value="按名称搜索"/>
  }

Le formulaire final généré est le suivant :

 <form id="form0" method="post" 
    data-ajax-url="/Reviews"
    data-ajax-update="#restaurantList"
    data-ajax-mode="replace"
    data-ajax-method="post"
    data-ajax-loading-duration="2000"
    data-ajax-loading="#loding"
    data-ajax="true"
    action="/Reviews" novalidate="novalidate">

Étape 2 : Créez l'action

 new AjaxOptions()
    {
　　　　　　 ...
      Url = @Url.Action("Index","Reviews")　　　
      ...
       }
    public ActionResult Index(string searchKey = null)
    {
      var model = _restaurantReviews.Where(r => searchKey == null || r.Name.ToLower().Contains(searchKey.ToLower().Trim()))
        .OrderByDescending(r => r.Rating)
        .Take(100)
        .Select(r=>new RestaurantReview()
        {
          City = r.City,
          Country = r.Country,
          Id = r.Id,
          Name = r.Name,
          Rating = r.Rating
        }).ToList();
      if (Request.IsAjaxRequest())
      {
        System.Threading.Thread.Sleep(1000 * 3);//模拟处理数据需要的时间
        //return View(model)会返回整个页面，所以返回部分视图。
        return PartialView("_RestaurantPatialView", model);
      }
      return View(model);
    }

pointée par l'URL du nouvel objet AjaxOptions() d'Ajax.BeginForm. Remarque :

À propos de l'utilisation de System.Web. Description de Mvc.Ajax :

Méthode d'action du contrôleur :

(1) Lorsque [HttpPost] est explicitement ajouté, la HttpMethod est transmise à AjaxOptions() de System.Web. .Mvc.Ajax uniquement Peut être "post",

(2) Lorsque [HttpGet] est explicitement ajouté, la HttpMethod passée à AjaxOptions() de System.Web.Mvc.Ajax ne peut être que "get",

　　　 (3) Lorsque [HttpPost] et [HttpGet] ne sont pas explicitement ajoutés, la HttpMethod passée à AjaxOptions() de System.Web.Mvc.Ajax peut être "get" ou "post",

Étape 3 : Ajoutez l'élément html pour héberger la page de mise à jour,

Autrement dit, ajoutez l'élément html dont l'ID est restaurantList spécifié par le paramètre UpdateTargetId de l'objet AjaxOptionsd :

Voici la page Ajouter :

<p id="restaurantList">...
</p>

Étape 4 : (facultatif) Pour améliorer l'expérience utilisateur, ajoutez l'élément html dont l'Id est loding spécifié par le paramètre LoadingElementId de l'objet AjaxOption :

  new AjaxOptions()
    {
      ....
      LoadingElementId = "loding",
      LoadingElementDuration = 2000
    }))

Ici ajoutez à la page : L'élément avec l'ID du logement est ajouté avec une image d'actualisation dynamique e388a4556c0f65e1904146cc1a846bee :

                                                                            ><.>

1.2 System.Web.Mvc. Ajax.ActionLink

<p id="loding" hidden="hidden">
  <img class="smallLoadingImg" src="@Url.Content("~/Content/images/loading.gif")" />
</p>

System.Web.Mvc.Ajax.ActionLink et System.Web.Mvc L'utilisation de .Ajax.BeginForm est fondamentalement la même

Étape 1 : utilisez System.Web.Mvc .Ajax.ActionLink pour créer un hyperlien >Le html final généré correspondant est :

Étape 2 : Définir l'action pour répondre à l'hyperlien :

 @*@Html.ActionLink(item.Name, "Details", "Reviews",new{id = item.Id},new {@class ="isStar"})*@
            @*<a class="isStar" href="@Url.Action("Details","Reviews", new {id = item.Id})">@item.Name</a>*@
            @*使用Ajax的超链接*@
            @{
              var ajaxOptions = new AjaxOptions()
              {
                HttpMethod = "post",
                //Url = @Url.Action(""),
                UpdateTargetId = "renderBody",
                InsertionMode = InsertionMode.Replace,
                LoadingElementId = "loding",
                LoadingElementDuration = 2000
              };
              @Ajax.ActionLink(item.Name, "Details", "Reviews", new { id = item.Id }, ajaxOptions, new {@class="isStar"}) 
            }

Étape 3 : Définir l'élément html qui porte la partie mise à jour :

<a class="isStar" 
　　href="/Reviews/Details/1" 
　　data-ajax-update="#renderBody" 
　　data-ajax-mode="replace" 
　　data-ajax-method="post" 
　　data-ajax-loading-duration="2000" 
　　data-ajax-loading="#loding" 
　　data-ajax="true">

Étape 4 : (Facultatif) Pour améliorer l'expérience utilisateur, ajoutez l'élément html dont l'ID est loding spécifié par le paramètre LoadingElementId de l'objet AjaxOptionsd :

 /// <summary>
    ///关于使用System.Web.Mvc.Ajax的说明：
    /// Controller的Action方法：
    ///  （1）当显式添加[HttpPost]，传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为 "post",
    ///  （2）当显式添加[HttpGet]，传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod只能为 "get",
    ///   (3) 当都没有显式添加[HttpPost]和[HttpGet]，传给System.Web.Mvc.Ajax的AjaxOptions()的HttpMethod可以为 "get"也可以为"post",
    /// </summary>
    /// <param name="id"></param>
    /// <returns></returns>
    public ActionResult Details(int id=1)
    {
      var model = (from r in _restaurantReviews
        where r.Id == id
        select r).FirstOrDefault();
      if (Request.IsAjaxRequest())
      {
        return PartialView("_RestaurantDetails", model);
      }
      return View(model);
    }

Idem comme quatrième étape de 1.1.

2. Créez manuellement votre propre Javascript "non intrusif"

Étape 1 : Ajouter un formulaire :

   <p id="renderBody">
             ....     
        </p>

Le formulaire généré est :

Étape 2 : Ajouter une action pour traiter le formulaire :

C'est la même chose que la première étape en 1.1 La deuxième étape est la même

La troisième étape : Ajouter des Js pour traiter le formulaire :

@* ---------------------------------------------------------
     需要手工为Form添加些属性标签，用于锚点
  模仿MVC框架的构建自己的“非介入式Javascript”模式
  -------------------------------------------------------*@
<form method="post"
   action="@Url.Action("Index")"
   data-otf-ajax="true"
   data-otf-ajax-updatetarget="#restaurantList">
  <input type="search" name="searchItem" />
  <input type="submit" value="按名称搜索" />
</form>

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que je vous le donnerai à l'avenir. Il sera utile à tout le monde

<form data-otf-ajax-updatetarget="#restaurantList" 
     data-otf-ajax="true" 
     action="/Reviews" 
     method="post" 
     novalidate="novalidate">

Articles connexes :

JSONP pour AJAX cross. -demande de domaine pour obtenir des données JSON

Basé sur h5, réalise le positionnement du téléphone mobile

$(function () {
  var ajaxFormSubmit = function() {
    var $form = $(this);
    var ajaxOption = {
      type: $form.attr("method"),
      url: $form.attr("action"),
      data: $form.serialize()
    };
    $.ajax(ajaxOption).done(function(data) {
      var updateTarget = $form.attr("data-otf-ajax-updatetarget");
      var $updateTarget = $(updateTarget);
      if ($updateTarget.length > 0) {
        var $returnHtml = $(data);
        $updateTarget.empty().append(data);
        $returnHtml.effect("highlight");
      }      
    });
    return false;
  };
  $("form[data-otf-ajax='true']").submit(ajaxFormSubmit);
});

Utilisation de la fonctionnalité H5 FormData pour réaliser le fichier. télécharger sans actualiser

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!