总结一下,在MVC下利用JQUERY实现AJAX提交,并实现AJAX .NET的UpdateProgress功能
2010-11-21 23:26
861 查看
在MVC下我们不能利用AJAX.NET控件,那么要实现UpdateProgress来显示进度怎么办,我们可以利用JQUERY来实现这个功能。顺便说一句JQuery将集成在下一版本的Visual Studio中,是MS AJAX FrameWork的一部分。
1.接着上一篇的 XML Menu,我们先编辑Menu.XML,添加如下代码:
<MenuItem Order="4" Action="Test" Controller="AJAXFORM"> AJAXFORM </MenuItem>
2.在View目录下添加AJAXFORM目录和View Test.
效果如下:![](http://images.cnblogs.com/cnblogs_com/conan77/WindowsLiveWriter/MVCJQUERYAJAXAJAX.NETUpdateProgress_57D3/image_thumb.png)
代码:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Test </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <script src="http://www.cnblogs.com/Scripts/jquery-1.2.3-intellisense.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready(function() { $.formValidator.initConfig(); $("#data").formValidator({ onshow: "please input test data", onfocus: "test data required", oncorrect: "OK" }) .inputValidator({ min: 1, empty: { leftempty: true, rightempty: true }, onerror: "test data required" }); var options = { target: '#divResult', // target element(s) to be updated with server response beforeSubmit: check, // pre-submit callback success: showResponse, // post-submit callback url: 'Test', // override for form's 'action' attribute type: 'post', // 'get' or 'post', override for form's 'method' attribute dataType: 'json' // 'xml', 'script', or 'json' (expected server response type) // other available options: //clearForm: true // clear all form fields after successful submit //resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example: //timeout: 3000 }; $('form').ajaxForm(options); }); function checkForm() { return jQuery.formValidator.pageIsValid(); } function showResponse(data) { data = decodeURI(data); $("#data").val(decodeURI($("#data").val())); //后台来的数据经过编码 $("#divLoading").removeClass().addClass("Hidden"); $("#DivResultData").html(data); //提交前编码,这里再解码 } function check() { if (checkForm()) { $("#divLoading").removeClass().addClass("Visible"); $("#divResult").removeClass().addClass("Visible"); $("#data").val(encodeURI($("#data").val())); //提交前编码 } } </script> <h2> Test</h2> <%using (Html.BeginForm("", "", FormMethod.Post, new { @onsubmit = "return checkForm();" })) { %> <fieldset> <legend>AJAX Form 演示 </legend> <h3> Test</h3> <%=Html.TextBox("data", "", new { @class = "InputNormal" })%> <div id="dataTip"> </div> <input id="submit" type="submit" value="submit" /> </fieldset> <div id="divResult" class="Hidden"> <h3> Result</h3> <fieldset> <div id="divLoading"> <img src='<%=Url.Content("~/Content/images/loader.gif")%>' alt="load" /> please waiting...</div> <div id="DivResultData"> </div> </fieldset> </div> <%} %> </asp:Content>
$('form').ajaxForm(options);
用了form插件,用div实现UpdateProgress
3.Action
![](http://images.cnblogs.com/cnblogs_com/conan77/WindowsLiveWriter/MVCJQUERYAJAXAJAX.NETUpdateProgress_57D3/image_thumb_1.png)
![](http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
namespace MVCMembership.Controllers
{
public class AJAXFORMController : Controller
{
//
// GET: /AJAXFORM/
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult Test()
{
return View();
}
[AcceptVerbs(HttpVerbs.Post), ValidateInput(false)] //这里ValidateInput要的,否则不能提交如<aaa>之类的
public ActionResult Test(string data)
{
data = Server.HtmlDecode(data); //提交前编码,这里要解码
System.Threading.Thread.Sleep(5000); //模拟等待
return Json(Server.HtmlEncode("Your data:" + data)); //这里编码,javascript接收后解码
}
}
}
![](http://images.cnblogs.com/cnblogs_com/conan77/WindowsLiveWriter/MVCJQUERYAJAXAJAX.NETUpdateProgress_57D3/image_thumb_2.png)
好了,这个demo只是简单的很,提供一个思路给大家参考,谢谢
代码下载,我的网站
转自:http://www.cnblogs.com/conan77/archive/2009/06/03/1494987.html
相关文章推荐
- ASP.NET MVC + Jquery 实现Ajax下拉框数据三级联动
- jquery + json + springMVC集成在controller中实现Ajax功能
- jquery实现ajax提交form表单的方法总结
- ASP.NET MVC + Jquery 实现Ajax下拉框数据三级联动
- jquery实现ajax提交form表单的方法总结
- 利用 Linq+Jquery+Ajax 实现异步分页功能可简化带宽压力
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- jquery实现ajax提交form表单的方法总结(转)
- 谁能用jQuery和Ajax做的访问ado.net程序-----跪求各位大侠(有相似的也可以,只要实现的是类似的功能就可以)
- asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
- asp.net mvc利用 ajax实现输入自动完成
- 利用 Linq+Jquery+Ajax 实现异步分页功能
- 实现 JSON + Jquery+.Net ajax功能
- 利用JQuery实现Struts2的Ajax功能
- Asp.net MVC 中利用jquery datatables 实现数据分页显示功能
- 【Struts2】利用JQuery与struts2-json-plugin实现Struts2的Ajax功能并利用JSON传递数据
- asp.net中利用Jquery+Ajax+Json实现无刷新分页
- Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
- 关于JQuery 中$.ajax函数利用jsonp实现Ajax跨域请求ASP.NET的WebService成功获取数据的案例