Want to display Modal pop up with changes in the Edit form in ASP.NET MVC application

I want a Modal to display all the changes made in the Edit form in ASP.NET MVC application. If user has not made any changes then Modal should not appear.

I have written JavaScript code which shows the changes but I do not think that this is the proper way to do this.

I have a Modal which opens on click of Submit button.

My JavaScript Code is:

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

Modal to display the changes:

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

Please guide me. I got stuck in this. Thank you.

1 answer

  • answered 2017-11-15 05:07 Mario Lopez

    You have to use a modal method to open it up:

    <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