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 {提交该表单{3}}

$(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();
    });
});

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

1 个答案: