mvc同じページのユーザー入力に基づく動的部分表示

Question

異なるユーザータイプのログインページを作成したい。それらのすべてがuid、pwd、emailを必要とします。フォームには、ユーザータイプの既定のドロップダウンリストがあります。ユーザーの選択に基づいて、同じページにビューの後半を動的にロードする必要があります。私が従うことができる例はありますか？ありがとう。

Answer 1

幸いにも、私はこれを持っています。下のコードでは、CreateForm divはコントローラアクションから得られる動的レンダリングビューを取得します。ドロップダウンリストの選択が変更されると、AJAXコールがトリガされます。

<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server"> 
    <script type="text/javascript"> 

     var ddlContentTypes; 

     $(document).ready(function() { 
      ddlContentTypes = $("#ContentTypes"); 
      ddlContentTypes.bind("change", loadCreate); 
      loadCreate(); 
     }); 

     function loadCreate() { 
      var typeId = $("#ContentTypes option:selected").val(); 
     <% if (Request.QueryString["modal"] != null && !string.IsNullOrEmpty(Request.QueryString["modal"])) 
    {%> 
      $.get('~/' + typeId + '/Create?modal=true', function (data) { 
      <% 
    } else 
    {%> 
       $.get('~/' + typeId + '/Create', function (data) { 
<% 
    }%> 
       $("#CreateForm").html(data); 
        $("fieldset textarea").each(function() { 
         tinyMCE.execCommand('mceAddControl', false, this.id); 
        }); 
      }); 
     } 
    </script> 
</asp:Content> 
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"> 
    <h2> 
     <%=Resources.Localize.Routes_WidgetsCreate%></h2> 
    <p> 
     <% Html.RenderPartial("ContentTypeSelector"); %></p> 
    <div id="CreateForm"> 
    </div> 
</asp:Content> 

Ajax呼び出し（上記のJSでloadCreate()）にルーティングされます：私は、メインビューがなど、のような配線に

をTinyMCEの動的およびローカライズされたリソース文字列の読み込みをいくつかの他のものを残してきましたコントローラアクション特定のコンテンツタイプ用に作成します。以下はSectionコンテンツタイプのCreate()コントローラアクションのコードされています

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Administration.Master" Inherits="System.Web.Mvc.ViewPage" %> 
<!-- render user control --> 
<% Html.RenderPartial("Section-CreateEditForm"); %> 

そして、我々ので、我々はまた、必要Section-CreateEditForm.ascx制御、：

// 
    // GET: /Section/Create 
    [CanReturnModalView] 
    [Authorize(Roles = "Administrators")] 
    public ActionResult Create() 
    { 
     if (Request.IsAjaxRequest()) 
      return PartialView("Section-CreateEditForm", new SectionViewModel()); // return ascx 

     return View(new SectionViewModel()); // return plain aspx 
    } 

ここではSectionのコンテンツタイプがCreateビュー(Views/Section/Create.aspx)ありますRenderPartial()コールの一部としてレンダリングし、リクエストがAJAXの場合はコントローラのアクションから戻します。これは本質的にあなたが欲しいものですが、明らかにそれは<form>タグを含んでいなければなりませんし、POSTアクションのURL構築の形式に注意してください。

<h2> 
<%=Resources.Localize.EditingContentTitle %></h2> 
<%= Html.ValidationSummary(Resources.Localize.Validation_EditFailure) %> 
<form id="Section-CreateEditForm" action="<%=Url.Action(Url.RequestContext.RouteData.GetRequiredString("action"), Url.RequestContext.RouteData.GetRequiredString("controller")) %>" enctype="multipart/form-data" method="post"> 
<fieldset> 
    <legend> 
     <%=Resources.Localize.EditFields %></legend> 
    <div class="editor-label"> 
     <%= Html.LabelFor(model => model.Title, Resources.Localize.Section_Title)%> 
    </div> 
    <div class="editor-field"> 
     <%= Html.TextBoxFor(model => model.Title) %> 
     <%= Html.ValidationMessageFor(model => model.Title) %> 
    </div> 
    <div class="editor-label"> 
     <%=Resources.Localize.Section_Image%> 
    </div> 
    <div class="editor-field"> 
     <input type="file" name="file" id="file" /> 
    </div> 
    <p> 
     <input type="submit" value="<%=Resources.Localize.save %>" /> 
    </p> 
</fieldset> 
</form> 

HTH

Answer 2

私は個人的に供給されたデータに基づいて、これらの部分的なビューをロードするPartialViewsの使用、およびjQuery Load() functionalityになるだろう。