问题
This is how my view looks like currently.
@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"/>
}
@*Main Form*@
@using(Ajax.BeginForm("Create","Appointment", new AjaxOptions{HttpMethod = "POST"}))
{
@Html.AntiForgeryToken()
<h4>Step 2</h4>
<hr />
@Html.ValidationSummary()
@Html.HiddenFor(m=>m.AppointmentId)
@*Child Form1*@
using (Ajax.BeginForm("AddAttendeeManual", "Attendee", new AjaxOptions { HttpMethod = "POST", OnSuccess = "doneSuperOffice" }))
{
@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)
{
@*Child Form 2*@
using (Ajax.BeginForm("AddAttendeeSuperOffice","Attendee",new AjaxOptions{HttpMethod = "POST", OnSuccess = "doneManualEmail"}))
{
@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="btnSuperOffice" class="btn btn-default" value="Add>>" />
</div>
</div>
}
}
if (Model.IsInternalAddressBookEmpty)
{
@*Child Form3*@
using (Ajax.BeginForm("AddAttendeeInternalAddressBook", "Attendee", new AjaxOptions { HttpMethod = "POST", OnSuccess = "doneInternalAddressbook" }))
{
@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='submit' 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")
@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.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);
},
});
});
function doneManualEmail() {
$("#Email").val('');
}
function doneSuperOffice() {
$("#SelectedSuperOfficeEmail").val('');
}
function doneInternalAddressBook() {
$("#SelectedAddressBookPerson").val('');
}
</script>
}
And the 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);
}
Here, Child Form2works perfectly, it calls my controller when button is clicked and OnSuccess textbox gets empty, exactly as I wanted.
Problem1: For the Child Form3 it calls the controller but OnSuccess, doesn't make the textbox empty.
Problem2: For the Child Form1 it doesn't call my controller at all, nothing happens when i click the button
回答1:
For starters, you may want to either create a done() function for each of those forms, or pass it which form has completed (unless every form, after it's been executed, does the same thing). e.g.
@* Child Form 1 *@
new AjaxOptions { ... OnSuccess = "form1Done()" ... }
@* Child Form 2 *@
new AjaxOptions { ... OnSuccess = "form2Done()" ... }
@* Child Form 3 *@
new AjaxOptions { ... OnSuccess = "form3Done()" ... }
~OR~
@* Child Form 1 *@
new AjaxOptions { ... OnSuccess = "done(1)" ... }
@* Child Form 2 *@
new AjaxOptions { ... OnSuccess = "done(2)" ... }
@* Child Form 3 *@
new AjaxOptions { ... OnSuccess = "done(3)" ... }
Secondly, There are more options than OnSuccess for the AjaxOptions method. It may make sense (at least while debugging) to add methods to OnFailure or OnSuccess so you can get more insight as to what's happening. Also, make use of the debugger within your browser and see if the calls are being executed.
For now, there's not enough information to solve your issue, but hopefully you'll either end up solving it by using the above, or get more information to update the question with.
If you do end up updating the question, please leave a comment on this answer and I'll do my best to help.
来源：https://stackoverflow.com/questions/21572235/ajaxforms-some-working-some-not