JavaScript UI ダイアログでの単純な ASP.NET MVC CRUD ビューの開閉

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

質問

CRUD 操作用のさまざまな単純な ASP.NET MVC ビューがあり、これらは単純な Web ページとして単独で正常に動作します。次に、それらを Web サイト自体 (コンテンツ) に統合し、たとえば、選択したライトボックス クローンでビューを起動する「新しい投稿を作成」のようなリンクを用意します (カラーボックスかシックボックスかはまだわかりませんが、それは関係ありません）。

私が達成したいのは、ビュー自体がJavaScript UIダイアログで開かれたことを何らかの形で検出し、フォームアクション（最も一般的には単純な送信ボタンを使用したPOST）が、実行後にUIダイアログを閉じるロジックでレンダリングされるようにすることです。アクションが実行されました。

現在のビューの動作方法は、POST/リダイレクト/GET です。ビューは、Web ブラウザーで URL を通じて直接開かれた場合には引き続きこの単純なパターンをサポートする必要がありますが、JavaScript ダイアログを通じて開かれた場合には追加のロジックをレンダリングする必要があります。

私の質問を理解していただければ幸いです。助けていただければ幸いです

役に立ちましたか？

解決

幸運です、私はこれをやりました！

したがって、最初に必要なのは、モーダル ウィンドウの邪魔になる通常のヘッダー/フッターをすべて使用せずにページのレンダリングを処理する新しい ViewEngine です。これを行う最も簡単な方法は、モーダル ウィンドウにほとんど空のマスター ページを使用することです。マスター ページ切り替えロジックを邪魔にならないカスタム ViewEngine に配置する必要があります。そうしないと、各コントローラー メソッドで IsAjaxRequest() を検出するために if() else() が必要になるからです。私はドライ、サハラドライが好きです。

このテクニックを使用すると、非常に丁寧に劣化するという利点もあります。私のサイトはJavaScriptなしでも完璧に機能します。リンクは問題なく、フォームも機能し、 コード変更ゼロ 「モーダル対応サイト」から単純な古い 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 ページは非常にシンプルです。私が持っているのは div ラッパーだけなので、モーダルウィンドウ内で何かがレンダリングされるときを知ることができます。これは、要素が「モーダル モード」の場合にのみ 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 機能をアプリケーションに組み込むことができます。今私が選んだのは カラーボックス 純粋に Facebook 風の透明なコーナーが欲しかったのと、作者が追加した拡張ポイントが気に入ったので、モーダル ウィンドウ スクリプトとして使用しました。

これらのスクリプトを組み合わせると、この非常に愚かな手法を 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() });
    });

ここでは、編集リンク ( Edit Food ) 用のモーダル ウィンドウを開くように 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);
    }

他のヒント

jQueryのにGET AJAXを行うためのURLを構築するとき、あなたは、このような＆javascriptWindow = idとクエリ文字列パラメータを追加することができ、これは、コントローラで検出されたときに

は、ダイアログを閉じるには、フォームに必要なロジックを追加することができます実行後ます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top