浅析Asp.net MVC 中Ajax的使用

           第三步：定义承载更新部分的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而已。