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

i am using MVC 5 in my project, i have link of which when a user clicks, pops up a bootstrap modal window for user to enter new record, the view has a datatable which displays existing records, i have been able to handle this part, now i want to be able to insert user's input from the modal pop up and show the record on the datatable without user refreshing the page?

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

here is my code:

这是我的代码:

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

i will appreciate your assistance.

我将非常感谢您的帮助。

2 个解决方案

#1

refer below sample code :

参考下面的示例代码:

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

#2

I edit code for you copy this code This is your head

我编辑代码为你复制这段代码这是你的头脑

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

and this is your body

这是你的身体

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