使用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>