asp.net MVC（たくさんのビューとpartialviews）でAJAX駆動Webサイトを処理する方法？

Question

私は、ユーザーがJavaScriptを有効にしている場合は、AJAXを使用してページコンテンツをプルする新しいサイトを作成しています。

私は、すべてのアクションメソッドがリクエストがAJAX経由であったかどうかを確認する必要があるという状況にあります。これは簡単です。要求がAJAX経由であった場合は、部分ビューを返すことができます。そうでない場合は、完全なビューを返すことができます。

しかし、このパターンでは、サイトのすべてのページにViewとPartialViewを作成する必要があります。それらの間の唯一の違いは、マスターページを含めることです。

私はここにトリックがないのですが、これはビューの倍増です唯一の方法ですか？

おかげ

EDIT - もう少し情報

は私が/site/testを介してアクセスし得る可能性がページを持っていたとしましょう。私のJSのどこかで、URLにハッシュを追加したいので、#/site/testのようにします。その後、JSはハッシュ変更を監視し、必要に応じて部分ビューをロードします。 JSを利用できない場合は、ビュー全体を返す必要があります。

各ページでは、実際にページの内容を含む部分ビューをロードするRenderPartialを呼び出すビューが必要になります。したがって、すべてのページに2つのファイルがあります。これを行うためのよりクリーンな方法があるはずです。

Answer 1

セルジオ、はい、あなたはトリックを見逃しています！

静的コンテンツが静的になるようにページを整理する必要があります。この静的ページは、動的コンテンツを与える部分を呼び出します。これは、通常のようなメインページで使用されるだろう（私は今、AJAXのスタンスを採用したMicrosoftのあたりのようにjQueryを使用しています）：

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <h2>My Header</h2> 
    <%--lots of stuff omitted--%> 
    <div id="dynamicList"><%Html.RenderPartial("List"); %></div> 
    <%--also lots missed out here--%> 
    <input type="button" id="btnRefresh" value="refresh" /> 
</asp:Content> 

これは部分的には、常に最初の要求にレンダリングされることを意味しています。その後のリフレッシュは、コントローラ内の一部のメソッドを呼び出し、の線に沿って「dynmaicList」のdiv再投入します：

<script type="text/javascript"> 
    // you might have a click or similar here to invoke the partial refresh 
    $(function() { 
     //click event (or some other 'change' event) 
     $('#btnRefresh').click(function() { 
      dynamicList(); 
     }); 
    }); 

    function dynamicList() { 
     // where action/controller retruns a partialview result 
     var url = '<%= Url.Action("List", "MyController") %>'; 
     // this is merely a wrapper method around jquery $ajax 
     SendAjax(url, formParams(), beforedynamicListQuery, dynamicListResponse); 
    } 

    function beforedynamicListQuery() { 
     $("#dynamicList").fadeTo('slow', 0.5); 
    } 

    function dynamicListResponse(data) { 
     if (data.length != 0) { 
      if (data.indexOf("ERROR:") >= 0) { 
       $("#dynamicList_errmsg").html(data); 
      } 
      else { 
       var selector = "#dynamicList"; 
       $(selector).fadeTo('slow', 1, function() { 
        $(this).html(data); 
       }); 
      } 
     } 
    } 
</script> 

は、とにかく、それはそれが私の感想です！ ;）