ajax.beginform bootstrap 上传,实现bootstrap模态框弹出：Asp.net MVC利用Ajax.BeginForm实现，并进行前端验证...

实现bootstrap模态框弹出：Asp.net MVC利用Ajax.BeginForm实现，并进行前端验证

1.新建Controllerpublic ActionResult Person(int? id)

{

//could add code here to get model based on id....

return PartialView("_Person");

//calling partial with existing model....

//return PartialView("_Person", model);

}

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Person(PersonValidationViewModel model)

{

if (!ModelState.IsValid)

{

var errors = GetErrorsFromModelState();

return Json(new {success = false, errors = errors});

//return PartialView("_Person", model);

}

//save to persistent store;

//return data back to post OR do a normal MVC Redirect....

return Json(new {success = true});  //perhaps you want to do more on return.... otherwise this if block is not necessary....

//return RedirectToAction("Index");

}

2.新建相应的index

@ViewBag.Title

Form binding to bootstrap modal with the Ajax Helpers

@Ajax.ActionLink("Add Person", "Person",null,

new AjaxOptions() {HttpMethod = "Get",UpdateTargetId = "modalContent", InsertionMode = InsertionMode.Replace, OnBegin = "onBegin", OnSuccess = "onSuccess",OnFailure = "onFailure",OnComplete = "onComplete"},

new { id = "btnPerson", @class = "btn btn-lg btn-info" })

@section Scripts {

@Scripts.Render("~/bundles/jqueryval")

function onBegin() {

//alert('begin');

}

function onSuccess() {

//alert('success');

}

function onComplete() {

//alert('complete');

$('#myModal').modal('show');

}

function onFailure() {

alert('fail');

}

}

index 相关代码

3.弹出模态框用partialView _Person

×

Modal with Model & Form

@using (@Ajax.BeginForm(new AjaxOptions() {HttpMethod = "Post",OnSuccess = "formSuccess(data)"}))

{

@Html.AntiForgeryToken()

@Html.ValidationSummary(true)

@Html.LabelFor(model => model.FirstName, new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.FirstName)

@Html.ValidationMessageFor(model => model.FirstName)

@Html.LabelFor(model => model.LastName, new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.LastName)

@Html.ValidationMessageFor(model => model.LastName)

@Html.LabelFor(model => model.BirthDate, new { @class = "control-label col-md-2" })

@Html.EditorFor(model => model.BirthDate)

@Html.ValidationMessageFor(model => model.BirthDate)

Cancel

Save

}

function formSuccess(result) {

if (result.success) {

$('#myModal').modal('hide');

location.reload();

} else {

$.each(result.errors, function(key, val) {

var container = $('span[data-valmsg-for="' + key + '"]');

container.removeClass("field-validation-valid").addClass("field-validation-error");

container.html(val[val.length - 1].ErrorMessage);

});

}

}

$(function () {

//allow validation framework to parse DOM

$.validator.unobtrusive.parse('form');

});

partialview

4.前段验证

需加入相关的js文件：jquery.validate.unobtrusive.min.js

view中增加相关js$(function () {         //allow validation framework to parse DOM

$.validator.unobtrusive.parse('form');

});

Modelpublic class PersonValidationViewModel

{

[StringLength(10,MinimumLength=2)]

public string FirstName { get; set; }

public string LastName { get; set; }

[DataType(DataType.Date)]

public string BirthDate { get; set; }

}

在Views的多级文件夹中，我们在Controlls文件夹下新建了文件夹，那么对于partialView怎么处理呢？在admin_routing方法中添加如下代码PartialViewLocationFormats = new[]

{

"~/Views/Shared/{0}.cshtml",                 "~/Views/{1}/{0}.cshtml",                "~/Views/Admin/{1}/{0}.cshtml"//自定义QMRisk的视图

};

即可在Views/Admin/WebUser文件夹下添加PartialView _Person

效果图

欢迎来到技术之家，

如需转载，烦请保留本文链接和出处：http://www.jszja.com/contents/13/660.html

您的支持将是我们前进的动力！如对本篇文章有疑问或建议，请通过本站下方邮箱联系我们，让技术之家每天进步一点点！(●'◡'●)