zoukankan      html  css  js  c++  java
  • Asp.net MVC4 Step By Step(4)-使用Ajax

    Ajax技术就是利用Javascript和XML技术实现这样的效果, 可以向Web服务器发送异步请求, 返回更新部分页面的数据, 而不需要全部更新整个页面。 Ajax请求两种类型的内容, 一种是服务端生成的HTML代码,直接嵌入到页面元素中, 另外一种是原始的序列化数据。经过解析后, 客户端Javascript可用来生成HTML代码,或直接更新页面。

    什么是部分渲染,有一个页面ajax_content.html 内容是:

    <h2>This is the Ajax content !</h2>

    待插入页面的内容如下

    <html>
    <body>
    <h1> Partial Rendering Demo</h1>
    <div id="container" />
    </body>
    </html>

    例如以上代码, <div id=”container”/>元素标记要插入的元素, 可以使用

    $("#container").load('ajax_context.html')

    向服务器发送异步请求, 把返回的内容插入#container元素, 调用返回后,DOM将会动态更新元素的内容:

    <html>
    <body>
    <h1> Partial Rendering Demo</h1>
    <div id="container" >
      <h2>This is the AJAX content!</h2>
    </div>
    </body>
    </html>

    渲染部分视图

    MVC把部分渲染当成其他请求一样看待--请求被路由到特定的控制器,控制器执行特定的操作逻辑代码。不同的是,部分渲染需要调用Controller.Partial()帮助方法来返回PartialViewResult对象。这个和ViewResult类似, PartialViewResult只渲染视图内容,不渲染外围布局和母版页内容。

    请看下列代码:

            public ActionResult Auction(long id)
            {
                var db = new DataContext();
                var auction = db.Auctions.Find(id);
                return View("Auction", auction);
            }
            public ActionResult PartialAuction(long id)
            {
                var db = new EbuyDataContext();
                var auction = db.Auctions.Find(id);
                return PartialView("Auction", auction);
            }

    再看下面视图部分的内容

    ViewsAuctions文件夹有两个文件, 其中Auction.cshtml的内容是

    @model Ebuy.Website.Models.Auction
     
    <div class="title">@Model.Title</div>
    <div class="overview">
    <p>
    <strong>Current Price: </strong>
    <span class="current-price">@Model.CurrentPrice</span>
    </p>
    </div>
    <h3>Description</h3>
    <div class="description">
    @Model.Description
    </div>

    这个是要填入Auctions.cshtml 中的部分视图。在其中可以使用Html.Partial()方法来渲染。

    @model IEnumerable<Aution>
     
    <h1>Auctions</h1>
    <section class="auctions">
     
    @foreach(var auction in Model) {
    <section class="auction">
      @Html.Partial("Auction", auction)//第一个参数是指向Auction.cshtml,第二个参数是部分视图的Model
    </section>
    }
    </section>

    上面是第一种部分视图,即插入HTML代码的方法,第二种从服务端获取原始数据,在客户端动态构建HTML代码,直接操作DOM对象的方法, 后者必须有两个条件, 服务端可以产生序列化的数据,客户端知道如何把该数据转为HTML代码,因为比较繁琐,就不写了。

    书中还说到,怎样实现一个自定义的ActionFilterAttribute, MultipleResponseFormatsAttribute, 根据,是Ajax部分视图请求,Json数据请求,还是正常请求,返回不同的ActionResult操作结果, 以便在多个控制器操作上重用逻辑。

    public class AuctionsController : Controller
    {
        public ActionResult Auction(long id)
        {
            var db = new DataContext();
            var auction = db.Auctions.Find(id);
            // Respond to AJAX requests
            if (Request.IsAjaxRequest())return PartialView("Auction", auction);
            // Respond to JSON requests
            if (Request.IsJsonRequest())return Json(auction);
            // Default to a "normal" view with layout
            return View("Auction", auction);
        }
    }

    这里实现一个MultipleResponseFormatsAttribute,

    using System;using System.Web.Mvc;
    public class MultipleResponseFormatsAttribute : ActionFilterAttribute
    {
           public override void OnActionExecuted(ActionExecutedContext filterContext)
       {
               var request = filterContext.HttpContext.Request;var viewResult = filterContext.Result as ViewResult;
              if (viewResult == null)    return;
              if (request.IsAjaxRequest())
             {
                  // Replace result with PartialViewResult
                  filterContext.Result = new PartialViewResult{TempData = viewResult.TempData,ViewData = viewResult.ViewData,ViewName = viewResult.ViewName,};
             }
             else if (Request.IsJsonRequest())
             {
                 // Replace result with JsonResult
                 filterContext.Result = new JsonResult{Data = viewResult.Model};
             }
         }
    }

     

  • 相关阅读:
    [Github] picmagick在线图片编辑器源码
    [综合] 高级as程序员应该掌握的知识点 很全面(flashk)
    透明位图点击处理
    封装遍历Group by查询后的List
    Jquery---全选按钮
    Jquery---超级链接提示
    activiti modeler整合参考
    oracle常用查询语句
    SQL优化34条
    oracle sql优化
  • 原文地址:https://www.cnblogs.com/grkin/p/3301617.html
Copyright © 2011-2022 走看看