Forma modal em asp.net mvc RC usando jquery

Question

Eu sou novo para ajax / jquery e tiveram dificuldade em encontrar um exemplo simples incorporando o seguinte:

• ASP.Net MVC RC1 (ou 2)
• jQuery
• formulário modal

Eu gostaria que o usuário seja capaz de clicar em um link / botão em uma View (Controladora) e têm um formulário modal aparecer que contém um formulário. o conteúdo do diálogo modal deve ser uma visão MVC (Child).

Uma vez que o formulário é enviado gostaria que o diálogo modal a desaparecer e uma parte da vista principal a ser atualizado.

Answer 1

Assim, você não precisa pensar em tudo de uma vez. Primeiro faça o seu formulário na frente html e centro na página, anexar uma ação, e fazê-lo funcionar sem Modal fanciness.
Uma vez que sua lógica forma funciona, você pode fazer um loop em jQuery. Se você quer começar com modalidade e o pop-up ou com o Post Asynchronous com jQuery é até você. Eu normalmente gosto de fazê-lo funcionar antes de eu fazer isso muito, por isso vamos tomar esse caminho. Se você usar o padrão <% Html.BeginForm ... {%> sintaxe para definir sua forma, removê-lo. Ir html velha escola! (Eu sei que você pode personalizar ainda mais o Html.BeginForm mas é mais fácil de usar apenas html)

<form action="<%= Url.ActionLink(...)%>" id="SomeForm">

Agora você pode conectar-se jQuery em sua document.ready, ou onde quer que iniciar o JS.

$('#SomeForm').bind('submit', youractionfunction);

Em seu formulário de ação que você provavelmente vai estar chamando o post de jQuery, onde o retorno do pós esconde a sua forma e atualiza o resto da página. Api Documentação

function youractionfunction(e){
  $.post($(e).attr('action'), // we get the action attribute (url) from the form
         { title : $('#titleBox').val()}, // the values we're passing
         yourCallbackFunction); 
  return false;  // This is important, this will stop the event from bubbling and your form from submitting twice.
}

Agora você tem uma forma ajaxy, para que possa trabalhar no retorno de chamada.

function yourCallbackFunction(data)
{
    // do something with the result.
}

Agora podemos falar sobre modalidade. É tipicamente um pouco de dor, mas você pode usar um plugin jQuery como este ou algo semelhante ao fazê-lo para você. Então é só uma questão de fiação até eventos para mostrar e ocultar o pop-up e está tudo pronto.

Se sua intenção era ter aquela forma carregada de forma assíncrona quando o link "show" é clicado, isso é um pouco mais problemático, mas ainda factível. Você pode usar jQuery.Load ( Api Documentação ) para puxar o html e injetá-lo em o dom, mas você ainda vai ter que conectar-se os eventos (mais uma vez, com o bind ( 'enviar' ...) descrito acima).