AjaxForms：有些人不工作 [英] AjaxForms: Some working some not
本文介绍了AjaxForms：有些人不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
@model DatePicker.Models.ViewModels.Appointment.CreateAppointmentSelectPersons
@ {
ViewBag.Title =创建;
Layout =〜/ Views / Shared / _Layout.cshtml;
< link href =〜/ Content / themes / base / minified / jquery-ui.min.css =stylesheet/>
主表单@ @
@using（Ajax.BeginForm（Create，Appointment，new AjaxOptions {HttpMethod =POST}））
{
@ Html.AntiForgeryToken（）
< h4>第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输入组>
@ Html.TextBoxFor（m => m.SelectedManualEmail.Email，new {id =Email，@ class =form-control，PlaceHolder =Email}）
< input type ='submit'id =btnEmailclass =btn btn-defaultvalue =Add>> />
< / div>
< / div>
$ b if（Model.IsSuperOfficeConnected）
{
@ * Child Form 2 * @
using（Ajax.BeginForm（新增AjaxOptions {HttpMethod =POST，OnSuccess =doneManualEmail}））
{
@ Html.HiddenFor（m => m.SelectedSuperOfficeEmail.FirstName，new {
@ 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输入组>
@ Html.TextBoxFor（m => m.SelectedSuperOfficeEmail.Email，new {id =SelectedSuperOfficeEmail，@class =form-control，PlaceHolder =在SuperOffice中搜索}）
< input type ='submit'id =btnSuperOfficeclass =btn btn-defaultvalue =Add>> />
< / div>
< / div>
$ b 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输入组>
@ Html.TextBoxFor（m => m.SelectedAddressBookPerson.Email，new {id =SelectedAddressBookPerson，@ class =form-control，PlaceHolder =Search Address Address ...}）
< input type ='submit'id =btnAddressBookclass =btn btn-defaultvalue =Add>>>
< / div>
< / div>
}
}
< div class =form-group>
< div class =col-md-offset-2 col-md-10>
< input type =submitclass =btn btn-defaultvalue =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.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>
$（函数（）{
$（＃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）;
}
}）;
$ b $（＃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）;
}，
}）;
}）;
函数doneManualEmail（）{
$（＃Email）。val（''）;
}
function doneSuperOffice（）{
$（＃SelectedSuperOfficeEmail）。val（''）;
}
函数doneInternalAddressBook（）{
$（＃SelectedAddressBookPerson）。val（''）;
}
< / script>
}
和控制器：
[HttpPost]
public void AddAttendeeSuperOffice（CreateAppointmentSelectPersons superOfficePerson）
{
_attendeeRepository.AddSuperOfficeAttende（superOfficePerson.SelectedSuperOfficeEmail.AppointmentId，
superOfficePerson .SelectedSuperOfficeEmail.FirstName，
superOfficePerson.SelectedSuperOfficeEmail.LastName，
superOfficePerson.SelectedSuperOfficeEmail.Email，
superOfficePerson.SelectedSuperOfficeEmail.SuperOfficePersonId）;
$ b [HttpPost]
public void AddAttendeeInternalAddressBook（CreateAppointmentSelectPersons internalAddressbookPerson）
{
_attendeeRepository.AddInternalAddressBookAttendee（
internalAddressbookPerson。 SelectedAddressBookPerson.AppointmentId，
internalAddressbookPerson.SelectedAddressBookPerson.FirstName，
internalAddressbookPerson.SelectedAddressBookPerson.LastName，
internalAddressbookPerson.SelectedAddressBookPerson.Email）;
$ b [HttpPost]
public void AddAttendeeManual（CreateAppointmentSelectPersons manualEmail）
{
_attendeeRepository.AddManualAttendee（manualEmail.SelectedManualEmail.AppointmentId，
manualEmail.SelectedManualEmail.Email）;
这里， Child Form2 完美地工作，当按钮被点击并且 OnSuccess textbox变空时，它会调用我的控制器，正如我想要的那样。
Problem1 ：对于 Child Form3 ，它调用控制器，但OnSuccess不会使文本框变为空。
Problem2 ：对于 Child Form1 它根本不会调用我的控制器，我点击按钮
解决方案
对于初学者，您可能希望创建 done（） code>函数，或者通过它已完成的表单（除非每个表单在执行后都执行相同的操作）。例如
@ * 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 * @
新的AjaxOptions {... OnSuccess =done（3）...}
对于 AjaxOptions 方法，选项比 OnSuccess 多。将方法添加到 OnFailure 或 OnSuccess 中可能有意义（至少在调试时），以便您可以更深入地了解发生了什么事情。此外，请在浏览器中使用调试器，查看调用是否正在执行。
目前没有足够的信息来解决您的问题，如果您最终更新了问题，请留下评论这个答案，我会尽我最大的帮助。
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
解决方案
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.
这篇关于AjaxForms：有些人不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
