欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅析Asp.net MVC 中Ajax的使用

程序员文章站 2022-06-14 15:17:00
一、使用system.web.mvc.ajax   1.1 system.web.mvc.ajax.beginform   1.2 system.web.mvc.aja...

一、使用system.web.mvc.ajax

  1.1 system.web.mvc.ajax.beginform

  1.2 system.web.mvc.ajax.actionlink

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

一、使用system.web.mvc.ajax

 浅析Asp.net 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>:

          浅析Asp.net MVC 中Ajax的使用

         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而已。