114

Asp.Net MVC 2.0プレビュービルドは、次のようなヘルパーを提供します

Html.EditorFor(c => c.propertyname)

プロパティ名が文字列の場合、上記のコードはtexboxをレンダリングします。

MaxLengthプロパティとSizeプロパティをテキストボックスまたは自分のcssクラスプロパティに渡したい場合はどうすればよいですか?

アプリケーションのサイズと長さの組み合わせごとに1つのテンプレートを作成する必要がありますか?もしそうなら、それはデフォルトのテンプレートを使用可能にしません。

4

20 に答える 20

92

MVC3では、次のように幅を設定できます。

@Html.TextBoxFor(c => c.PropertyName, new { style = "width: 500px;" })
于 2011-03-09T22:26:30.703 に答える
61

/ Views / Shared / EditorTemplatesフォルダーにString.ascxという名前のEditorTemplateを作成することで、これを解決しました。

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<% int size = 10;
   int maxLength = 100;
   if (ViewData["size"] != null)
   {
       size = (int)ViewData["size"];
   }
   if (ViewData["maxLength"] != null)
   {
       maxLength = (int)ViewData["maxLength"];
   }
%>
<%= Html.TextBox("", Model, new { Size=size, MaxLength=maxLength }) %>

私の見解では、私は使用します

<%= Html.EditorFor(model => model.SomeStringToBeEdited, new { size = 15, maxLength = 10 }) %>

私にとっては魅力のように機能します!

于 2010-06-11T08:08:33.410 に答える
33

@Html.EditorForのHTML属性の設定に関するこのスレッドまたは他のスレッドの回答はどれも私にはあまり役に立ちませんでした。しかし、私はで素晴らしい答えを見つけました

@Html.EditorForヘルパーのスタイリング

私は同じアプローチを使用しましたが、余分なコードをたくさん書くことなく、美しく機能しました。Html.EditorForのhtml出力のid属性が設定されていることに注意してください。ビューコード

<style type="text/css">
#dob
{
   width:6em;
}
</style>

@using (Html.BeginForm())
{
   Enter date: 
   @Html.EditorFor(m => m.DateOfBirth, null, "dob", null)
}

「ddMMMyyyy」としてデータ注釈と日付フォーマットを使用するモデルプロパティ

[Required(ErrorMessage= "Date of birth is required")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd MMM yyyy}")]
public DateTime DateOfBirth { get; set; }

余分なコードをたくさん書くことなく、魅力のように機能しました。この回答では、ASP.NET MVC 3 Razor C#を使用しています。

于 2012-02-01T17:51:29.653 に答える
25

Kiran Chandのブログ投稿を見たいと思うかもしれませんが、彼はビューモデルで次のようなカスタムメタデータを使用しています。

[HtmlProperties(Size = 5, MaxLength = 10)]
public string Title { get; set; }

これは、メタデータを利用するカスタムテンプレートと組み合わされます。私の意見ではクリーンでシンプルなアプローチですが、この一般的なユースケースがMVCに組み込まれていることを望んでいます。

于 2009-12-09T21:35:19.287 に答える
18

「additionalViewData」でそれを渡し、反対側でそれを読むことについて誰も言及しなかったことに私は驚いています。

ビュー(わかりやすくするために改行付き):

<%= Html.EditorFor(c => c.propertyname, new
    {
        htmlAttributes = new
        {
            @class = "myClass"
        }
    }
)%>

エディターテンプレート:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>

<%= Html.TextBox("", Model, ViewData["htmlAttributes"])) %>
于 2011-10-13T15:51:24.293 に答える
6

問題は、テンプレートに複数のHTML要素が含まれている可能性があるため、MVCはサイズ/クラスをどの要素に適用するかを認識しないことです。自分で定義する必要があります。

テンプレートをTextBoxViewModelという独自のクラスから派生させます。

