浅析Asp.net MVC 中Ajax的使用

一、使用system.web.mvc.ajax

　　1.1 system.web.mvc.ajax.beginform

　　1.2 system.web.mvc.ajax.actionlink

二、手工打造自己的“非介入式”javascript”

一、使用system.web.mvc.ajax

 

1.1 system.web.mvc.ajax.beginform

     第一步：用ajax.beginform创建form

  @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="按名称搜索"/>
  }

       最终生成的form如下：

 <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">

第二步：创建ajax.beginform的new ajaxoptions()对象的url指向的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);
    }

 注意：

　　　　关于使用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",

      第三步：添加要承载更新页面的html元素，

      　　也就是添加添加ajaxoptionsd对象的updatetargetid 参数指定的id为restaurantlist的html元素：

　　这里在页面中添加：id为restaurantlist的<div>：

<div id="restaurantlist">...
</div>

       第四步：（可选）为增强用户体验，添加ajaxoption对象的loadingelementid参数指定的id为loding的html元素：

  new ajaxoptions()
    {
      ....
      loadingelementid = "loding",
      loadingelementduration = 2000
    }))

          这里在页面中添加：id为loding的元素，添加了包含一个动态的刷新图片<div>：

         

         cshtml文件中添加：

<div id="loding" hidden="hidden">
  <img class="smallloadingimg" src="@url.content("~/content/images/loading.gif")" />
</div>

1.2 system.web.mvc.ajax.actionlink

           system.web.mvc.ajax.actionlink与system.web.mvc.ajax.beginform用法基本一致

            第一步：使用system.web.mvc.ajax.actionlink创建超链接                

 @*@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"}) 
            }

对应生成的最终html为：

<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">

 　　　　第二步：定义出来响应超链接的action：

 /// <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);
    }

           第三步：定义承载更新部分的html元素：

   <div id="renderbody">
             ....     
        </div>   

           第四步：（可选）为增强用户体验，添加ajaxoptionsd对象的loadingelementid参数指定的id为loding的html元素：

　　　　　　　　　　与1.1第四步相同。

二、手工打造自己的“非介入式”javascript”

第一步：添加表单：

@* ---------------------------------------------------------
     需要手工为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>

生成的form为：

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

第二步：添加处理表单的action:

　　　　这里与1.1的第二步一样。

第三步：添加js处理表单：

$(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);
});

注意：

　　所谓的“非介入式javascript”模式，是指假如没有添加这一步，表单照样能被处理，只是没用到ajax而已。