AjaxForms:有些人没有工作

时间:2014-02-05 08:37:36

标签: c# jquery asp.net-mvc forms

这就是我目前的观点。

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

控制器:

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

}

在这里,Child Form2效果很好,单击按钮时调用我的控制器,OnSuccess文本框变空,完全符合我的要求。

问题1 :对于调用控制器的Child Form3,但OnSuccess不会使文本框为空。

问题2 :对于Child Form1,它根本不会调用我的控制器,当我点击按钮时没有任何反应

1 个答案:

答案 0 :(得分:0)

对于初学者,您可能希望为每个表单创建一个done()函数,或者传递表单已完成的表单(除非每个表单在执行后都执行相同的操作)。 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)" ... }

其次,OnSuccess方法的选项多于AjaxOptions。将方法添加到OnFailureOnSuccess可能是有意义的(至少在调试时),这样您就可以更深入地了解正在发生的事情。另外,在浏览器中使用调试器,看看是否正在执行调用。

目前,没有足够的信息来解决您的问题,但希望您最终能够通过使用上述内容来解决问题,或者获取更多信息来更新问题。

如果您最终更新了问题,请对此答案发表评论,我会尽力提供帮助。