public class TextBoxViewModel
{
  public string Value { get; set; }
  IDictionary<string, object> moreAttributes;
  public TextBoxViewModel(string value, IDictionary<string, object> moreAttributes)
  {
    // set class properties here
  }
  public string GetAttributesString()
  {
     return string.Join(" ", moreAttributes.Select(x => x.Key + "='" + x.Value + "'").ToArray()); // don't forget to encode
  }

}

テンプレートでは、これを行うことができます:

<input value="<%= Model.Value %>" <%= Model.GetAttributesString() %> />

あなたの見解では、あなたは次のことをします:

<%= Html.EditorFor(x => x.StringValue) %>
or
<%= Html.EditorFor(x => new TextBoxViewModel(x.StringValue, new IDictionary<string, object> { {'class', 'myclass'}, {'size', 15}}) %>

最初のフォームは、文字列のデフォルトテンプレートをレンダリングします。2番目のフォームは、カスタムテンプレートをレンダリングします。

代替構文は流暢なインターフェースを使用します:

public class TextBoxViewModel
{
  public string Value { get; set; }
  IDictionary<string, object> moreAttributes;
  public TextBoxViewModel(string value, IDictionary<string, object> moreAttributes)
  {
    // set class properties here
    moreAttributes = new Dictionary<string, object>();
  }

  public TextBoxViewModel Attr(string name, object value)
  {
     moreAttributes[name] = value;
     return this;
  }

}

   // and in the view
   <%= Html.EditorFor(x => new TextBoxViewModel(x.StringValue).Attr("class", "myclass").Attr("size", 15) %>

ビューでこれを行う代わりに、コントローラーでこれを行うことも、ViewModelではるかに優れていることに注意してください。

public ActionResult Action()
{
  // now you can Html.EditorFor(x => x.StringValue) and it will pick attributes
  return View(new { StringValue = new TextBoxViewModel(x.StringValue).Attr("class", "myclass").Attr("size", 15) });
}

また、基本のTemplateViewModelクラス(すべてのビューテンプレートの共通の基盤)を作成できることにも注意してください。これには、属性などの基本的なサポートが含まれます。

しかし、一般的に、MVCv2にはより良いソリューションが必要だと思います。それはまだベータ版です-それを求めに行きます;-)

于 2009-10-26T21:00:45.657 に答える
6

CSSを使うのが道だと思います。XAMLのように.NETコーディングでもっと多くのことができればいいのですが、ブラウザーではCSSが重要です。

Site.css

#account-note-input { 
  width:1000px; 
  height:100px; 
} 

.cshtml

<div class="editor-label"> 
  @Html.LabelFor(model => model.Note) 
</div> 
<div class="editor-field"> 
  @Html.EditorFor(model => model.Note, null, "account-note-input", null) 
  @Html.ValidationMessageFor(model => model.Note) 
</div>

ジョー

于 2012-07-30T03:34:20.033 に答える
6

MVC 5と同様に、属性を追加したい場合は、簡単に行うことができます

 @Html.EditorFor(m => m.Name, new { htmlAttributes = new { @required = "true", @anotherAttribute = "whatever" } })

このブログから見つけた情報

于 2015-12-22T15:07:57.097 に答える
3

プロパティの属性を定義できます。

[StringLength(100)]
public string Body { get; set; }

これはとして知られていSystem.ComponentModel.DataAnnotationsます。必要なものが見つからない場合は、ValidationAttributeいつでもカスタム属性を定義できます。

よろしく、カルロス

于 2009-10-26T16:13:58.263 に答える
3

これは最も巧妙な解決策ではないかもしれませんが、簡単です。HtmlHelper.EditorForクラスに拡張機能を記述できます。その拡張機能では、ヘルパーのViewDataにオプションを書き込むオプションパラメーターを指定できます。ここにいくつかのコードがあります:

まず、拡張メソッド:

public static MvcHtmlString EditorFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression, TemplateOptions options)
{
    return helper.EditorFor(expression, options.TemplateName, new
    {
        cssClass = options.CssClass
    });
}

次に、オプションオブジェクト:

public class TemplateOptions
{
    public string TemplateName { get; set; }
    public string CssClass { get; set; }
    // other properties for info you'd like to pass to your templates,
    // and by using an options object, you avoid method overload bloat.
}

