Question

在我看来，我有一个表单，在这些表单里面我有三个其他表单，提交子表单，我希望它在控制器中转发一些方法，只执行一些数据库操作，但后来我想保持相同执行数据库操作后的页面。

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

这就是我在控制器中所做的事情

[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，但我不想再次加载整个页面，这使得再次加载整个页面变得缓慢。

我想过使用部分视图，但部分视图并没有真正帮助我实现我的目标。

有没有什么可以保持在同一页面并在提交子表单时进行无效调用，以便我保持在同一页面上。也许，只是让子窗体的文本框为空？

Answer 1

最好使用Ajax将子表单提交给控制器。

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

 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
  });

});

Answer 2

您可以使用@Ajax.BeginForm并添加一个javascript回调，该回调会在控制器的操作（数据库调用）完成后触发。

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

@using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", OnSuccess = "done" }))
{
    @* form *@
}

<script type="text/javascript">
  function done(){
    // The database call is complete.
  }
</script>

MVC：在按钮上单击执行一些数据库操作并保持相同的视图

2 个答案: