MVC 如何使用jquery.form.js 进行无刷新提交？ - ASP.NET - 网站开发技术
帮助别人就是帮助自己！
如果这里解决了您的问题，请您点一下推荐
MVC 如何使用jquery.form.js 进行无刷新提交？
这怎么修改？
&%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl&MvcApplication.Models.UserInfo&" %&
&% using (Html.BeginForm()) {%&
用户名：&%:Html.TextBoxFor(model =& model.UserName)%&
密码：&%:Html.TextBoxFor(model =& model.UsePwd)%&
&input type="Submit" value="添加"&
这是controller代码
/// &summary&
/// &/summary&
/// &returns&&/returns&
[HttpPost]
public ActionResult Create(UserInfo userinfo)
//这怎么写？怎么知道我添加成功失败？
ActionResult 有很多派生类
最简单的一种可以用 Content("ok")
Action方法返回ActionResult类型的结果。ASP.NET MVC为我们提供了几种ActionResult的实现，如下：
ViewResult. 呈现视图页给客户端。由View 方法返回.
RedirectToRouteResult. 重定向到另外一个Route。由RedirectToAction 和RedirectToRoute 方法返回.
RedirectResult. 重定向到另外一个URL。由 Redirect 方法返回.
ContentResult. 返回普通的内容。例如一段字符串。由 Content 方法返回.
JsonResult. 返回JSON结果。由 Json 方法返回.
EmptyResult. 如果Action必须返回空值，可以返回这个结果。Controller中没有实现的方法，可以return new EmptyResult();.
ActionResult 有很多派生类
最简单的一种可以用 Content("ok")
可能是我表达错了,js那部分应该怎么写？
$('#form名称').ajaxSubmit(function (data) {});
能详细点吗？
$(function () {
$("#formname").validate({
submitHandler: function (form) {
$(form).ajaxSubmit({
clearForm: false,
success: function (responseText, statusText, xhr, $form) {
if (responseText.OK) {
alert(responseText.Message);
window.location.href = '@Url.Action("Index")';
alert(responseText.Message);
return Json(new { OK = true, Message = "Submit Success!" });
return Json(new { OK = false, Message = "Submit Failure!" });
$('#form名称').ajaxSubmit(function (data) {
if(data=="ok"){
return Content('ok'); or Content('error');
JScript code
$(function () {
$("#formname").validate({
submitHandler: function (form) {
$(form).ajaxSubmit({
clearForm: false,
这位仁兄 你的这个例子测试了
http://localhost:1926/AdminWelcome/Login这是我原先的地址
http://localhost:1926/AdminWelcome/Login?name=Loginform提交之后就到这来了..地址都变了,怎么会是无刷新呢
我把我写的练习代码全部弄出来吧
&%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl&MvcApplication.Models.web_UserInfo&" %&
&script type="text/javascript"&
$(document).ready(function () {
var options = {
type: "post",
url: $(this).attr("Login"),
dataType: 'json',
beforeSubmit: function () { alert("提交表单前的验证工作"); },
error: function () { alert("提交失败"); },
success: function () { alert("提交成功"); }
$("form").ajaxForm(options);
&% using (Html.BeginForm())
&div align="center" style="width:100%; height:100%;"&
&div class="logindiv"&
&div style="width:300 height:100"&
&div class="loginbottom"&
&div class="loginlistdiv"&
&div class="login_list_name_div"&用户名：&/div&
&div class="loing_list_value_div" align="center"&
&%:Html.TextBoxFor(model =& model.UserName, new { @class = "logintxtbox", maxlength = "12" })%&
&div class="loginlistdiv"&
&div class="login_list_name_div"&密&&&&码：&/div&
&div class="loing_list_value_div" align="center"&
&%:Html.PasswordFor(model =& model.UserPwd, new { @class = "logintxtbox", maxlength = "12" })%&
&div class="loginlistdiv"&
&div class="login_list_name_div"&验证码：&/div&
&div class="loing_list_value_div" align="center"&
&div class="login_list_imgname_div"&
&%:Html.TextBoxFor(model =& model.UserName, new { @class = "imgtextbox", maxlength = "4" })%&
&div style=""&
&img class="login_codeimg" alt="验证码" id="validimg" src="&%=Url.Action("CreateImageCode","GoogleCaptcha")%&" onclick="reloadcode()"/&
&script type="text/javascript"&
function reloadcode() {
var verify = document.getElementById('validimg');
verify.setAttribute('src', '&%=Url.Content("~/GoogleCaptcha/CreateImageCode?")%&' + Math.random());
&div align="center" style="width:300 height:30"&
&input type="submit" value="登录" /&
&input type="button" value="清空" /&
controller的
/// &summary&
/// &/summary&
/// &returns&&/returns&
[HttpPost]
public ActionResult Login(web_UserInfo userinfo)
return Json("ok");
JScript code
$(function () {
$("#formname").validate({
submitHandler: function (form) {
$(form).ajaxSubmit({
clearForm: false,
这位仁兄 你的这个例子测试了
http://localhost:1926/Ad……
我这里是正常的
引用 10 楼
这位仁兄,你用的是jquery.form.js吗？方便的话加下我的Q指导下
引用 10 楼 lovesheng1212 的回复:
[Quote=引用 8 楼
JScript code
$(function () {
$("#formname").validate({
submitHandler: function (form) {
$(form).ajaxSubmit({
clearForm: false,
这位仁兄 你的这个例子测试了
http://localhost:1926/Ad……
我这里是正常的
你这会不会存在重复提交的情况呢？MVC3下异步表单提交上传图片实现 - 推酷
MVC3下异步表单提交上传图片实现
由于项目需要【任何一个人都能上传不定张图片】，这两天就在写这个功能。现在写完了，记录下。
环境：MVC3 + EF4
所需插件下载地址：http://download.csdn.net/detail/tl110110tl/8248099
所需数据库表如下图：
插件参考：/china-li/archive//2800144.html
html代码：
&!DOCTYPE html&
&title&AddSkin&/title&
&style type=&text/css&&
margin: 0;
padding: 0;
margin: 10
width: 150
height: 100
font-size: 38
text-align:
line-height: 100
margin: 0;
padding: 0;
&script src=&../../Scripts/jquery-1.5.1.js& type=&text/javascript&&&/script&
&script src=&../../Scripts/jquery.form.js& type=&text/javascript&&&/script&
&script src=&../../Scripts/jquery.unobtrusive-ajax.min.js& type=&text/javascript&&&/script&
&script type=&text/javascript&&
$(document).ready(function () {
$(&.skinType&).click(function () {
var mingzi = $(this).html();
var typeid = $(this).attr(&typeid&);
$(&#Mingzi&).html(mingzi);
$(&#TypeID&).val(typeid);
$(&#div1&).html(&&);
var TypeID = $(&#TypeID&).val();
type: &post&,
cache: false,
data: { &TypeID&: TypeID },
url: &/Skin/GetImgUrl&,
success: function (msg) {
err = err.substring(0, 5);
//alert(err);
if (err != &error&) {
showImgs(msg);
error: function () {
alert(&出了点小错误，暂时看不到 & + $(&#Mingzi&) + & 图片信息&);
var options = {
target: '#div1',
// target element(s) to be updated with server response
//beforeSubmit: showRequest,
// pre-submit callback
success: showResponse
// post-submit callback
// bind to the form's submit event
$('#myForm').submit(function () {
$(&#div1&).html(&正在上传..&);
$(this).ajaxSubmit(options);
function showResponse() {
var div1 = $(&#div1&).html();
div1 = div1.substring(0, 5);
//alert(div1);
if (div1 != &error&) {
//把图片们都显示出来
showImgs();
function showImgs(urls) {
var strIds =
if (typeof (urls) == &undefined&) {
//如果传进来的urls是空的，那么证明需要从div1里面拿数据
strIds = $(&#div1&).html();
if (strIds.length & 1) {
$(&#imgContent&).html(&&);
//遍历并拼接&img alt=&& src=&/Home/Image& /&标签
var strs = new Array();
strs = strIds.split(&,&);
var htms = &&;
var sts = new Array();
for (var i = 0; i & strs. i++) {
sts = strs[i].split(&|&);
htms += &&img alt=\&&+sts[1]+&\& src=\&& + sts[0] + &\& /&&;
$(&#imgContent&).html(htms);
&div class=&skinType& typeid=&1&&
&div class=&skinType& typeid=&2&&
&div class=&skinType& typeid=&3&&
&div class=&skinType& typeid=&4&&
&div class=&clear&&
&hr color=&gray& /&
为：&span id=&Mingzi& style=&color:font-size:22&&&/span&添加skin
&form id=&myForm& action=&/Skin/AddImg& method=&post& enctype=&multipart/form-data&&
&input type=&file& name=&upfile& /&&br /&
&input type=&hidden& id=&TypeID& name=&TypeID& /&
&input type=&submit& value=&确认上传& /&上传文件最大为&span style=&color: B&&8MB&/span&
&div id=&div1& style=&color: R&&
&div id=&imgContent&&
后台对应的controller
namespace SGS.Mainproto.Controllers
public class SkinController : Controller
// GET: /Skin/
IBLL.ISkinBLL _skinBLL = new BLL.SkinBLL();
public ActionResult Index()
return View();
/// &summary&
/// 添加 skin
/// URL：/Skin/AddSkin
/// &/summary&
public ActionResult AddSkin()
return View();
/// &summary&
/// 添加 图片
/// URL：/Skin/AddImg
/// &/summary&
[HttpPost]
public ActionResult AddImg()
string TypeID = Request[&TypeID&];
int typeId;
if (!int.TryParse(TypeID, out typeId))
return Content(&error_typeID错误&);
HttpPostedFileBase file = Request.Files[0];
if (file.ContentLength & 0 && file.ContentLength / 1024 & 10000)
//得到文件的扩展名
string ext = System.IO.Path.GetExtension(file.FileName);
if (ext.ToLower() == &.jpg& || ext.ToLower() == &.png& || ext.ToLower() == &.gif&)
string datePath = DateTime.Now.ToString(&yyyy/MM/dd&);//时间路径
string oneFilePath = Server.MapPath(&/ImageUp/& + datePath);//时间本地路径
if(!System.IO.Directory.Exists(oneFilePath))//创建本地目录
System.IO.Directory.CreateDirectory(oneFilePath);
string filename = Guid.NewGuid().ToString() +//唯一保存文件名
string finallFilePath = oneFilePath + &/& +//最终本地保存路径
Model.Skin skin = new Model.Skin();
skin.SkinType = typeId.ToString();
skin.SkinName = file.FileN
skin.SkinURL = &/ImageUp/& + datePath + &/& +
_skinBLL.AddEntity(skin);
file.SaveAs(finallFilePath);
var skinUrl = _skinBLL.LoadEntitys(s=&s.SkinType==TypeID).OrderByDescending(s=&s.ID).Select(s=&s.SkinURL+&|&+s.SkinName);
string res = &&;
foreach (string item in skinUrl)
res += item + &,&;
res = res.TrimEnd(',');
return Content(res);
return Content(&error_不是图片文件&);
return Content(&error_文件为空或者超过了8M&);
[HttpPost]
public ActionResult GetImgUrl()
string TypeID = Request[&TypeID&];
if (string.IsNullOrEmpty(TypeID))
return Content(&error_typeID为空&);
var skinUrl = _skinBLL.LoadEntitys(s =& s.SkinType == TypeID).OrderByDescending(s =& s.ID).Select(s =& s.SkinURL + &|& + s.SkinName);
string res = &&;
foreach (string item in skinUrl)
res += item + &,&;
res = res.TrimEnd(',');
return Content(res);
已发表评论数()
&&登&&&陆&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见