そして最後に、String.ascxテンプレートの行を次に示します。

<%= Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = ViewData["cssClass"] ?? "" }) %>

率直に言って、これは、コードを将来にわたって維持しなければならない貧しい人々にとっては単純明快だと思います。また、テンプレートに渡したい他のさまざまな情報を簡単に拡張できます。これまでのところ、周囲のhtmlを標準化するのに役立つ一連のテンプレートで可能な限りラップしようとしているプロジェクトでうまく機能しています。http://bradwilson.typepad.com/blog/2009/ 10/aspnet-mvc-2-templates-part-5-master-page-templates.html

于 2010-04-08T20:21:11.067 に答える
3

私は自分の質問に答えるためにブログエントリを書きました

テンプレートのhtml属性サポートの追加-ASP.NetMVC2.0 Beta

于 2010-12-25T12:39:57.000 に答える
3

Html.EditorForで機能しない理由はわかりませんが、TextBoxForを試してみたところ、機能しました。

@Html.TextBoxFor(m => m.Name, new { Class = "className", Size = "40"})

...そして検証も機能します。

于 2011-08-18T10:55:57.753 に答える
2

質問はTextBoxForではなくEditorForに対するものであるため、WEFXの提案は機能しません。

個々の入力ボックスを変更するために、EditorForメソッドの出力を処理できます。

<%: new HtmlString(Html.EditorFor(m=>m.propertyname).ToString().Replace("class=\"text-box single-line\"", "class=\"text-box single-line my500pxWideClass\"")) %>

MVCがEditorForテキストボックスのクラスを.text-boxで設定することが判明したため、すべてのEditorForsを変更することもできます。したがって、スタイルシートまたはページでこのスタイルをオーバーライドできます。

.text-box {
    width: 80em;
}

さらに、次のスタイルを設定できます

input[type="text"] {
    width: 200px;
}
  • これは.text-boxをオーバーライドし、EditorForなどのすべての入力テキストボックスを変更します。
于 2012-04-17T23:52:47.087 に答える
2

私の練習では、HtmlHelperを1つだけ(ほとんどの場合はTextBox)含むEditorTemplatesを使用するのが最善であることがわかりました。より複雑なhtml構造のテンプレートが必要な場合は、別のHtmlHelperを作成します。

TextBoxのhtmlAttributesの代わりにViewDataオブジェクト全体を貼り付けることができると仮定します。さらに、特別な処理が必要な場合は、ViewDataの一部のプロパティのカスタマイズコードを記述できます。

@model DateTime?
@*
    1) applies class datepicker to the input;
    2) applies additionalViewData object to the attributes of the input
    3) applies property "format" to the format of the input date.
*@
@{
    if (ViewData["class"] != null) { ViewData["class"] += " datepicker"; }
    else { ViewData["class"] = " datepicker"; }
    string format = "MM/dd/yyyy";
    if (ViewData["format"] != null)
    {
        format = ViewData["format"].ToString();
        ViewData.Remove("format");
    }
}

@Html.TextBox("", (Model.HasValue ? Model.Value.ToString(format) : string.Empty), ViewData)

以下は、ビューと出力されたhtmlの構文の例です。

@Html.EditorFor(m => m.Date)
<input class="datepicker" data-val="true" data-val-required="&amp;#39;Date&amp;#39; must not be empty." id="Date" name="Date" type="text" value="01/08/2012">
@Html.EditorFor(m => m.Date, new { @class = "myClass", @format = "M/dd" })
<input class="myClass datepicker" data-val="true" data-val-required="&amp;#39;Date&amp;#39; must not be empty." id="Date" name="Date" type="text" value="1/08">
于 2012-01-08T07:57:07.133 に答える
2

また、MVC3でTextBoxの幅を設定する際に問題が発生しましたが、Clsss属性の設定はTextAreaコントロールでは機能しましたが、TextBoxForコントロールまたはEditorForコントロールでは機能しませんでした。

私はフォローしてみました&それは私のために働いた:

