.NET MVC Ajax Form - Wie blenden Sie es?

Question

Ok, alles ist ‚funktionell‘ arbeitete mit dem, was ich versuche, wieder zu erreichen und einmal, ich bin sicher, dass dies etwas dumm ist, aber ich kann nicht herausfinden, wie diese eine Sache zu tun.

I bearbeitet Formular für eine Entität haben, können ein Auto sagen. Das ‚Auto‘ kann haben 0 - viele Passagiere. Also auf meiner bearbeiten Form, ich habe alle Felder für das Auto, dann eine Listenansicht jeden Passagier zeigt (teilweise). Ich habe auch eine "neuen hinzufügen Passagier Taste, die eine neue Teilansicht machen wird, dass Sie einen Passagier eingeben. Dies hat ein Abbrechen Link und eine Add-Taste ein Ajax-Formular einzureichen. Wenn Sie ein Passagier hinzufügen, wird der Passagier auf der Liste automatisch hinzugefügt, aber ich muss der Passagier Formular ein, um wegzugehen. Ich habe versucht, die onSuccess und onComplete Funktionen mit dem div zu verbergen, dass die Form in ist, aber beide mache nur die Teilansicht HTML-Elemente (weißer Bildschirm, Text) und nicht die PartialView im Kontext der gesamten Seite.

Quellen: 1) Haupt Ansicht bearbeiten

    <script type="text/javascript">
    Function hideForm(){
        document.getElementById('newPassenger').style.display = 'none';
    }

</script>
<h2>Edit</h2>

<%-- The following line works around an ASP.NET compiler warning --%>
<%= ""%>

<%Html.RenderPartial("EditCar", Model)%>
<h2>Passengers for this car</h2>
<%=Ajax.ActionLink("Add New Passenger", "AddPassenger", New With {.ID = Model.carID}, New AjaxOptions With {.UpdateTargetId = "newPassenger", .InsertionMode = InsertionMode.Replace})%>
<div id="newPassenger"></div>
<div id="passengerList">
    <%Html.RenderPartial("passengerList", Model.Passengers)%>
</div>
<div>
    <%= Html.ActionLink("Back to List", "Index") %>
</div>

2) AddPassenger Ansicht. Das Abbrechen Link unten ist eine Aktion, die nichts zurückgibt, so dass die Informationen in der div zu entfernen.

<%  Using Ajax.BeginForm("AddPassengerToCar", New With {.id = ViewData("carID")}, New AjaxOptions With {.OnSuccess = "hideForm()", .UpdateTargetId = "passengerList", .InsertionMode = InsertionMode.Replace})%>   
    <%=Html.DropDownList("Passengers")%> 
    <input type="submit" value="Add" />
    <%=Ajax.ActionLink("Cancel", "CancelAddControl", _
                                            New AjaxOptions With {.UpdateTargetId = "newPassenger", .InsertionMode = InsertionMode.Replace})%><% end using %>

Answer 1

Ok - dachte das aus, nehme ich es war zu spät in der Nacht zu bekommen. So, hier ist die Antwort, es tatsächlich stellte sich heraus, ein paar kleine Probleme in einem gipfelte sein.

1. Funktion hideForm () in der JavaScript-Funktion sollte hideForm (), keine Buchstaben. Zu dem Schreiben Controller-Funktionen verwendet, nehme ich an.
2. Ich war mit "hideForm ()" im OnSuccess Attribute, nicht "hideForm" - doh
.
3. Sie wollen wahrscheinlich nicht das div verstecken, wenn Sie das Add neuen Passagier Link erneut auf, das div wird nicht angezeigt. Veränderte hideForm Funktion der Innerhtml Eigenschaft des div auf ‚‘ setzen.

Nochmals vielen Dank für Ihre Unterstützung DARIN, ich habe versucht, es zu machen mehr aus als es stellte sich heraus zu sein.

Answer 2

Stellen Sie sicher, dass Sie verwiesen haben sowohl die MicrosoftAjax.js und MicrosoftMvcAjax.js Skripts in Ihre Seite ein. Der Grund für das Erhalten der Teilansicht Inhalts (weißer Bildschirm, Text) könnte ein Skriptfehler sein, die korrekt von der Ausführung des Ajax verhindert. Schauen Sie mit FireBug wenn es einige Fehler während der Ausführung sind.

Was die Form versteckt betrifft Sie den OnSuccess Rückruf verwenden:

<% Using Ajax.BeginForm("AddPassengerToCar", 
    New With { .id = ViewData("carID")}, 
    New AjaxOptions With {
        .UpdateTargetId = "passengerList", 
        .InsertionMode = InsertionMode.Replace,
        .OnSuccess = "hideForm"
}) %>

Die hideForm Javascript-Funktion ausgeführt wird, wenn der AJAX-Aufruf erfolgreich ist und die gewünschte div verbergen.