ASP.NET MVC：創建使用接口作爲模型的動態視圖

Question

所以我有一個接口，像這樣：

public interface ISettings 
    { 
     string Name { get; } 
    } 

和各種實現方式，例如：

public class SettingsA : ISettings 
{ 
    public string Name { get { return "Example A"; } } 

    public string CustomAttributeA1 { get; set; } 

    public string CustomAttributeA2 { get; set; } 
} 

public class SettingsB : ISettings 
{ 
    public string Name { get { return "Example B"; } } 

    public string CustomAttributeB1 { get; set; } 

    public string CustomAttributeB2 { get; set; } 
} 

現在我有問題需要創建一個動態的UI（通過ISettings作爲模型，並根據每個實現的屬性生成控件）。所以我有這樣的：

Edit.cshtml：

@model ISettings 

@Html.EditorForModel(Model) 

這是很好的產生所需要的字段，但這個問題是我不能輕易地定製它（例如：添加CSS類引導或不管我想要什麼其他CSS）..我想我可以使用基於HTML標籤的CSS選擇器..但似乎不是理想的方法。這個問題有沒有一些很好的解決方法？處理這種情況的最佳方法是什麼？

Answer 1

我找到了解決辦法早就忘了回到這裏後......我不能發表一切，我做到了，但其基本思想是將屬性添加到ISettings接口，如：

public interface ISettings 
{ 
    string Name { get; } 

    string EditorTemplatePath { get; } 
} 

然後你需要在每個類中重寫這個。例如：

public class SettingsA : ISettings 
{ 
    public string Name { get { return "Example A"; } } 

    public string EditorTemplatePath 
    { 
     get{ return "~/Views/Shared/EditorTemplates/SettingsA.cshtml"; } 
    } 

    public string CustomAttributeA1 { get; set; } 

    public string CustomAttributeA2 { get; set; } 
} 

public class SettingsB : ISettings 
{ 
    public string Name { get { return "Example B"; } } 

    public string EditorTemplatePath 
    { 
     get{ return "~/Views/Shared/EditorTemplates/SettingsB.cshtml"; } 
    } 

    public string CustomAttributeB1 { get; set; } 

    public string CustomAttributeB2 { get; set; } 
} 

當然，您需要在控制器的某處實現自己的邏輯來返回自定義HTML。對於我來說，我使用AJAX和做這樣的事情：

[Route("get-editor-ui/{type}")] 
public ActionResult GetEditorUI(string type) 
{ 
    var model = // logic to get the model from "type" argument 

    if (model == null) 
    { 
     return HttpNotFound(); 
    } 

    string content = RenderRazorPartialViewToString(model.EditorTemplatePath, model); 
    return Json(new { Content = content }, JsonRequestBehavior.AllowGet); 
} 

僅供參考，RenderRazorPartialViewToString是我的基本控制器和定義如下：

public string RenderRazorPartialViewToString(string viewName, object model) 
{ 
    ViewData.Model = model; 
    using (var sw = new StringWriter()) 
    { 
     var viewResult = System.Web.Mvc.ViewEngines.Engines.FindPartialView(ControllerContext, viewName); 
     var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw); 
     viewResult.View.Render(viewContext, sw); 
     viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View); 
     return sw.GetStringBuilder().ToString(); 
    } 
} 

Answer 2

嘗試用一些HTML助手，如：

public static class MyHtmlExtensions 
{ 
    public static string GetCssForMyDiv(this HtmlHelper htmlHelper) 
    { 
     if (htmlHelper.ViewData.Model is SettingsA) return "class-a"; 
     else if (htmlHelper.ViewData.Model is SettingsB) return "class-b"; 
     else return ""; 
    } 
} 

從來沒有這樣做之前但應該做工相當精細。

你會碰到這樣的：

<div class="class-base my-class my-div-style @Html.GetCssForMyDiv()"> 
    Check my CSS classes! 
</div> 

你可以用一下IDisposable接口，並有一些很酷的東西是：

@using(var div = Html.BeginDivWithCustomCssClassPerType()) 
{ 
    <span>Check my CSS classes!</span> 
} 

這些擴展實際上可能幫助你與你的EditorFor。您可能會保留EditorFor調用，該調用將爲ISettings呈現EditTemplate，並且您將在此處放置擴展方法以在不同的繼承情況下提供不同的行爲。

另一種方法是簡單地爲每個具體類型（繼承）設置不同的EditTemplate元素，如果它們彼此差別很大，請使用特定模板名稱調用EditorFor。