@ Html.TextBoxFor(model => model.Title、new {Class = "textBox"、style = "width:90%;"})

この場合も、検証は完全に機能しています。

于 2012-09-21T04:52:35.960 に答える
2

これを回避する1つの方法は、ビューモデルにデリゲートを配置して、このような特別なレンダリングの印刷を処理することです。これはページングクラスに対して行いました。モデルのパブリックプロパティを公開しFunc<int, string> RenderUrlて処理します。

したがって、カスタムビットの書き込み方法を定義します。

Model.Paging.RenderUrl = (page) => { return string.Concat(@"/foo/", page); };

Pagingクラスのビューを出力します。

@Html.DisplayFor(m => m.Paging)

...そして実際のPagingビューについて:

@model Paging
@if (Model.Pages > 1)
{
    <ul class="paging">
    @for (int page = 1; page <= Model.Pages; page++)
    {
        <li><a href="@Model.RenderUrl(page)">@page</a></li>
    }
    </ul>
}

複雑すぎる問題と見なされる可能性がありますが、私はこれらのポケットベルをどこでも使用しており、レンダリングするために同じ定型コードを見るのに耐えられませんでした。

于 2013-01-24T21:55:19.320 に答える
1

更新:うーん、モデルは値によって渡されるため、属性が保持されないため、明らかにこれは機能しません。しかし、私はこの答えをアイデアとして残します。

別の解決策は、モデルの独自の属性をチェックする独自のTextBox/etcヘルパーを追加することだと思います。

public class ViewModel
{
  [MyAddAttribute("class", "myclass")]
  public string StringValue { get; set; }
}

public class MyExtensions
{
  public static IDictionary<string, object> GetMyAttributes(object model)
  {
     // kind of prototype code...
     return model.GetType().GetCustomAttributes(typeof(MyAddAttribute)).OfType<MyAddAttribute>().ToDictionary(
          x => x.Name, x => x.Value);
  }
}

<!-- in the template -->
<%= Html.TextBox("Name", Model, MyExtensions.GetMyAttributes(Model)) %>

これは簡単ですが、便利で柔軟性がありません。

于 2009-10-26T21:43:10.120 に答える
1

これは、ここで解決策を得る最もクリーンで最もエレガントでシンプルな方法です。

素晴らしいブログ投稿であり、狂った教授のようなカスタム拡張/ヘルパーメソッドを書くのに面倒なやり過ぎはありません。

http://geekswithblogs.net/michelotti/archive/2010/02/05/mvc-2-editor-template-with-datetime.aspx

于 2011-02-17T00:20:38.957 に答える
0

/ Views / Shared/EditorTemplatesフォルダーにあるString.ascxという名前のEditorTemplateを利用する@tjeerdansの回答が本当に気に入りました。これは、この質問に対する最も簡単な答えのようです。ただし、Razor構文を使用したテンプレートが必要でした。さらに、MVC3はデフォルトとして文字列テンプレートを使用しているようです(StackOverflowの質問「文字列のmvc表示テンプレートは整数に使用されます」を参照)ので、モデルを文字列ではなくオブジェクトに設定する必要があります。私のテンプレートは今のところ機能しているようです:

@model object 

@{  int size = 10; int maxLength = 100; }

@if (ViewData["size"] != null) {
    Int32.TryParse((string)ViewData["size"], out size); 
} 

@if (ViewData["maxLength"] != null) {
    Int32.TryParse((string)ViewData["maxLength"], out maxLength); 
}

@Html.TextBox("", Model, new { Size = size, MaxLength = maxLength})
于 2012-07-18T22:13:37.140 に答える
0

解決しました!!
Razorの構文は次のとおりです。
@Html.TextAreaFor(m=>m.Address, new { style="Width:174px" })これにより、テキスト領域の幅がスタイルパラメータで定義した幅に調整されます。
ASPxの場合、構文は次のとおりです。
<%=Html.TextAreaFor(m => m.Description, new { cols = "20", rows = "15", style="Width:174px" })%>
これでうまくいきます

于 2016-08-23T09:37:37.563 に答える