간단한 ASP.NET MVC CRUD보기 JavaScript UI 대화 상자에서 열림/폐쇄

StackOverflow https://stackoverflow.com/questions/1843894

문제

CRUD 작업에 대한 다양한 간단한 ASP.NET MVC보기가있어 간단한 웹 페이지로 스스로 잘 작동합니다. 이제 웹 사이트 자체 (콘텐츠에)에 통합하고 예를 들어 "새 게시물 만들기"와 같은 링크가 선택된 Lightbox 클론에서보기를 발사 할 수 있습니다 (아직 Colorbox 또는 Thickbox를 아직 알지 못합니다. 그것은 중요하지 않습니다).

내가 달성하고 싶은 것은보기 자체가 어떻게 든 JavaScript UI 대화 상자에서 열렸다는 것을 감지하여 양식 조치 (가장 일반적으로 간단한 제출 버튼을 사용하여 게시)가 UI 대화를 닫는 논리로 렌더링됩니다. 액션이 수행되었습니다.

현재 뷰가 작동하는 방식은 Post/Reliprect/Get입니다. 보기는 웹 브라우저에서 URL을 통해 직접 열 때이 간단한 패턴을 지원해야하지만 JavaScript 대화 상자를 통해 열 때 추가 로직을 렌더링해야합니다.

바라건대 당신은 내 질문을 이해합니다. 모든 도움이 감사합니다

도움이 되었습니까?

해결책

운이 좋았어, 나는 이것을했다!

따라서 가장 먼저 필요한 것은 Modal Windows를 방해 할 일반적인 헤더/바닥 글이없는 모든 페이지 렌더링을 처리하는 새로운 ViewEngine입니다. 가장 간단한 방법은 모달 창에 대부분 빈 마스터 페이지를 사용하는 것입니다. 각 컨트롤러 메소드에는 if () else ()가 isajaxrequest ()를 감지하는 곳에 if ()가 있어야하기 때문에 마스터 페이지 전환 로직을 방해하지 않기를 원합니다. 나는 건조하고 사하라 마른 것을 좋아합니다.

이 기술을 통해 나는 또한 매우 우아하게 저하의 이점이 있습니다. 내 사이트는 JavaScript없이 기능합니다. 링크는 괜찮고 형태는 작동하며 제로 코드 변경 "Modal Aware Site"에서 평범한 오래된 HTML 양식으로 이동하려면 제출됩니다.

내가 한 모든 것은 기본 엔진을 서브 클래스하고 몇 가지 masterpage 선택 비트를 추가하는 것입니다.

보기 엔진 :

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 페이지는 매우 간단합니다. 내가 가진 것은 분할 래퍼이므로 모달 창 안에 무언가가 렌더링되는시기를 알고 있습니다. 요소가 "모달 모드"에있을 때만 jQuery가있는 특정 요소를 선택해야 할 때 도움이됩니다.

모달 마스터

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<div id="modalcontent"><asp:ContentPlaceHolder ID="MainContent" runat="server" /></div>

다음 단계는 양식을 만드는 것입니다. 기본 속성 이름 = 입력 이름을 사용하여 쉽게 바인딩하고 간단하게 유지할 수 있습니다. 양식에 특별한 것은 없습니다. 나는 당신이 정상적으로 할 것 같아요. (내 코드에서 mvc 2 및 editorfor ()를 사용하고 있지만 중요하지 않아야합니다) 여기에 최종 HTML이 있습니다.

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>

모델 바인딩 외에도 정말로 멋지게 사용할 수도 있습니다. jQuery.form 플러그인 최소한의 코드로 애플리케이션에 Ajax 기능이 보이고 쉬운 것처럼 보이도록합니다. 이제 나는 선택했다 컬러 박스 Facebookesque Transparent Corners를 원했기 때문에 Modal Window 스크립트와 저자가 추가 한 Extensibility Point가 마음에 듭니다.

이제이 스크립트를 결합 하여이 기술을 JavaScript에서 쉽게하기 쉽게 만드는 정말 멋진 조합을 얻을 수 있습니다. 내가 추가해야 할 유일한 JavaScript는 (내부 Document.Ready)입니다.

JavaScript/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에 편집 링크 (음식 편집) 용 모달 창을 열라고 알려줍니다. 그런 다음 Binding은 Colorbox의 완전한 이벤트로 이동하여 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);
    }

다른 팁

jQuery가 ajax를 얻기 위해 URL을 구축 할 때, & javaScriptWindow = id와 같은 쿼리 문자열 매개 변수를 추가 할 수 있습니다. 컨트롤러에서 감지되면 실행 후 대화 상자를 닫기 위해 필요한 논리를 추가 할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top