.NET MVC Ajax Form - Como você o esconde?

Question

OK, tudo está 'funcionalmente' trabalhando com o que estou tentando realizar e, mais uma vez, tenho certeza de que isso é algo burro, mas não consigo descobrir como fazer isso.

Eu tenho um formulário de edição para uma entidade, digamos um carro. Este 'carro' pode ter 0 - muitos passageiros. Então, no meu formulário de edição, tenho todos os campos para o carro, depois uma visualização da lista mostrando cada passageiro (parcial). Eu também tenho um botão 'Adicionar um novo passageiro' que renderizará uma nova visualização parcial que permite que você insira um passageiro. Isso possui um link de cancelamento e um botão Adicionar para enviar um formulário AJAX. Quando você adiciona um passageiro, o passageiro é adicionado automaticamente à lista, mas preciso que o formulário de passageiro digite desapareça. Eu tentei usar as funções Onsuccess e Oncomplete para ocultar a div em que o formulário está, mas ambos renderizam apenas os elementos parciais da visualização HTML (tela branca, texto) e não o ParcialView no contexto de toda a página.

Fontes: 1) Visualização de edição principal

    <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) Visualização AddPassenger. O link de cancelamento abaixo é uma ação que não retorna nada, removendo assim as informações na 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 - descobri isso, suponho que estava chegando tarde demais na noite passada. Então, aqui está a resposta, na verdade, acabou sendo alguns pequenos problemas culminando em um.

1. Function hideform () no JavaScript deve ser função hideformForm (), sem capitals. Muito acostumado a escrever funções do controlador, suponho.
2. Eu estava usando "hideforform ()" no atributo Onsuccess, não "hideforform" - Doh.
3. Você provavelmente não deseja ocultar a div, pois quando clicar no link Adicionar novo passageiro novamente, o div não será exibido. A função de hideform alterada para definir a propriedade InnerHTML da div para ''.

Mais uma vez, obrigado Darin por sua ajuda, eu estava tentando tirar mais do que aconteceu.

Answer 2

Verifique se você referenciou os dois MicrosoftAjax.js e MicrosoftMvcAjax.js scripts em sua página. O motivo para obter o conteúdo parcial da visualização (tela branca, texto) pode ser um erro de script que impede que o Ajax seja executado corretamente. Olhe com Firebug Se houver alguns erros durante a execução.

No que diz respeito ao esconder o formulário, você pode usar o OnSuccess ligue de volta:

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

o hideForm A função JavaScript será executada se a chamada AJAX for bem -sucedida e ocultar a div.