1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > MVC 使用Jquery实现AJax

MVC 使用Jquery实现AJax

时间:2021-01-29 11:24:21

相关推荐

MVC 使用Jquery实现AJax

在上一篇介绍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 ponentModel.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!");elsereturn View();}

Celery 标签: MVC

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。