如何在Mvc 5中保存Bootstrap模态弹出窗口的记录 [英] How Do I Save Record Of A Bootstrap Modal Popup In Mvc 5

问题描述

大家好，



我在我的项目中使用MVC 5，我有链接当用户点击弹出一个引导模式窗口供用户输入新记录并保存到数据库，视图有一个显示现有记录的数据表，我已经能够处理这部分，现在我希望能够从模态弹出窗口保存用户的输入并在数据表上显示记录在没有用户刷新页面的情况下保存？



这是我的代码：

Hello everyone,

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 and save to a database, the view has a datatable which displays existing records, i have been able to handle this part, now i want to be able to save user's input from the modal popup window and show the record on the datatable upon save without user refreshing the page?

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;removed50px;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×
        </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>

任何链接或帮助都会有很长的路要走。在此先感谢

Any link or assistance will go a long way. Thanks in advance

推荐答案

非常简单。从此按钮调用方法单击evenet.Say'Onclick =SaveToDB（）'。在SaveToDB（）方法中进行ajax调用。

Very Simple. Call a method from this button click evenet.Say 'Onclick="SaveToDB()"'. Make an ajax call inside SaveToDB() method.

<button type="button" class="btn btn-blue">
               Save changes
           </button>

见下面的链接。如果您需要进一步帮助，请告诉我们。





[此链接]

这篇关于如何在Mvc 5中保存Bootstrap模态弹出窗口的记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！