如何在 mvc 5 中获取引导模式弹出窗口的按钮单击事件答案

【问题标题】：How to get the button click event of a bootstrap modal popup in mvc 5如何在 mvc 5 中获取引导模式弹出窗口的按钮单击事件
【发布时间】：2015-11-16 08:51:58
【问题描述】：

我在我的项目中使用 MVC 5，我有一个链接，当用户单击时，会弹出一个引导模式窗口供用户输入新记录，视图有一个显示现有记录的数据表，我已经能够处理这部分，现在我希望能够从模态弹出窗口插入用户输入并在数据表上显示记录，而无需用户刷新页面？

这是我的代码：

<form role="form" class="form-horizontal" method="POST">
<!-- start: BOOTSTRAP EXTENDED MODALS -->

<div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;top:50px;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
        </button>
        <h4 class="modal-title">Responsive</h4>
    </div>
    <div class="modal-body">
        <div class="form-group">
            @Html.LabelFor(model => model.Surname, htmlAttributes : new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Surname, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })
            </div>
        </div>

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

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

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

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

        <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-light-grey">
                Close
            </button>
            <button type="button" class="btn btn-blue">
                Save changes
            </button>
        </div>
    </div>
</div>
<!-- ends: BOOTSTRAP EXTENDED MODALS -->
</form>

感谢您的帮助。

【问题讨论】：

如果您想更新页面中的数据而不刷新，那么您将不得不在 javascript 中使用 ajax 调用来提交/获取数据，然后更新页面。
任何链接到如何做到这一点？

标签： javascript asp.net-mvc twitter-bootstrap

【解决方案1】：

参考下面的示例代码：

     <form role="form" class="form-horizontal" id="formName" method="POST">
    <!-- start: BOOTSTRAP EXTENDED MODALS -->

    <div id="responsive" class="modal fade" tabindex="-1" data-width="760" style="display: none;top:50px;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title">Responsive</h4>
        </div>
        <div class="modal-body">
            <div class="form-group">
                @Html.LabelFor(model => model.Surname, htmlAttributes : new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Surname, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })
                </div>
            </div>

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

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

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

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

            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-light-grey">
                    Close
                </button>
                <button type="button" onclick="saveChanges()" class="btn btn-blue">
                    Save changes
                </button>
            </div>
        </div>
    </div>
    <!-- ends: BOOTSTRAP EXTENDED MODALS -->
    </form>
    <script>
    function saveChanges()
    {
    var formData = $('#formName').serialize();
    $.ajax(
        url: @Url.Action("post url")
        data: formData,
        dataType: 'json',
        type: 'POST',
        success: function(){
// write here code to add new record in datatable
        //var table = $('#example').DataTable();

    //table.row.add( {
      //      "name":       "Tiger Nixon",
        //    "position":   "System Architect",
          //  "salary":     "$3,120",
           // "start_date": "2011/04/25",
           // "office":     "Edinburgh",
           // "extn":       "5421"
        //} ).draw();
        })
    }
    </script>

【讨论】：

如何将此链接到模态弹出保存事件，也就是说，我想在单击保存按钮后立即查看数据表上的新记录，此外，我如何将文本框值分配给上面的Javascript？
您只需在弹出保存按钮上添加 onclick 事件，例如，这样您可以写ajax代码保存数据，保存数据后在datatable中添加行
参考上面修改后的答案。

【解决方案2】：

我为您编辑代码复制此代码这是你的头

    <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <title>Bootstrap-modal by jschr</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" />
  <link href="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/css/bootstrap-modal-bs3patch.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/css/bootstrap-modal.css" rel="stylesheet" />
</head>

这是你的身体

    <body>
<button class="demo btn btn-primary btn-lg" data-toggle="modal" href="#stack1">View Demo</button>
<div id="stack1" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Stack One</h4>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
    <p>One fine body…</p>
    <p>One fine body…</p>
    <input class="form-control" type="text" data-tabindex="1" />
    <input class="form-control" type="text" data-tabindex="2" />
    <button class="btn btn-default" data-toggle="modal" href="#stack2">Launch modal</button>
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
    <button type="button" class="btn btn-primary">Ok</button>
  </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/js/bootstrap-modalmanager.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.6/js/bootstrap-modal.js"></script>
</body>

【讨论】：