JavaScript UIダイアログで簡単なASP.NET MVC CRUDビューを開く/閉じる

Question

CRUD操作のためのさまざまな単純なASP.NET MVCビューが用意されています。これらは単純なWebページとして機能します。私は今それらをウェブサイト自体に（コンテンツに）統合し、選択されたライトボックスクローンのビューを起動する「新しい投稿の作成」のようなリンクを持っています（どちらがColorboxかThickboxかは分かりませんがそれは問題ではない）。

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

ビューの動作はPOST/Redirect/GETです。ビューは、WebブラウザのURLを介して直接開いたときでもこの単純なパターンをサポートするはずですが、JavaScriptダイアログで開いたときに追加のロジックを表示する必要があります。

私の質問を理解していただきたいと思います。任意のヘルプをいただきました

Answer 1

あなたの運勢は、私はこれをやった！

最初に必要なのは、モーダルウィンドウの途中に入る通常のヘッダー/フッターのすべてがないページのレンダリングを処理する新しいViewEngineです。最も簡単な方法は、モーダルウィンドウにほとんど空のマスターページを使用することです。マスターページの切り替えロジックをカスタムViewEngineの外に置いておきたい場合は、コントローラのメソッドごとにisAjaxRequest（）を検出するif（）else（）を持つ必要があるためです。私は乾いたサハラが好きです。

この手法では、非常に優雅に劣化するという利点もあります。私のサイトはjavascriptを使わずに機能します。リンクは結構です、フォーム作業、ゼロコードはから "モーダル認識サイト"から普通の古い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ページは非常に簡単です

私がしたすべては、デフォルトのエンジンをサブクラス化し、いくつかのマスターページの選択ビットを追加しました。私が持っているのはdivラッパーなので、何かがモーダルウィンドウの中にレンダリングされた時を知っています。これは、要素が「モーダルモード」のときにのみjqueryで特定の要素を選択する必要がある場合に役立ちます。

Modal.Master

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

は、次のステップは、あなたのフォームを作成することです。私はデフォルトのプロパティ名=入力名を使用しているので、簡単にバインドをモデル化し、単純化することができます。フォームに関する特別なものはありません。私はあなたが普通にやっているように見えます。

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> 

モデルが本当にきれいにすることができますバインディングのほかに：（私のコードでは、私はMVC 2を使用してEditorFor（）していますが、それは問題ではありません）ここに私の最終的なHTMLですJquery.Form pluginを使用して、シンプルで簡単なAjax機能を最小限のコードでアプリケーションに組み込むこともできます。今私はを私のモーダルウィンドウのスクリプトとして選択しました。なぜなら、私はFacebookesqueの透明なコーナーが欲しかったので、私は作者が追加した拡張ポイントが好きです。

これらのスクリプトを組み合わせると、このテクニックが本当に簡単に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の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); 
    } 

Answer 2

AJAX GETを行うためのjQueryのURLを構築する場合は、& javascriptWindow = idのようなクエリ文字列パラメータを追加することができます。実行後にダイアログを閉じます。