.NET MVC Ajax Form - Comment pouvez-vous cacher?

Question

Ok, tout est « fonctionnel » de travailler avec ce que je tente d'accomplir et encore une fois, je suis sûr que ce soit quelque chose de stupide, mais je ne peux pas comprendre comment faire une chose.

J'ai une forme d'édition pour une entité, permet de dire une voiture. Cette « voiture » peut avoir 0 - de nombreux passagers. Donc, sur ma forme d'édition, j'ai tous les champs pour la voiture, puis une vue de liste indiquant chaque passager (partielle). J'ai aussi un bouton « ajouter de nouveaux passagers » qui produira une nouvelle vue partielle qui vous permet d'entrer un passager. Cela a un lien Annuler et un bouton Ajouter à soumettre un formulaire Ajax. Lorsque vous ajoutez un passager, le passager est automatiquement ajouté à la liste, mais je dois le formulaire de passagers entrer pour aller. Je l'ai essayé d'utiliser les fonctions onsuccess et onComplete pour cacher la div que la forme est, mais à la fois rendre seulement les éléments HTML de vue partielle (écran blanc, texte), et non le PartialView dans le contexte de la page.

Sources: 1) Voir le principal Modifier

    <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) Voir AddPassenger. L'annulation lien ci-dessous est une action qui ne retourne rien, supprimant ainsi les informations contenues dans la 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 - compris cela, je suppose qu'il était devenu trop tard hier soir. Donc, voici la réponse, il en fait avéré être quelques petits problèmes culminants en un.

1. hideForm () Fonction dans le javascript doit être fonction hideForm (), pas capitales. Trop utilisé pour l'écriture des fonctions de contrôleur, je suppose.
2. J'utilisais "hideForm ()" dans l'attribut OnSuccess, pas "hideForm" -. Doh
3. Vous ne voulez probablement pas cacher la div comme lorsque vous cliquez sur le lien Ajouter un nouveau passager à nouveau, la div ne s'affiche pas. fonction Changed hideForm pour définir la propriété innerHTML de la div ''.

Merci encore Darin pour votre aide, je tentais de faire plus hors de lui qu'il est avéré être.

Answer 2

Assurez-vous que vous avez parlé à la fois les scripts MicrosoftAjax.js et MicrosoftMvcAjax.js dans votre page. La raison pour obtenir le contenu de vue partielle (écran blanc, texte) pourrait être une erreur de script qui empêche l'ajax d'exécuter correctement. Regardez avec Firebug s'il y a des erreurs lors de l'exécution.

En ce qui cache le formulaire est concerné, vous pouvez utiliser la fonction de rappel de OnSuccess:

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

La fonction javascript hideForm sera exécuté si l'appel AJAX réussit et se cacher la div désirée.