How Do I Save Record Of A Bootstrap Modal Popup In Mvc 5

See more:

C#

Javascript

bootstrap

MVC5

, +

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