ASP.Net MVCを使用した単一ビューでの多数のルックアップの管理

Question

管理者が管理する必要のある50のルックアップ/ドロップダウンリストを持つアプリケーションがあります。

これは良い方法であるかどうかわかりませんが、一般的な考え方は、各ルックアップに対して部分的に行うことです&ユーザーがルックアップ名（左側）をクリックすると、 。

：50個の異なるビュー

MY質問に作成作成50の異なるコントローラー

50の異なるアクション

の作成私は避けるようにしようとしています

...

• Q：どうすればいいですか？ 1つのビューからいくつかの部分的な部分がありますか？
  Q：これはこの問題の正しいアプローチですか？
  Q：これを行うより良い方法はありますか？
  

  SCREEN：
  画面は次のようになります...

  

  CONTROLLER：
  

  public class LookupsController : Controller 
  { 
      // GET: administration/lookups 
      [HttpGet] 
      [AllowAnonymous] 
      public ActionResult Index() 
      { 
       // (1) Simply return the 1st LOOKUP's PARTIAL 
  
       // How? 
       return View(); 
      } 
  
      // GET: administration/lookups/{name} 
      [HttpGet] 
      [AllowAnonymous] 
      public ActionResult Index(string name) 
      { 
       // (1) If the NAME doesnt map to a LOOKUP PARTIAL = Exception 
  
       // How?  
       return View(); 
      } 
  } 
  

  SOLUTION：
  はこれを行うには良い方法があるかもしれません...しかし、これは一般的な考え方である

  ここ

Answer 1

私は概念実証（POC）の形でやったことある...それが動作します。私は誰かがより良いアイデアを持って来る場合にこれを答えとしてマークするのを待つでしょう。私の特定のケースで

、私はレンダリング後のWeb APIを呼び出していますよう強く...検索の基礎となるエンティティにを入力するためにビューモデルを必要としません。しかし、それが人々を助ける場合には...私はPartialModelプロパティをここに何とか表示しています。

• 誰かが私は後で

CONTROLLER CSSを更新します

それを必要とする場合には、私はそのままで、これを掲示しています：

public class LookupsController : Controller 
{ 
    // GET: administration/lookups/{name} 
    [HttpGet] 
    [AllowAnonymous] 
    public ActionResult Index(string name) 
    { 
     var viewModel = new LookupsIndexViewModel(name); 

     return View("index", viewModel); 
    } 
} 

ビューモデルを：

public class LookupsIndexViewModel 
{ 
    #region <Properties> 

    private const string DEFAULT_PARTIAL_PATH = "~/Areas/Administration/Views/Lookups/Partials/ProductsPartial.cshtml"; 

    #endregion 

    #region <Properties> 

    public String PartialRelativePath { get; set; } 
    public PartialViewModel PartialModel { get; set; } 

    #endregion 

    #region <Constructors> 

    public LookupsIndexViewModel(string name) 
    { 
     Init(name); 
    } 

    #endregion 

    #region <Methods> 

    public void Init(string name) 
    { 
     PartialRelativePath = DEFAULT_PARTIAL_PATH; 

     // TODO: Use a factory here 
     if (!string.IsNullOrWhiteSpace(name)) 
      SetPartialProperties(name); 
    } 

    ///<note>You could certainly replace this functionality with a Factory object</note> 
    private void SetPartialProperties(string name) 
    { 
     string root = "~/Areas/Administration/Views/Lookups/Partials/"; 

     switch (name.ToLower()) 
     { 
      case "andsoon": 
       PartialRelativePath = root + "AndSoOnPartial.cshtml"; 
       PartialModel = new PartialViewModel(); 
       break; 

      case "areas": 
       PartialRelativePath = root + "AreasPartial.cshtml"; 
       PartialModel = new PartialViewModel(); 
       break; 

      case "locations": 
       PartialRelativePath = root + "LocationsPartial.cshtml"; 
       PartialModel = new PartialViewModel(); 
       break; 

      case "products": 
       PartialRelativePath = root + "ProductsPartial.cshtml"; 
       PartialModel = new PartialViewModel(); 
       break; 

      case "someotherthing": 
       PartialRelativePath = root + "SomeOtherThingPartial.cshtml"; 
       PartialModel = new PartialViewModel(); 
       break; 

      case "storageyards": 
       PartialRelativePath = root + "StorageYardsPartial.cshtml"; 
       PartialModel = new PartialViewModel(); 
       break; 

      case "yetanotherthing": 
       PartialRelativePath = root + "YetAnotherThingPartial.cshtml"; 
       PartialModel = new PartialViewModel(); 
       break; 
     } 
    } 

    #endregion 
} 

public class PartialViewModel 
{ 
    // Your awesome Strongly Typed View Model stuff goes here 
} 

VIEW：

@using Web.Areas.Administration.ViewModels 
@model LookupsIndexViewModel 

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <h1>Lookups Administration</h1> 
      <h2 id="subTitle"></h2> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-3"> 
      <!-- Sections Menu--> 
      <ul class="nav nav-section-menu mb-4 py-3"> 
       <li> 
        @Html.ActionLink("Areas", "index", "lookups", new { area = "Administration", name = "areas" }, null) 
       </li> 
       <li> 
        @Html.ActionLink("Locations", "index", "lookups", new { area = "Administration", name = "locations" }, null) 
       </li> 
       <li> 
        @Html.ActionLink("Products", "index", "lookups", new { area = "Administration", name = "products" }, null) 
       </li> 
       <li> 
        @Html.ActionLink("Storage Yards", "index", "lookups", new { area = "Administration", name = "storageyards" }, null) 
       </li> 
       <li> 
        @Html.ActionLink("Some Other Thing", "index", "lookups", new { area = "Administration", name = "someotherthing" }, null) 
       </li> 
       <li> 
        @Html.ActionLink("Yet Another Thing", "index", "lookups", new { area = "Administration", name = "yetanotherthing" }, null) 
       </li> 
       <li> 
        @Html.ActionLink("And So On", "index", "lookups", new { area = "Administration", name = "andsoon" }, null) 
       </li> 
      </ul> 
     </div> 
     <div class="col-md-9"> 
      @Html.Partial(Model.PartialRelativePath, Model.PartialModel) 
     </div> 
    </div> 
</div> 

@section scripts 
{ 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      onReady(); 
     }); 
    </script>  
} 

各部分：

<div id="grid"></div> 

<script type="text/javascript" defer> 

    // RESEARCH: 
    // https://stackoverflow.com/questions/7556400/injecting-content-into-specific-sections-from-a-partial-view-asp-net-mvc-3-with 

    var onReady = function() 
    { 
     $("#subTitle").text("And So On"); 

     $("#grid").kendoGrid({ 
      dataSource: { 
       type: "odata", 
       transport: { 
        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" 
       }, 
       pageSize: 20 
      }, 
      height: 550, 
      groupable: true, 
      sortable: true, 
      pageable: { 
       refresh: true, 
       pageSizes: true, 
       buttonCount: 5 
      }, 
      columns: [{ 
       template: "<div class='customer-photo'" + 
       "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" + 
       "<div class='customer-name'>#: ContactName #</div>", 
       field: "ContactName", 
       title: "Contact Name", 
       width: 240 
      }, { 
       field: "ContactTitle", 
       title: "Contact Title" 
      }, { 
       field: "CompanyName", 
       title: "Company Name" 
      }, { 
       field: "Country", 
       width: 150 
      }] 
     }); 
    } 
</script>