想要在 ASP.NET MVC 应用程序的编辑表单中显示带有更改的模态弹出窗口

Question

我想要一个Modal 来显示在 ASP.NET MVC 应用程序中对 Edit form 所做的所有更改。如果用户未进行任何更改，则不应出现Modal。

我已经编写了显示更改的 JavaScript 代码，但我认为这不是正确的方法。

我有一个模态框，点击Submit 按钮即可打开。

我的 JavaScript 代码是：

<script type="text/javascript">
    var FirstName = "@Html.Raw(ViewBag.FName)";
    var LastName = "@Html.Raw(ViewBag.LName)";
    var NameAddress = "@Html.Raw(ViewBag.NameAddress)";
    $(document).ready(function () {
        $("#btnSubmit").click(function () {
            if ($("#FName").val() == FirstName  && ("#LName").val() == LastName  && ("#Address").val() == NameAddress ) {

                alert("There is no value changed in textbox");
            }
            else {
              alert("First Name changed from:" + FirstName + " to " + $("#FName").val());          
            } 

        });

    });
</script>

显示变化的模式：

<input type="submit" id="btnSubmit" value="Save" class="btn btn-primary" data-toggle="modal" data-target="#ListofChanges" />

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

               <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">

                    <ul>
                        <li>
                            "@Html.Raw(ViewBag.FName)"
                        </li>
                        <li>
                            "@Html.Raw(ViewBag.LName)"
                        </li>
                        <li>
                            "@Html.Raw(ViewBag.NameAddress)"
                        </li>
                    </ul>

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

        </div>
    </div>

请指导我。我陷入了困境。谢谢。

Answer 1

你必须使用模态方法来打开它：

<script type="text/javascript">
    var FirstName = "@Html.Raw(ViewBag.FName)";
    var LastName = "@Html.Raw(ViewBag.LName)";
    var NameAddress = "@Html.Raw(ViewBag.NameAddress)";
    $(document).ready(function () {
        $("#btnSubmit").click(function () {
            if ($("#FName").val() == FirstName  && ("#LName").val() == LastName  && ("#Address").val() == NameAddress ) {

                alert("There is no value changed in textbox");
            }
            else {
              $('#ListofChanges').modal('show')  // <-- HERE     
            } 

        });

    });
</script>

Docs here to Modal methods