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

Posted 2023-03-27

【中文标题】Ajax.BeginForm 处理两个不同的 onSuccess 响应，MVC 5，C#

【英文标题】：Ajax.BeginForm Handling two different onSuccess Response, MVC 5,C#

【发布时间】：2017-03-28 04:08:52

【问题描述】：

我是 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.IsValid 我应该保存数据并返回部分视图（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 模态，在这种情况下我需要不更新 ajax 表单 targetId 我需要保持其完整并仅显示模态，但问题在于两种情况下 ModelState。 IsValid 或 Not Valid 所有响应都以 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') 是一个进度模态，我在发布完成后将其隐藏，下一步是我显示结果模态，如果发布执行正常，我将返回它验证错误， 问题是：

如果验证错误碰巧存在，我可以使用 ajax 表单中的 UpdatetargetId 更新表单，但如果我返回验证错误或为我关心模态的部分视图，任何方式都会发生这种情况，在这两种情况下，表格都会消失，这是我不会做的事情， 我需要保留表单以防返回内容是部分视图，并在 ModelStat 验证错误时更新，也许我错过了理解所有内容，但如果我是，我需要一些解释让我回到正轨。

我做了一个丑陋的代码和凌乱的代码，我不喜欢上面提到的 onSuccess() Mehtod，当我关闭我的结果时，我使用了事件触发 Modal 再次将我重定向到 Index 所以表单再次显示，但它不干净，我不喜欢它，如果有的话，我需要专业的东西。

在此先感谢您，

【问题讨论】：

嘿，你检查过我的解决方案了吗？

抱歉迟到了，是的，我确实检查过了，老实说，我发现几乎三篇关于渲染部分查看的文章这是我第一次考虑，因为您先生您的解决方案对我很方便，并激励我做更多的事情，我正要尝试，但我认为它对我来说会很好，谢谢先生，你的回答已经足够好了，但我认为你发布的控制器中有一些代码错误，请检查以便任何人都可以从中获得帮助，再次感谢您先生..

谢谢你，先生，它就像一个魅力^_^！我花了很长时间才应用它，我与它有很多关系，它工作得很好，再次感谢您.. 如果碰巧找到对此解决方案更专业的改进，请更新您的答案，

【参考方案1】：

我完全理解你的问题，我准备向你展示我用来处理这个案例的方法。

因此，因为每次调用 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(data,this )".

所以您的表单将如下所示：

@using (Ajax.BeginForm("Index", new AjaxOptions
  
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnBegin = "onBegin();",
OnComplete = "onCompleated();",
OnSuccess = "onSuccess(data,this)",
OnFailure = "onFailure()"
 ))

希望这是你需要的。

【讨论】：

谢谢你，我很高兴尝试这个答案。先生，祝您有美好的一天！