使用ASP.Net在單一視圖中管理多個查找MVC

Question

我有一個管理員需要管理的50個不同查找/下拉菜單的應用程序......它必須看起來像下面的初始圖像。

我不確定這是否是一種很好的方法來做到這一點...但我的一般想法是爲每個查找都有一個部分&當用戶單擊查找名稱時（左側）動態呈現正確的部分， 。

我試圖避免...

• 創建50個不同的控制器
• 創建50個不同的操作
• 創建50個不同的看法

我的問題：

問：我如何l從單個視圖中刪除不同的部分？
問：這個問題甚至正確嗎？
問：有沒有更好的方法來做到這一點？

屏幕：
屏幕會是這個樣子......

控制器：

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(); 
    } 
} 

解決方案：
可能有更好的方法來做到這一點...但這是一般的想法

Answer 1

以下是我在驗證的概念驗證（POC）的形式沒有...和它的作品。如果有人提出了一個更好的主意，我將等待將此標記爲答案。

在我的具體情況，因爲我在渲染之後調用Web API我不需要視圖模型是強類型到查找的底層實體 ...。不過，如果它可以幫助人們...我無論如何顯示PartialModel屬性。

• 我張貼這是-是萬一有人需要它
• 我將更新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 
} 

THE 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>