我是Ajax和Jquery的新手,所以如果我尝试做一些愚蠢的事情,我需要您原谅我,
我正在使用MVC 5和Ajax.Beginform,
我想做的是我有一个ajax表单,我需要用不引人注目的jquery对其进行验证,如果我做对了,那么jquery验证将与ModelState一起使用,如果发现验证错误,它将再次返回 View ,在此案例我需要更新表单,以便验证消息出现在用户浏览器中,例如,这是我的 Controller :
[HttpPost]
public ActionResult Index(AddProduct model)
{
if (ModelState.IsValid)
{
// connect to the database save data etc...
return PartialView("~/Views/Shared/_MyModal.cshtml");
}
else
{
return View(model);
}
}
如果ModelState.IsValid我应该保存数据并返回表示数据已成功保存的局部 View (Bootstrap Modal),
否则它将返回整个 View 以显示验证消息,并且要做到这一点,我必须将ajax表单的TargetId放入要更新的整个ajax表单中,
这是ajax形式:
<div id="result">
@using (Ajax.BeginForm("Index", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "result",
HttpMethod = "POST",
OnBegin = "onBegin();",
OnComplete = "onCompleated();",
OnSuccess = "onSuccess()",
OnFailure = "onFailure()"
}))
{
@Html.ValidationSummary(true)
<div id="form1" class="form-horizontal">
<div class="row">
<div class="form-group">
@Html.LabelFor(m => m.Name, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Name, String.Empty, new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Price, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Price, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Price, String.Empty, new { @class = "form-help form-help-msg text-red" })
</div>
</div>
<div class="form-group">
<button class="btn btn-default col-md-2 col-md-offset-2" type="submit">Save </button>
</div>
</div>
</div>
}
</div>
否则我将返回一个局部 View ,并将其显示为Bootstrap Modal,在这种情况下,我需要不更新Ajax形式targetId,我需要保持它完整无缺,而只是显示Modal,但问题在于ModelState.IsValid或Is无效,所有响应都以ajax形式触发onSuccess方法,我不知道它们是否正常,这是javascript onsuccess()方法:
function onSuccess() {
$('#myModal').modal('hide')
$("#resultModal").modal({
backdrop: 'static',
keyboard: false
});
$('#resultModal').on('hidden.bs.modal', function (e) {
window.location = "/product";
});
}
$(#'myModal')。modal('hide')是Modal的进度,我在发布完成后将其隐藏,下一步是显示结果Modal,如果Posting执行正常而没有验证错误,则返回该结果Modal,
问题是 :
我需要保留表单,以防返回的Content是局部 View ,并在ModelStat验证错误的情况下进行更新,也许我想念一切,但是如果我愿意,我需要一些解释以使我回到正轨。
先感谢您,
最佳答案
我完全理解您的问题,并准备向您展示我用来处理这种情况的方法。
因此,由于onSuccess方法每次都不取决于ModelState是否有效而被调用,因此您将需要处理一些不同的响应。
因此,您的[HttpPost]方法应如下所示:
[HttpPost]
public ActionResult Index(AddProduct model)
{
if (ModelState.IsValid)
{
return Json(new {isValid = true, data = this.RenderPartialViewToString("ViewWhenModelStasteIsValid",model,false)});
}
else
{
return Json(new { isValid = false, data = this.RenderPartialViewToString("ViewWhenModelStasteIsNotValid", model, false) });
}
}
public static string RenderPartialViewToString(this Controller controller, string viewName, object model)
{
if (string.IsNullOrEmpty(viewName))
{
viewName = controller.ControllerContext.RouteData.GetRequiredString("action");
}
controller.ViewData.Model = model;
using (var sw = new StringWriter())
{
var viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
viewResult.View.Render(viewContext, sw);
return sw.GetStringBuilder().ToString();
}
}
在 View 中,您将需要从表单中删除UpdateTargetId并在成功函数上对其进行手动处理。
,因此您的onSuccess函数应如下所示:
function onSuccess(result, ref) {
if (result.isValid) {
jQuery("#result).html(result.data);
} else {
jQuery("#form1").html(result.data);
}
}
确保将响应数据传递给onSuccess函数,因此您需要将格式从 OnSuccess =“onSuccess()” 更改为 OnSuccess =“onSuccess(data,this)” 。
因此,您的表单将如下所示:
@using (Ajax.BeginForm("Index", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnBegin = "onBegin();",
OnComplete = "onCompleated();",
OnSuccess = "onSuccess(data,this)",
OnFailure = "onFailure()"
}))
希望这是您所需要的。