Asp.net MVC4 Step By Step(4)-使用Ajax_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > Asp.net MVC4 Step By Step(4)-使用Ajax

Asp.net MVC4 Step By Step(4)-使用Ajax

 2013/9/5 19:14:38  grkin  博客园  我要评论(0)
  • 摘要:Ajax技术就是利用Javascript和XML技术实现这样的效果,可以向Web服务器发送异步请求,返回更新部分页面的数据,而不需要全部更新整个页面。Ajax请求两种类型的内容,一种是服务端生成的HTML代码,直接嵌入到页面元素中,另外一种是原始的序列化数据。经过解析后,客户端Javascript可用来生成HTML代码,或直接更新页面。什么是部分渲染,有一个页面ajax_content.html内容是:<h2>ThisistheAjaxcontent!</h2>
  • 标签:.net ASP.NET MVC 使用 net Ajax

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

 

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

class="alt"><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);
        }



再看下面视图部分的内容

Views\Auctions文件夹有两个文件, 其中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代码,因为比较繁琐,就不写了。

发表评论
用户名: 匿名