Ajax.处理两个不同的onSuccess响应，MVC 5, c#

Ajax.BeginForm Handling two different onSuccess Response, MVC 5,C#

本文关键字：响应 onSuccess MVC 处理 两个 Ajax      更新时间：2023-09-26

我是Ajax和Jquery的新手，所以我需要你原谅我，如果我试图做一些愚蠢的事情，我正在与MVC 5和Ajax工作。Beginform,我要做的是我有一个ajax表单，我需要用jquery验证它不引人注目，如果我得到正确的jquery验证工作与ModelState将返回视图如果是一个验证错误发现，在这种情况下，我需要更新我的表单，验证消息出现在用户浏览器，例如这里是我的控制器:

[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。i应该保存数据并返回部分视图(Bootstrap Modal)，表明数据已成功保存;否则它将返回整个视图来显示验证消息，要做到这一点，我必须把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 &nbsp;&nbsp;</button>
        </div>
    </div>
</div>
 }
  </div>

否则我将返回部分视图并将其显示为Bootstrap Modal，我需要在这种情况下不更新ajax表单targetId，我需要保持它完整，只是显示Modal，但问题是在两种情况下ModelState。在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')是一个进度模态，我在发布完成后隐藏它，下一步是我显示结果模态，如果发布执行良好，没有验证错误，我就返回它，问题是:

  • 我得到更新表单使用的UpdatetargetId在ajax表单只是很好，如果验证错误发生存在，但这是发生任何方式，如果我返回验证错误或部分视图，关心模态对我来说，在这两种情况下的形式消失，这是我不想做的事情，我需要保持表单，以防返回内容是部分视图，并在ModelStat验证错误的情况下更新，也许我错过了理解一切，但如果我是，我需要一些解释让我回到正轨。

  • 我做了一个丑陋的代码和混乱，我不喜欢在onSuccess()方法如上所述，我使用事件火灾当我关闭我的结果模态重定向我再次到索引所以形式显示，但它不干净，我不喜欢它，我需要一些专业的东西，如果存在。

提前感谢，

我完全理解你的问题，我准备向你展示我处理这种情况的方法。

因此，因为每次调用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();
            }
        }

在视图中，您需要从表单中取下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(数据)"。

所以你的表单看起来像这样: 
@using (Ajax.BeginForm("Index", new AjaxOptions
  {
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnBegin = "onBegin();",
OnComplete = "onCompleated();",
OnSuccess = "onSuccess(data,this)",
OnFailure = "onFailure()"
 }))

希望这是你需要的。

相关文章：