【ASP.Net MVC】在AspNet 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>

第四步:(可选)为增强用户体验,添加AjaxOptionsd对象的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而已。

【ASP.Net MVC】在AspNet Mvc使用Ajax

时间: 2024-11-05 06:13:54

【ASP.Net MVC】在AspNet Mvc使用Ajax的相关文章

【ASP.Net MVC】AspNet Mvc一些总结

AspNet Mvc一些总结 RestaurantReview.cs using System; using System.Collections.Generic; using System.ComponentModel; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Text.RegularExpressions; using System.Web; using System.Web.M

ASP.NET MVC 入门11、使用AJAX

asp.net mvc 支持微软自身Ajax 和 JQuery框架 asp.net mvc View视图可以理解为 一个包含"<%%>"变量引和的模板. Script与HTML优雅分离参见: http://www.cnblogs.com/QLeelulu/archive/2008/10/22/1317214.html ASP.NET MVC 入门11.使用AJAX

NU1002 The dependency Microsoft.AspNet.Mvc 5.2.3 in project dotnetstarter does not support framework

NU1002 The dependency Microsoft.AspNet.Mvc 5.2.3 in project dotnetstarter does not support framework DNXCore,Version=v5.0. 解决"CS0234 The type or namespace name 'Mvc' does not exist in the namespace 'Microsoft.AspNet' (are you missing an assembly refe

数往知来 ASP.NET MVC HtmlHelper、MVC快速增删改查 Cache MVC3客户端验证 MVC隐式异步提交 &lt;二十八&gt;

一.HtmlHelper.MVC快速增删改查 MVC 在MVC里面请求首先到控制器-->然后 -->数据库数据放在APP_DATE文件夹里, -->js.css文件放在content文件夹里 -->控制器放在Controllers里,控制器要以controller结尾 控制器下面的所有方法都称为action 2)webform跟 aspnet MVC:区别请求的地址不一样了 MVC请求的是控制器下面的action webform:aspx页面或者是一般处理程序 -->a标签

ASP.NET CORE 1.0 MVC API 文档用 SWASHBUCKLE SWAGGER实现

from:https://damienbod.com/2015/12/13/asp-net-5-mvc-6-api-documentation-using-swagger/ 代码生成工具: https://github.com/NSwag/NSwag This article shows how to document your ASP.NET Core 1.0 MVC API using Swagger with Swashbuckle. Per default, it does not us

Configuring Autofac to work with the ASP.NET Identity Framework in MVC 5

https://developingsoftware.com/configuring-autofac-to-work-with-the-aspnet-identity-framework-in-mvc-5 Configuring Autofac to work with the ASP.NET Identity Framework in MVC 5 By Tony Mackay  02 February 2015 This post will show you how to modify the

AspNet MVC中各种上下文理解

0  前言 AspNet MVC中比较重要的上下文,有如下: 核心的上下文有HttpContext(请求上下文),ControllerContext(控制器上下文) 过滤器有关有五个的上下文ActionExecutingContext,ActionExecutedContext,ResultExecutingContext,ResultExecutedContext,ExceptionContext 视图相关的上下文ViewContext 这些上下文之间的关系如下图所示 说明: 1.Contro

ASP.NET Web Form和MVC中防止F5刷新引起的重复提交问题

转载  http://www.cnblogs.com/hiteddy/archive/2012/03/29/Prevent_Resubmit_When_Refresh_Reload_In_ASP_NET_Web_Form_MVC.html 什么是刷新/重新载入 IE中的刷新(Refresh),在FF和Chrome中称为重新载入(Reload),与正常进入页面的区别在于以下两点: 1. 缓存控制 如果文件(比如图片)在本地缓存中已经存在,正常进入页面会不访问服务器而直接从本地加载.而对于刷新操作,

ASP.NET 学习小记 -- “迷你”MVC实现(2)

Controller的激活 ASP.NET MVC的URL路由系统通过注册的路由表对HTTO请求进行解析从而得到一个用户封装路由数据的RouteData对象,而这个过程是通过自定义的UrlRoutingModule对HttpApplication的PostResolveRequestCache事件进行注册实现的.RouteData中已经包含了目标Controller的名称,现在我们需要根据该名称激活对应的Controller对象. MvcRouteHandler 对于这个"迷你版"的M