jQuery를 사용한 ASP.NET MVC RC의 모달 형태

Question

나는 Ajax / JQuery를 처음 접했으며 다음을 포함하는 간단한 샘플을 찾는 데 어려움이있었습니다.

• ASP.NET MVC RC1 (또는 2)
• jQuery
• 모달 형태

사용자가보기 (부모)에서 링크/버튼을 클릭하고 양식이 포함 된 모달 양식이 나타날 수 있기를 바랍니다. 모달 대화 상자의 내용은 MVC보기 (자식) 여야합니다.

양식이 제출되면 모달 대화 상자가 사라지고 부모보기의 일부가 업데이트되기를 원합니다.

Answer 1

따라서 한 번에 그것에 대해 생각할 필요가 없습니다. 먼저 HTML 전면 및 페이지 중앙에서 양식을 작성하고 동작을 첨부 한 다음 모달 팬티없이 작동하도록하십시오.
양식 논리가 작동하면 jQuery에서 루프를 할 수 있습니다. 양식 및 팝업으로 시작하든 jQuery가있는 비동기식 포스트로 시작하든 관계없이 귀하에게 달려 있습니다. 나는 보통 그것을 예쁘게 만들기 전에 그것을 작동시키고 싶어서, 우리는 그 길을 갈 것입니다. 표준 < % html.beginform ... { %> 구문을 사용하여 양식을 정의하는 경우 제거하십시오. 구식 HTML로 가십시오! (html.beginform을 추가로 사용자 정의 할 수 있지만 html 만 사용하는 것이 더 쉽습니다)

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

이제 문서에서 jQuery를 연결하거나 JS를 초기화 할 때마다 jQuery를 연결할 수 있습니다.

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

당신의 행동 형식에서 아마도 게시물의 콜백이 양식을 숨기고 나머지 페이지를 업데이트하는 jQuery의 게시물을 호출 할 것입니다. API 문서

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 플러그인을 사용할 수 있습니다. 이것 아니면 당신을 위해 그것을하는 것과 비슷한 일입니다. 그런 다음 팝업을 보여주고 숨기는 이벤트를 배선하는 문제 일뿐입니다.

"Show"링크를 클릭 할 때 그 양식을 비동기로로드하려는 의도라면 조금 더 번거롭지 만 여전히 가능합니다. jQuery.load를 사용할 수 있습니다 (API 문서)) HTML을 당기고 DOM에 주입하려면 여전히 이벤트를 연결해야합니다 (위에서 설명한 바인드 ( '제출'...)와 함께 다시 이벤트를 연결해야합니다).