想要在 ASP.NET MVC 应用程序中触发保存按钮模式弹出窗口

Question

我有Edit 表单页面，如果用户进行任何更改，那么所有更改都会出现在Modal 弹出窗口中。为此，我使用Jquery 触发Modal。在Modal 弹出窗口中，submit button 没有被解雇。如果我将按钮放在页面中，那么它可以正常工作。我不知道我哪里出错了。任何建议和指导都会对我有用。

我的.cshtml 代码：

@model TestProject.Models.Test
@using (Html.BeginForm())
{
      <div class="form-horizontal" >

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.FName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
              @Html.EditorFor(model => model.FName, new { htmlAttributes = new { @class = "form-control",@id = "FName" } })
            </div>
        </div>

 <div class="form-group">
  <button type="button" class="btn btn-primary" id="btnSubmit" data-toggle="modal" data-target="ListofChanges">Next</button>     
        </div>
    </div>
}

我的JavaScript 里面的代码.cshtml：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    var FirstName = "@Html.Raw(ViewBag.FName)";
    $(document).ready(function () {
        $("#btnSubmit").click(function () {

   if ($("#FName").val() != FirstName)
            {
        $("#error").html("First Name changed from:" + FirstName);
          }


            $('#ListofChanges').modal("show");
        });

    });
</script>

我的Modal 弹出更改：

<div id="ListofChanges" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">PhoneBook Details changed from</h4>
            </div>
            <div class="modal-body">
                       <p id="error"></p>

            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

请指导我为什么单击后提交按钮未触发。提前谢谢你。

Answer 1

如果您想提交原始表单，当用户单击模式对话框上的提交按钮时，您应该在该按钮上连接click 事件并以编程方式提交您的表单。

在模态框内给你的提交按钮一个 Id ，你可以用它来连接点击事件。

<input type="submit" id="btn-submit" class="btn btn-primary" />

现在，在此按钮上注册 click 事件，使用 jQuery closest 方法获取其他按钮所在的表单 (btnSubmit) 并使用 jquery submit method 提交该表单。

$(function () {

    $("#btnSubmit").click(function (e) {
        e.preventDefault();
        //your existing code goes here to set the modal content
        //$("#error").html("First Name changed from Sam" );

        $('#ListofChanges').modal("show");
    });

    $("#btn-submit").click(function() {
        alert("going to submit other form");
        $("#btnSubmit").closest("form").submit();
    });
});