MVC Ajax Helpers

2021-07-04 18:06

阅读:404

标签:.text   http请求   提示   javascrip   介绍   inf   获取   没有   color   

在MVC中要实现Ajax有很多的方式,有微软自己的MicrosoftAjax,也可以用JQuery的AJax来实现,如果对其他的JavaScript框架熟悉,还可以采用其他的实现方案,比如说Prototype等等。

以下是微软自己的实现方案。

需要预先加载的JavaScript文件:

1  2  

在MVC中已经提供了下面几个现成的HTML Hepler:

  • Ajax.ActionLink()
  • Ajax.BeginForm()
  • Ajax.RouteLink()
  • Ajax.BeginRouteForm()

Ajax.ActionLink

使用ActionLink发送异步请求的方法:

View

1 
"myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;"> 2
3 @Ajax.ActionLink("Click Me", "GetTime", new AjaxOptions { UpdateTargetId = "myPnl" })

Controller

1 public ActionResult GetTime()
2 {
3     return Content(DateTime.Now.ToString());
4 }

以上示例使用ActionLink超链接发送请求到GetTime,返回一个ContentResult,通过AjaxOptions中的UpdateTargetId属性指定了需要更新的页面元素。

AjaxOptions中还有其他可以指定的属性:

Confirm 等效于javascript中的return confirm(msg),在点击该链接时先提示需要确认的信息。
HttpMethod 指定使用Get或者是Post方式发送Http请求
InsertMode 指定使用哪一种方式在指定的UpdateTargetId元素更新数据,可以有三种方式: "InsertAfter", "InsertBefore", or "Replace" 。默认为:Replace
LoadingElementDuration Loading元素显示的时间
LoadingElementId 可以指定在Http请求期间显示的Loading元素
OnBegin 在Http请求之前执行的javascript方法
OnComplete 在Http请求结束时执行的方法
OnFailure 在Http请求失败时执行的方法
OnSuccess 在Http请求成功时执行的方法
UpdateTargetId Http请求更新的页面元素
Url Http请求的Url

关于AjaxOptions中各方法的使用方法,在之前关于ActionResult的介绍的文章中有相关的列子:

JsonResult

注意点

  • OnComplete和OnSuccess的区别:OnComplete是获取了Http请求时引发的,此时页面还没有进行更新,OnSuccess是在页面已经更新后引发的。
  • ActionLink中的actionName和AjaxOption中的Url的关系:两者分别产生的HTML如下,但是执行的结果相同,希望有高手能解释下这两者有无区别。
1 "/Home/GetTime" data-ajax-update="#myPnl" data-ajax-mode="replace" data-ajax="true">Click Me 
2 "/" data-ajax-url="Home/GetTime" data-ajax-update="#myPnl" data-ajax-mode="replace" data-ajax="true">Click Me

Ajax.BeginForm

该Html Hepler可以实现使用Ajax方式提交Form,在指定的页面元素中显示提交的结果。

View

 1 @model MvcAjax.Models.UserModel
 2 @{
 3     ViewBag.Title = "AjaxForm";
 4 }
 5 
 6 
"myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;"> 7
8 9 @using (Ajax.BeginForm("SaveUser", new AjaxOptions { UpdateTargetId = "myPnl" })) 10 { 11
12131619202124272829323536374041
14 @Html.LabelFor(m => m.UserName) 15 17 @Html.TextBoxFor(m => m.UserName) 18
22 @Html.LabelFor(m => m.Email) 23 25 @Html.TextBoxFor(m => m.Email) 26
30 @Html.LabelFor(m => m.Desc) 31 33 @Html.TextBoxFor(m => m.Desc) 34
"2"> 38 "submit" value="Submit" /> 39
42 }

Model

 1 using System.ComponentModel.DataAnnotations;
 2 
 3 namespace MvcAjax.Models
 4 {
 5     public class UserModel
 6     {
 7         [Display(Name = "Username")]
 8         public string UserName { get; set; }
 9 
10         [Display(Name = "Email")]
11         public string Email { get; set; }
12 
13         [Display(Name = "Description")]
14         public string Desc { get; set; }
15     }
16 }

Controller

 1 public ActionResult AjaxForm()
 2 {
 3     return View();
 4 }
 5 
 6 [HttpPost]
 7 public ActionResult SaveUser(UserModel userModel)
 8 {
 9     //Save User Code Here
10     //......
11 
12     return Content("Save Complete!");
13 }

以上示例代码实现了采用Ajax提交Form数据的大概方法,在Ajax.BeginForm中同样使用AjaxOptions来设置Ajax请求的参数,和Ajax.ActionLink中的使用方法相同。

其他:

在介绍JavaScriptResult时曾经提到了该ActionResult在普通的请求中是直接当作文件Reponse出的,但是在Ajax请求中,便可以使用该Result,并且执行Result中的JavaScript。

比如将上面的Conntroller更改为以下代码:

1 [HttpPost]
2 public ActionResult SaveUser(UserModel userModel)
3 {
4     //Save User Code Here
5     //......
6 
7     //return Content("Save Complete!");
8     return JavaScript("alert(‘Save Complete!‘);");
9 }  

便可在执行改Ajax请求之后执行JavaScriptResult中的语句。

 

MVC Ajax Helpers

标签:.text   http请求   提示   javascrip   介绍   inf   获取   没有   color   

原文地址:http://www.cnblogs.com/felix-wang/p/7109988.html

上一篇:node.js 安装使用http-server

下一篇:meta


评论


亲,登录后才可以留言!