MVC 之AjaxHelper
除了传统的Ajax方法之外,MVC提供了AjaxHelper类:
使用AjaxHelper可以很方便的实现Ajax请求,Aps.net MVC提供了jQuery和Microsoft Ajax类库两种方式来实现,使用何种方式取决于我们Web.config配置:
<add key="UnobtrusiveJavaScriptEnabled" value="true" /> 当设置为true时,将使用jQuery方式实现请求,生成的链接如下: a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#test" href="http://www.cnblogs.com/">测试</a>
反之则使用Microsoft Ajax类库实现
href="http://www.cnblogs.com/" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this,new Sys.UI.DomEvent(event),{ insertionMode: Sys.Mvc.InsertionMode.replace,httpMethod: 'GET',updateTargetId: 'test' });"在我们创建项目时,该值默认为true。这种情况下吗,我们要在页面中引入相应的js类库:
以之前的GuestBook为例,在列表页面(Index.cshtml),使用Ajax来显示选中行的详细信息: Index.cshtml页面源码: @foreach (MvcApplication5.Models.GuestbookEntry item in ViewBag.Entries) { tr> td> @Html.DisplayFor(modelItem => item.Name) > @Html.DisplayFor(modelItem => item.Message) > @Html.DisplayFor(modelItem => item.DateAdded) > @Html.ActionLink("Edit","Edit",new { id=item.Id }) | @Html.ActionLink("Details","Details",new { id=item.Id }) | @Html.ActionLink("Delete","Delete",new { id=item.Id }) | @Ajax.ActionLink("AjaxContentController","getEntry",new { id = item.Id },new AjaxOptions { HttpMethod = "Post",UpdateTargetId = "detailsID",InsertionMode = InsertionMode.Replace }) @Ajax.ActionLink("AjaxJsonController","JsonDetails",InsertionMode = InsertionMode.Replace,OnSuccess = "Show" }) @Ajax.ActionLink("AjaxPartialView",new AjaxOptions { HttpMethod = "Get",UpdateTargetId = "detailsID" }) > > } table> div id="detailsID"div> 我们将使用ActionLink分别异步请求ContentController,Json格式的Controller和PartialView格式的Controller来显示详细信息: 1:Ajax异步请求ContentController ContentController直接以字符串形式返回实例的内容,在Index.cshtml中使用ActionLink,如下: @Ajax.ActionLink("AjaxContentController",InsertionMode = InsertionMode.Replace }) 相应的Controller: public string getEntry(int id = 0) {
GuestbookEntry entry = _db.Entries.First(c => c.Id == id);
return entry.Details;
}
结果:返回的内容直接更新到ID属性为detailsID的DIV中: 2: 使用Json格式返回 在Index.cshtml中使用ActionLink,如下:
@Ajax.ActionLink("AjaxJsonController",OnSuccess = "Show" })
public ActionResult JsonDetails(int id = 0)
{
GuestbookEntry entry = _db.Entries.First(c => c.Id == id);
return Json(entry,JsonRequestBehavior.AllowGet);
}
注意:在使用Json格式返回数据时,由于安全原因,只接收Post请求,因此在这里使用JsonRequestBehavior.AllowGet来允许Get方式请求。 同时需要在Index.cshtml中添加请求成功的相应函数Show: <script type="text/javascript"> 结果:在响应函数中更新ID属性为detailsID的DIV内容: 3使用PartialView来返回数据 PartialView类似于WebForms中的用户自定义控件,可以用来显示一些公共的信息。在Index.cshtml中 @Ajax.ActionLink("AjaxPartialView",UpdateTargetId = "detailsID" })
public ActionResult Details(int id = 0)
{
GuestbookEntry entry = _db.Entries.First(c => c.Id == id);
if (Request.IsAjaxRequest())
{
return PartialView(entry);
}
return View(entry);
}
在这里我们使用Request.IsAjaxRequest()来判断是否为Ajax请求,如果是则返回PartialView,否则返回View Ajax.BeginForm 打开Create.cshtml页面,现在的页面使用的是Html.BeginForm()进行表单提交的,下面我们将它修改为Ajax方式提交
@model MvcApplication5.Models.GuestbookEntry @{ ViewBag.Title = "Create"; } h2>Create> @using (Html.BeginForm()) { @Html.ValidationSummary(true) fieldsetlegend>GuestbookEntry> class="editor-label"> @Html.LabelFor(model => model.Name) ="editor-field"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) > @Html.LabelFor(model => model.Message) > @Html.EditorFor(model => model.Message) @Html.ValidationMessageFor(model => model.Message) p> input ="submit"="Create" /> > } 修改后的页面如下: @model MvcApplication5.Models.GuestbookEntry ="text/javascript"> function success(data) { alert(data); } > @{ ViewBag.Title = "Create"; } > @using (Ajax.BeginForm(new AjaxOptions { HttpMethod="Post",OnSuccess = "success" })) { @Html.ValidationSummary(true) 而相应的Controller没有任何变化。 附注:
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |