Модальные формы в ASP.NET MVC RC с помощью JQuery

Question

Я новичок в Ajax/JQuery и было трудно найти простой образец включающий в себя следующее:

• ASP.Net MVC RC1 (или 2)
• JQuery
• модальную форму

Я хотел бы, чтобы пользователь мог нажать на кнопку/ссылку в представлении (Parent) и имеют модальную форму появляются, который содержит форму. содержимое модального диалога должно быть представлением MVC (Child).

После отправки формы мне хотелось бы, чтобы модальный диалог исчез, а часть родительского представления будет обновлена.

Answer 1

Итак, вам не нужно думать обо всем этом сразу. Сначала сделайте свою форму в html лицевой и центральной части страницы, приложите к ней действие и получите его, чтобы он работал без модальной привязанности.
Как только ваша логика формы работает, вы можете зацикливаться на jQuery. Если вы хотите начать с модальности & всплывающее окно или с помощью Asynchronous Post с jQuery зависит от вас. Обычно мне нравится делать это, прежде чем я сделаю это красиво, поэтому мы примем этот маршрут. Если вы используете стандартный код <% Html.BeginForm ... {%>, чтобы определить форму, удалите ее. Пойдите старую школу html! (Я знаю, вы можете дополнительно настроить Html.BeginForm но проще всего использовать HTML)

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

Теперь вы можете подключить до Jquery в вашем document.ready, или где бы вы ни инициализации JS.

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

В вашей форме действий вы, вероятно, вызывая пост JQuery, где обратного вызова поста скрывает свою форму и обновляет остальной части страницы. Api Documentation

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. 
} 

Теперь у вас есть форма ajaxy, так что вы можете работать на обратный вызов.

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

Теперь мы можем поговорить о модальности. Обычно это немного боль, но вы можете использовать плагин jQuery, например или что-то подобное, чтобы сделать это за вас. Тогда это просто вопрос проводки событий, чтобы показать и скрыть всплывающее окно, и все готово.

Если ваше намерение состояло в том, чтобы эта форма была загружена асинхронно, когда нажата ссылка «показать», это немного сложнее, но все же выполнимо. Вы можете использовать jQuery.Load (Api Documentation), чтобы вытащить html и ввести его в dom, но вам все равно придется подключать события (опять же, с привязкой ('submit' ...), описанной выше).