c# - MVC : On button click do some database action and stay on same view

Question

在我看来，目前我有一个表单，在这些表单中我有其他三个表单，子表单已提交，我希望它转发 Controller 中的一些方法，该方法只执行一些数据库操作，但我想保持不变执行数据库操作后的页面。

@using System.Web.Mvc.Html
@using System.Web.UI.WebControls
@using DatePicker.Models.ViewModels.Appointment
@model DatePicker.Models.ViewModels.Appointment.CreateAppointmentSelectPersons
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
    <link href="~/Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
}

<h2>Create</h2>
@using(Html.BeginForm("Create","Appointment", FormMethod.Post,new { @class = "form-horizontal", role = "form" }))
{
     @Html.AntiForgeryToken()
    <h4>Step 2</h4>
    <hr />
    @Html.ValidationSummary()

       @*ChildForm1*@
        using (Html.BeginForm("AddAttendeeManual", "Attendee"))
        {
             @Html.HiddenFor(m=>m.SelectedManualEmail.AppointmentId)
            <div class="form-group">
                @Html.LabelFor(m => m.SelectedManualEmail.Email, new { @class = "col-md-2 control-label" })
                <div class="col-md-8 input-group">
                    @Html.TextBoxFor(m => m.SelectedManualEmail.Email, new { id = "Email", @class = "form-control",PlaceHolder="Email"}) <input type='submit' id="btnEmail" class="btn btn-default" value="Add>>" />
                </div>
            </div>
        }


        if (Model.IsSuperOfficeConnected)
        {
           @*ChildFrom2*@
            using (Html.BeginForm("AddAttendeeSuperOffice","Attendee",FormMethod.Post))
            {
                @Html.HiddenFor(m => m.SelectedSuperOfficeEmail.FirstName, new { id = "SelectedSuperOfficeEmail_FirstName" })
                @Html.HiddenFor(m => m.SelectedSuperOfficeEmail.LastName, new { id = "SelectedSuperOfficeEmail_LastName" })
                @Html.HiddenFor(m=>m.SelectedSuperOfficeEmail.AppointmentId)
                @Html.HiddenFor(m => m.SelectedSuperOfficeEmail.SuperOfficePersonId, new { id = "SelectedSuperOfficeEmail_SuperOfficePersonId" })
                <div class="form-group">
                    @Html.LabelFor(m => m.SelectedSuperOfficeEmail.Email, new { @class = "col-md-2 control-label" })
                    <div class="col-md-8 input-group">
                        @Html.TextBoxFor(m => m.SelectedSuperOfficeEmail.Email, new { id = "SelectedSuperOfficeEmail", @class = "form-control", PlaceHolder = "Search in SuperOffice" })

                        <input type='submit' id="btnEmail" class="btn btn-default" value="Add>>" />
                    </div>
                </div>

            }
        }
        if (Model.IsInternalAddressBookEmpty) 
        {
           @*ChildForm3*@
            using (Html.BeginForm("AddAttendeeInternalAddressBook", "Attendee"))
             {
                @Html.HiddenFor(m=>m.SelectedAddressBookPerson.FirstName)
                @Html.HiddenFor(m=>m.SelectedAddressBookPerson.LastName)
                @Html.HiddenFor(m=>m.SelectedAddressBookPerson.AppointmentId)
                 <div class="form-group">
                     @Html.LabelFor(m => m.SelectedAddressBookPerson.Email, new { @class = "col-md-2 control-label" })
                     <div class="col-md-8 input-group">
                         @Html.TextBoxFor(m => m.SelectedAddressBookPerson.Email, new { id = "SelectedAddressBookPerson", @class = "form-control", PlaceHolder = "Search in AddressBook..." }) <input type='button' id="btnAddressBook" class="btn btn-default" value="Add>>">
                     </div>
                 </div>               
             }

        }


       <div class="form-group">
         <div class="col-md-offset-2 col-md-10">
             <input class="btn btn-default" value="<<Previous"/>
             <input type="submit" class="btn btn-default" value="Next>>" />
         </div>
    </div>

}
<style>
    .ui-autocomplete-loading {
        background: url('/Content/themes/base/images/ui-anim_basic_16x16.gif') no-repeat right center;
    }

</style>
@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js")

    <script type="text/javascript">    
        $(function () {

            $("#SelectedSuperOfficeEmail").
                autocomplete({
                    source: '/Appointment/SuperOfficePerson',
                    minLength: 1,
                    select: function (event, ui) {
                        $('#SelectedSuperOfficeEmail').val(ui.item.value);
                        $(@Html.IdFor(m => m.SelectedSuperOfficeEmail.FirstName)).val(ui.item.FirstName);
                        $(@Html.IdFor(m => m.SelectedSuperOfficeEmail.LastName)).val(ui.item.LastName);
                        $(@Html.IdFor(m => m.SelectedSuperOfficeEmail.SuperOfficePersonId)).val(ui.item.ExternalPersonId);
                    }
            });

            $("#SelectedAddressBookPerson").autocomplete({
                source: '/Appointment/AddressBookPerson',
                minLength: 1,
                select: function(event,ui) {
                    $(@Html.IdFor((m=>m.SelectedAddressBookPerson.FirstName))).val(ui.item.FirstName);
                    $(@Html.IdFor(m=>m.SelectedAddressBookPerson.LastName)).val(ui.item.LastName);
                },
            });

        });
    </script>
}

这是我在 Controller 中所做的

[HttpPost]
public void AddAttendeeSuperOffice(CreateAppointmentSelectPersons superOfficePerson)
{
    _attendeeRepository.AddSuperOfficeAttende(superOfficePerson.SelectedSuperOfficeEmail.AppointmentId,
        superOfficePerson.SelectedSuperOfficeEmail.FirstName,
        superOfficePerson.SelectedSuperOfficeEmail.LastName,
        superOfficePerson.SelectedSuperOfficeEmail.Email,
        superOfficePerson.SelectedSuperOfficeEmail.SuperOfficePersonId);

}

[HttpPost]
public void AddAttendeeInternalAddressBook(CreateAppointmentSelectPersons internalAddressbookPerson)
{
    _attendeeRepository.AddInternalAddressBookAttendee(
        internalAddressbookPerson.SelectedAddressBookPerson.AppointmentId,
        internalAddressbookPerson.SelectedAddressBookPerson.FirstName,
        internalAddressbookPerson.SelectedAddressBookPerson.LastName,
        internalAddressbookPerson.SelectedAddressBookPerson.Email);

}

[HttpPost]
public void AddAttendeeManual(CreateAppointmentSelectPersons manualEmail)
{
    _attendeeRepository.AddManualAttendee(manualEmail.SelectedManualEmail.AppointmentId,
        manualEmail.SelectedManualEmail.Email);

}

所以每当我的 childfrom 被提交时，数据库操作就会发生，但我会被转发到不同的链接。我可以使用 return RedirectToAction 但我不想再次加载整个页面，这使得再次加载整个页面有点慢。

我想过使用分部 View ，但分部 View 并没有真正帮助我实现我所得到的。

有没有办法只停留在同一页面上，并在子表单提交时进行无效调用，以便我停留在同一页面上。也许，只是让子表单的文本框为空？

Answer 1

最好使用 Ajax 将子表单提交给 Controller 。

假设您要提交以下子表单，

 using (Html.BeginForm("AddAttendeeInternalAddressBook", "Attendee", new{id="frm-child-address"}))

然后

$('#mybutton').click(function(){


  var postData=  $('#frm-child-address').serialize();
  $.post('/Attendee/AddAttendeeInternalAddressBook',{data:postData},function(res){
  //based on server response do whatever you require
  });

});