Question

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

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

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

这里的问题是我很难对标签和样式进行编码，所以如果我想对按钮样式或标签进行更改，我将不得不在多个视图中进行更改。这样做很麻烦，因为我必须追踪每个按钮。

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

我考虑了两个选项，我试图在下面的半真实世界代码中草拟出来。

我的问题是，我在这里走在正确的轨道上吗？哪个选项更好，原因是什么？我已经可以考虑使用某种东西了，还是有其他方法我还没有想过？

感谢您的帮助。

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"))

部分视图模板

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

视图模型

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

部分视图

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

我创建了这些类型的模板并将它们放在我的Views/Shared文件夹中。

我有以下模板：

AddButton.cshtml
DeleteButton.cshtml
SaveButton.cshtml

...

然后，当我需要在View中调用其中一个时，我就这样称呼它：

@Html.Partial("SaveButton");

使用T4MVC，编译时间检查会更好（不再是文字字符串）：

@Html.Partial(MVC.Shared.Views.SaveButton)

这样做我有一个共同/中心位置来更改特定的按钮配置。无需在视图之后查看更改内容。

Answer 2

另一种选择是从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包含在所有页面中，并在您的视图中使用它（razor语法）：

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

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

Answer 3

这是css旨在处理的问题。我不明白这个问题。如果要进行更改，则更改CSS会影响具有该样式的所有按钮。

你的部分问题是你正在使用像“蓝色”这样的风格。如果要将其更改为红色，则必须在任何地方进行更改。

相反，你应该有一个按钮类，然后你可以简单地改变按钮样式，你不必担心重新定义蓝色到红色。

中央HTML模板，以防止ASP.NET MVC中出现重复的表示代码

Web.Config模板

部分视图模板

3 个答案: