행운을 빈다, 나는 이것을했다!
첫 번째로해야 할 일은 모달 윈도우의 방해가되지 않는 모든 일반 머리글/바닥 글없이 페이지 렌더링을 처리하는 새로운 ViewEngine입니다. 가장 간단한 방법은 모달 창에 주로 비어있는 마스터 페이지를 사용하는 것입니다. 그렇지 않으면 각 컨트롤러 메소드가 IsAjaxRequest()를 탐지하는 모든 곳에서 if() else()를 가져야하기 때문에 사용자 정의 ViewEngine에서 마스터 페이지 스위칭 로직을 방해하고 싶습니다. 나는 건조한 sahara 건조한 것을 좋아한다.
이 기술로 나는 또한 매우 우아하게 저하되는 이점이 있습니다. 자바 스크립트가없는 내 사이트 기능. 링크는 괜찮습니다, 양식 작업 제로 코드 변경 "모달 인식 사이트"에서 일반 오래된 html 양식 제출로 이동하십시오.
보기 엔진 :
public class ModalViewEngine : VirtualPathProviderViewEngine
{
public ModalViewEngine()
{
/* {0} = view name or master page name
* {1} = controller name */
MasterLocationFormats = new[] {
"~/Views/Shared/{0}.master"
};
ViewLocationFormats = new[] {
"~/Views/{1}/{0}.aspx",
"~/Views/Shared/{0}.aspx"
};
PartialViewLocationFormats = new[] {
"~/Views/{1}/{0}.ascx",
};
}
protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)
{
throw new NotImplementedException();
}
protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)
{
return new WebFormView(viewPath, masterPath);
}
public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
{
//you might have to customize this bit
if (controllerContext.HttpContext.Request.IsAjaxRequest())
return base.FindView(controllerContext, viewName, "Modal", useCache);
return base.FindView(controllerContext, viewName, "Site", useCache);
}
protected override bool FileExists(ControllerContext controllerContext, string virtualPath)
{
return base.FileExists(controllerContext, virtualPath);
}
}
그래서 내 Modal.Master 페이지가 매우 간단
은 내가 한 모든 기본 엔진을 서브 클래스 화해, 일부 MasterPage 선택 비트를 추가했다. 내가 가지고있는 것은 div 래퍼이므로 모달 윈도우 내부에 무언가가 렌더링 될 때를 알 수 있습니다. 이것은 요소가 "모달 모드"일 때만 jquery로 특정 요소를 선택해야 할 때 유용합니다.
Modal.Master는
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<div id="modalcontent"><asp:ContentPlaceHolder ID="MainContent" runat="server" /></div>
다음 단계는 양식을 작성하는 것입니다. 저는 바인딩을 쉽게 모델링하고 간단하게 유지할 수 있도록 기본 속성 name = input name을 사용합니다. 양식에 특별한 것은 없습니다. 네가 평상시처럼하는 것 같아.모델은 당신이 할 수있는 잘 정말 바인딩 게다가
HTML 출력
<div id="modalcontent">
<h2>EditFood</h2>
<div id="form">
<form method="post" action="/edit/food?Length=8">
<input id="CommonName" class="text-box single-line" type="text" value="" name="CommonName"/>
<input class="button" type="submit" value="Edit Food"/>
</form>
</div>
</div>
: 여기 내 최종 HTML이다 (나는 내 코드에서 MVC 2 EditorFor()를 사용하고 있지만 문제가되지해야합니다) 또한 Jquery.Form plugin을 사용하여 최소한의 코드로 애플리케이션에 계층 적으로 보이지 않는 아약스 기능을 추가하십시오. 이제는 내 모달 창 스크립트로 ColorBox을 선택했습니다. 왜냐하면 저는 페이스 북의 투명한 모서리를 원했기 때문에 저자가 추가 한 확장 성점을 좋아하기 때문입니다.
이제 이러한 스크립트를 결합하면 자바 스크립트에서이 기술을 매우 어리석게 쉽게 조합 할 수 있습니다. 내가 추가 한 유일한 자바 스크립트 (document.ready 내부)이었다
자바 스크립트/JQuery와 여기
$("a.edit").colorbox({ maxWidth: "800px", opacity: 0.4, initialWidth: 50, initialHeight: 50 });
$().bind('cbox_complete', function() {
$("#form form").ajaxForm(function() { $.fn.colorbox.close() });
});
내 편집 링크를 모달 창을 엽니 다 ColorBox을 말하고에게 (편집 식품) . 그런 다음 바인딩은 colorbox의 complete 이벤트로 가서 ajaxform 물건을 성공 콜백으로 연결하여 ColorBox가 모달 창을 닫도록합니다. 그게 전부 야.
이 코드는 모두 개념 증명으로 수행되었으며 뷰 엔진이 실제로 라이트이며 검증 또는 기타 표준 양식 블링이 필요하지 않습니다. ColorBox와 JQuery.Form에는 확장 성 지원이 많이 있으므로 사용자 지정이 쉽습니다.
참고 이것은 MVC 2에서 모두 수행되었지만 어쨌든이 작업이 얼마나 쉬운지를 보여주기 위해 내 컨트롤러 코드입니다. 개념 증명의 목표를 기억하는 것은 모달 창을 일부 기본 인프라를 설정하는 것 외에는 코드를 변경할 필요가없는 방식으로 작동하도록하는 것이 었음을 기억하십시오.
[UrlRoute(Path="edit/food")]
public ActionResult EditFood()
{
return View(new Food());
}
[HttpPost][UrlRoute(Path = "edit/food")]
public ActionResult EditFood(Food food)
{
return View(food);
}
와우,이 광범위한 답변에 감사드립니다. 좋은데. – mare
이 새로운 ViewEngine을 기존 뷰에 어떻게 연결합니까? 코드 조각을 찾는 데 문제가 있습니다. – mare
뷰 엔진이 배선 작업을 이해하지 못한다면 배선 작업을해야합니다. – jfar