.NET MVC form Ajax - Come ti nascondi?

Question

Ok, tutto e 'funzionale' a lavorare con quello che sto cercando di realizzare e, ancora una volta, sono sicuro che questo è qualcosa di stupido, ma io non riesco a capire come fare questo una cosa.

Ho un modulo di modifica per un'entità, diciamo una macchina. Questo 'auto' può avere 0 - molti passeggeri. Quindi, il mio modulo di modifica, ho tutti i campi per la macchina, poi una visualizzazione elenco che mostra ogni passeggero (parziale). Ho anche un pulsante 'aggiungi nuovo passeggero' che renderà una nuova visione parziale che consente di inserire un passeggero. Questo ha un annullamento di collegamento ed un pulsante Aggiungi per presentare un modulo Ajax. Quando si aggiunge un passeggero, il passeggero viene automaticamente aggiunto alla lista, ma ho bisogno del modulo di entrare passeggero di andare via. Ho provato con le funzioni onSuccess e onComplete per nascondere il div che la forma è in, ma entrambi rendono solo gli elementi parziali visualizzazione HTML (schermo bianco, testo) e non il PartialView nel contesto di tutta la pagina.

Fonti: 1) Principale Modifica Visualizza

    <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 View. Il link qui sotto annullamento è un'azione che non restituisce nulla, eliminando in tal modo le informazioni nel div.

<%  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 - capito questo, suppongo che stava diventando anche ieri sera tardi. Quindi, ecco la risposta, in realtà si è rivelato essere un paio di piccoli problemi che culmina in uno solo.

1. hideForm funzione () in javascript deve essere la funzione hideForm (), senza capitali. Troppo utilizzato per la scrittura di funzioni di regolazione suppongo.
2. Stavo usando "hideForm ()" nel l'attributo OnSuccess, non "hideForm" -. Doh
3. Probabilmente non si vuole nascondere il div come quando si fa clic sul Aggiungere nuovo link di passeggero di nuovo, il div non verrà visualizzato. Funzione hideForm Cambiato per impostare la proprietà innerHTML del div a ''.

Grazie ancora per il vostro aiuto Darin, stavo cercando di rendere più fuori di esso che si è rivelato essere.

Answer 2

Assicurati di aver fatto riferimento entrambi gli script MicrosoftAjax.js e MicrosoftMvcAjax.js nella tua pagina. La ragione per ottenere il contenuto vista parziali (schermo bianco, testo) potrebbe essere un errore di script che impedisce l'ajax di eseguire correttamente. Guardate con FireBug se ci sono alcuni errori durante l'esecuzione.

Per quanto riguarda nascondere il modulo è interessato è possibile utilizzare il callback OnSuccess:

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

verrà eseguita la funzione javascript hideForm se la chiamata AJAX ha successo e nasconde il div desiderato.