Question

我有一个bootstrap模式弹出窗口，带有一个ajax帮助器表单，我需要在提交之前进行一些js验证。如果验证失败，我会在表单上显示一些额外的内容。如果我的验证通过，我想提交表单，并使用PartialView更新特定的div。为了进行验证，我从表单上的按钮调用js函数，并传入表单。如果我的验证通过，我会致电表格提交。

这样可行，但PartialView显示整页，而不是目标div。当我直接从表单上的提交输入提交而不是从js函数提交时，表单正常工作并更新目标div。

如何在从js函数提交时更新目标div？

参见代码：

function validateActionItem(sender) {
  var $formToSubmit = $(sender).closest('form');
  $formToSubmit.submit();
}


<div id="MyDivContainer" class="col-lg-12">
   @Html.Action("MyPartial", "MyController", new { ID = Model.ID })

<div class="modal fade" id="MyModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      @using (Ajax.BeginForm("MyAction", "MyController", 
        new { ID = Model.ID }, 
        new AjaxOptions { 
          UpdateTargetId = "MyDivContainer",
          OnSuccess = "closeModal()" 
        }, 
        new { @id = "MyForm"}))
      {
        <div class="modal-body">

        <!-- My form fields -->

        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" role="button"
            type="button" onclick="validate($(this))">
            Validate Submit
          </button>     
        </div>
      }
    </div>
  </div>
</div>

我的_Layout.cshtml包含...

＆＃13;

@Scripts.Render("~/bundles/jquery")
     
    @Scripts.Render("~/bundles/jqueryval")

    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

＆＃13;

MyAction操作返回PartialView（模型）。

任何人都可以指出我做错了什么，以及为什么我的PartialView在从javascript提交表单时显示整页，但是当我用表单上的常规输入提交替换按钮时正确更新目标div？ / p>

更新

我已经像这样重构了提交，但是由于某些原因它从未被调用过？

jQuery().ready(function () {
        $("#MyForm").submit(function (e) {

            $.ajax({
                url: "/MyController/MyAction",
                type: "POST",
                dataType: "html",
                contentType: false,
                data: $("#MyForm").serialize(),
                success: function (partialViewResult) {
                    closeModal();
                    $("#MyDivContainer").empty().append(partialViewResult);
                }

            });
        });
    });

更新2

我发现jquery脚本必须在我的cshtml中的模态弹出窗口之后，所以现在我到达输入按钮的提交事件。但是，我无法进入我的控制器操作...... ajax调用错误。

$("#MyForm").submit(function (e) {
        e.preventDefault();

        var id = $('#ID').val();
        alert("submit function called");
        alert("ID: " + id);

        $.ajax({
            url: "/MyController/MyAction",
            type: "POST",
            dataType: "html",
            data: { ID: (id)},
            error: alert("Error!")
        });
    });

我点击了＃34;错误＆＃34;警惕，并且不知道如何调试这个以找出错误。

Answer 1

我已经开始工作了。谢谢大家的帮助。这是代码：

无论出于何种原因，脚本必须放在模态弹出标记之后。

<script type="text/javascript">
    $("#MyForm").submit(function (e) {
        e.preventDefault();

        //getting fields to be checked
        
        if //checking failed validations
        {
            //doing some things if val fails
        }
        else
        {
            var id = $('#ID').val();
            
            $.ajax({
                url: "/MyController/MyAction",
                type: "POST",
                dataType: "html",
                data: {ID: id},
                success: function (partialViewResult) {
                    closeMyModal();
                    $("#MyDivContainer").empty().append(partialViewResult);
                }
            });
        }
    });
</script>

如何从javascript提交Ajax表单并更新目标div？

1 个答案: