asp.net - 用于防止 ASP.NET MVC 中重复表示代码的中央 HTML 模板

Question

在我的应用程序中，我有很多 UI 元素(特别是按钮)，我一遍又一遍地重复相同的代码。

例如，在多个 View 中，我可能有一个使用以下代码创建的编辑按钮:

@Html.ActionLink("Edit", "Edit", "SomeController", null, new { @class="button large blue" });

这里的问题是我对标签和样式进行了硬编码，因此如果我想更改按钮样式或标签，我必须在多个 View 中进行更改。这样做会很乏味，因为我必须找到每个按钮。

所以现在我正在考虑创建一个模板机制，我可以在中心区域定义一个按钮模板并将其引入我想在其中使用它的任何 View 。

我已经考虑了两个选项，我试图在下面的半真实世界代码中勾勒出它们。

我的问题是，我走在正确的轨道上吗？哪个选项更好，原因是什么？是否已经有一些我可以考虑使用的东西，或者是否有其他我没有想到的方法？

感谢您的帮助。

---

Web.Config 模板

创建一个可以从 web.config 文件引入模板配置的自定义类。例如:

 <ui.HtmlTemplates>
      <add templateKey="FormCancel" tag="a" class="form-button large black" />
      <add templateKey="FormSave" tag="input" type="submit" class="form-button large green" />
 </ui.HtmlTemplates>

然后可以用这样的语法调用它们(方法签名是人为设计的)

@HtmlTemplates.Build("FormCancel", Url.Action("Index", "Home"))

---

部分 View 模板

使用我想要的模板创建强类型分部 View 。

View 模型

public class UiButtonModel
{
    public string Url{ get; set; }
}

局部 View

// Assume the file is called "_Button_FormCancel"
@Model path.to.model.directoy.UiButtonModel

<a href="@Model.Url" class="form-button large black">Cancel</a>

使用

@Html.Partial("_Button_FormCancel", new UiButtonModel(){Url = Url.Action("Index", "Home"));

Answer 1

另一种选择是从 HtmlHelper 创建扩展方法，以使用代码创建预先打包的 HTML 输出:

using System.Web.Mvc;
using System.Web.Routing;

public static class MyHtmlExtensions
{
    public static string SaveButton(this HtmlHelper helper, string title = "Save", IDictionary<string, object> htmlAttributes = null)
    {           
        var builder = new TagBuilder("button");

            builder.Attributes.Add("type", "button");

        builder.AddCssClass("form-button");
        builder.AddCssClass("large");
        builder.AddCssClass("green");

        if (htmlAttributes != null) builder.MergeAttributes(htmlAttributes);

        builder.SetInnerText(helper.Encode(title));

        return builder.ToString();
    }

    public static string CancelButton(this HtmlHelper helper, string title = "Cancel", string actionName, string controllerName, RouteValueDictionary routeValues = null, IDictionary<string, object> htmlAttributes = null)
    {
            var urlHelper = new UrlHelper(helper.ViewContext.RequestContext, helper.RouteCollection);

            var builder = new TagBuilder("a");

            builder.Attributes.Add("href", urlHelper.Action(actionName, controllerName, routeValues));

        builder.AddCssClass("form-button");
        builder.AddCssClass("large");
        builder.AddCssClass("green");

        if (htmlAttributes != null) builder.MergeAttributes(htmlAttributes);

        builder.SetInnerText(helper.Encode(title));

        return builder.ToString();

    }
}

然后只需确保 MyHtmlExtensions 的命名空间直接添加到您的页面，或通过 web.config 包含在所有页面中，并在您的 View 中像这样使用它(razor 语法):

<div class="form-buttons">
@Html.CancelButton("Index", "Home")
@Html.SaveButton()
</div>

此方法特别适合跨多个解决方案创建一致的输出，因为您需要做的就是引用包含程序集并导入命名空间。