[转载]MVC 使用Jquery实现AJax – CELERY – 博客园.
在上一篇介绍MVC中的Ajax实现方法的时候,曾经提到了除了使用Ajax HTML Helper方式来实现之外,JQuery也是实现Ajax的另外一种方案。
通过get方法实现AJax请求
View
<script type="text/javascript"> function GetTime() { $.get("Home/GetTime", function (response) { $("#myPnl").html(response); }); return false; } </script> <div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;"> </div> <a href="#" onclick="return GetTime();">Click Me</a>
Controller
public ActionResult GetTime() { return Content(DateTime.Now.ToString()); }
通过post方法实现Form的Ajax提交
View
@model MvcAjax.Models.UserModel @{ ViewBag.Title = "AjaxForm"; } <script type="text/javascript"> $(document).ready(function () { $("form[action$='SaveUser']").submit(function () { $.post($(this).attr("action"), $(this).serialize(), function (response) { $("#myPnl").html(response); }); return false; }); }); </script> <div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;"> </div> @using (Html.BeginForm("SaveUser", "Home")) { <table> <tr> <td> @Html.LabelFor(m => m.UserName) </td> <td> @Html.TextBoxFor(m => m.UserName) </td> </tr> <tr> <td> @Html.LabelFor(m => m.Email) </td> <td> @Html.TextBoxFor(m => m.Email) </td> </tr> <tr> <td> @Html.LabelFor(m => m.Desc) </td> <td> @Html.TextBoxFor(m => m.Desc) </td> </tr> <tr> <td colspan="2"> <input type="submit" value="Submit" /> </td> </tr> </table> }
Model
using System.ComponentModel.DataAnnotations; namespace MvcAjax.Models { public class UserModel { [Display(Name = "Username")] public string UserName { get; set; } [Display(Name = "Email")] public string Email { get; set; } [Display(Name = "Description")] public string Desc { get; set; } } }
Controller
[HttpPost] public ActionResult SaveUser(UserModel userModel) { //Save User Code Here //...... return Content("Save Complete!"); }
以上代码实现了JQuery POST提交数据的方法。
通过查看以上两种JQuery方式的Ajax实现方法,和之前AJax HTML Helper比较可以发现其实Controller都是相同的。
采用jQuery方式提交数据的的主要实现方案就是通过jQuery的get或者post方法,发送请求到MVC的controller中,然后处理获取的response,更新到页面中。
注意点:
无论是使用超链接和form方式来提交请求,JavaScript的方法始终都有一个返回值false,用来防止超链接的跳转或者是form的实际提交。
这个地方就会出现一个疑问:
如果针对该页面禁止了JavaScript脚本,那么该页面就是跳转或者是form就是提交,返回的ActionResult处理就会出现问题了。
这个时候就需要在Controller中判断该请求是否是Ajax请求,根据不同的情况返回不同的ActionResult:
[HttpPost] public ActionResult SaveUser(UserModel userModel) { //Save User Code Here //...... if (Request.IsAjaxRequest()) return Content("Save Complete!"); else return View(); }
Celery 标签: MVC