2

在我的应用程序中，我有很多 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"));
4

3 回答 3

2

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

我有这样的模板：

AddButton.cshtml
DeleteButton.cshtml
SaveButton.cshtml

...

然后，当我需要调用其中之一时View，我只需调用它，例如：

@Html.Partial("SaveButton");

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

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

这样做我有一个公共/中心位置来更改特定的按钮配置。无需逐个查看即可更改某些内容。

于 2012-04-09T05:08:27.213 回答
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 包含在所有页面中，并在您的视图中像这样使用它（剃刀语法）：

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

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

于 2012-04-09T05:34:27.847 回答
0

这是 css 旨在处理的问题。我无法理解这个问题。如果要进行更改，请更改 CSS，它会影响具有该样式的所有按钮。

你的部分问题是你使用像“蓝色”这样的风格。如果你想把它改成红色，你就得到处改。

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

于 2012-04-09T05:15:08.247 回答