.NET MVC Formulario Ajax - ¿Cómo ocultar que?

Question

Ok, todo es 'funcionalmente' trabajar con lo que estoy tratando de lograr y, una vez más, estoy seguro de que esto es algo tonto, pero no puedo encontrar la manera de hacer esto una cosa.

Tengo un formulario de edición para una entidad, digamos un coche. Este 'coche' puede tener 0 - muchos pasajeros. Así que en mi formulario de edición, tengo todos los campos para el coche, y luego una vista de lista mostrando cada pasajero (parcial). También tengo un botón de 'añadir nuevo pasajero' que hará que una nueva vista parcial que le permite introducir un pasajero. Esto tiene un enlace de cancelar y un botón de añadir a presentar un formulario de Ajax. Cuando se agrega un pasajero, éste se añade automáticamente a la lista, pero necesito el ingreso en forma de pasajeros que se vaya. He intentado usar las funciones onSuccess y onComplete para ocultar el div que el formulario está en, pero ambos hacen sólo los elementos parciales vista HTML (pantalla blanca, texto) y no la PartialView en el contexto de toda la página.

Fuentes: 1) principal Vista de edición

    <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) Ver AddPassenger. El enlace de cancelar a continuación es una acción que vuelve nada, eliminando así la información en el 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 - cuenta de esto, supongo que se estaba haciendo demasiado tarde anoche. Así pues, aquí está la respuesta, que en realidad resultó ser un par de pequeños problemas que culminan en una sola.

1. HideForm () en el código JavaScript debe ser la función HideForm (), sin mayúsculas. Demasiado acostumbrados a escribir las funciones del controlador supongo.
2. que estaba usando "HideForm ()" en el atributo onSuccess, no "HideForm" - DOH
.
3. Es probable que no desea ocultar el div como cuando hace clic en el nuevo enlace de pasajeros complemento de nuevo, el div no se mostrará. HideForm función cambiada para establecer la propiedad innerHTML del div a ''.

Gracias de nuevo por su ayuda Darín, que estaba tratando de hacer más de ella de lo que resultó ser.

Answer 2

Asegúrese de que usted ha hecho referencia a ambos los guiones MicrosoftAjax.js y MicrosoftMvcAjax.js en su página. La razón para obtener el contenido Vista parcial (pantalla blanca, texto) podría ser un error de script que impide que el Ajax se ejecute correctamente. Mirada con FireBug si hay algunos errores durante la ejecución.

En lo que esconde la forma se refiere usted podría utilizar la devolución de llamada OnSuccess:

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

La función hideForm Javascript se ejecutará si la llamada AJAX tiene éxito y se oculta el div deseada.