2

私のアプリケーションには、同じコードを何度も繰り返すUI要素（特にボタン）がたくさんあります。

たとえば、複数のビューで、次のコードで作成された編集ボタンがある場合があります。

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

ここでの問題は、ラベルとスタイルをハードコーディングしていることです。そのため、ボタンのスタイルまたはラベルを変更する場合は、複数のビューで変更する必要があります。すべてのボタンを追跡する必要があるため、これを行うのは面倒です。

そこで今、私はテンプレートメカニズムを作成することを検討しています。このメカニズムでは、中央の領域にボタンテンプレートを定義し、それを使用したい任意のビューに取り込むことができます。

以下の半現実世界のコードでスケッチしようとした2つのオプションを検討しました。

私の質問は、私はここで正しい軌道に乗っているのかということです。どのオプションがより良いで、どのような理由で？使用を検討できるものはすでにありますか、それとも私が考えていなかった別の方法がありますか？

ご協力いただきありがとうございます。

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

部分ビューテンプレート

必要なテンプレートを使用して、強く型付けされた部分ビューを作成します。

ViewModel

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

...

次に、それらの1つを何でも呼び出す必要がある場合は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 に答える