jquery - MVC3 Html.DisplayFor -- このコントロールに ID を生成させることは可能ですか?

Question

テキストを表示できるようにしたいだけでなく、jQuery を介してテキストを変更できるようにしたいと考えています。

<%= Html.DisplayFor(model => model.DeviceComponentName)%>

DisplayFor の代わりに EditorFor を使用すると、入力コントロールの ID が表示されます。ただし、そのように値を編集可能にしたくありません。そのため、DisplayFor にしましたが、要素の ID プロパティを生成しません。

DisplayFor を div でラップして、次のようにする必要があります。

<div id="<%= ViewData.TemplateInfo.GetFullHtmlFieldName("DeviceComponentName") %>">
    <%= Html.DisplayFor(model => model.DeviceComponentName)%>
</div>

$('#DeviceComponentName').text('newValue');

または、これを達成するためのよりクリーンな方法はありますか?

更新:ハードコードされた文字列に依存しない方法はありますか? オブジェクト自体に結び付いているので、プロパティ名が変更された場合、コンパイルエラーが発生しますか?

また、このコードを使用していますが、ID 値が表示されません。

<td class="editableValue">
    <%--Label should be editable, so it needs an ID, but only will be edited by jQuery so it can't be an EditorFor--%>
    <%= Html.DisplayFor(model => model.DeviceComponentName, new { id = "DeviceComponentName" })%>
    <button type="button" id="ComponentTreeButton" class="nestedDialogButton">...</button>
</td>

score 18 · Accepted Answer

'マジックストリング'入力を回避するために（モデルのプロパティが変更された場合）、拡張機能を使用してこれを行うことができます。また、はるかにクリーンなコードになります。

public static MvcHtmlString DisplayWithIdFor<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, string wrapperTag = "div")
{
    var id = helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression));
    return MvcHtmlString.Create(string.Format("<{0} id=\"{1}\">{2}</{0}>", wrapperTag, id, helper.DisplayFor(expression)));
}

次に、次のように使用します。

@Html.DisplayWithIdFor(x => x.Name)

生産します

<div id="Name">Bill</div>

または、スパンでラップする場合：

@Html.DisplayWithIdFor(x => x.Name, "span")

これは次のようになります：

<span id="Name">Bill</span>

非かみそり

Razor以外の構文の場合は、次のように使用します。

<%= Html.DisplayWithIdFor(x => x.Name) %>

と：

<%= Html.DisplayWithIdFor(x => x.Name, "span") %>

score 5 · Accepted Answer

あなたは使用する必要があります：

Html.DisplayFor(model => model.DeviceComponentName, new { @id = "DeviceComponentName"})

動的 ID およびその他のプロパティについては、次を使用します。

メタデータのクラス:

public class AdditionalHtml : Attribute, IMetadataAware
{
    public string Id { get; set; }

    public string Type { get; set; }

    public string CssClass { get; set; }

    public string PlaceHolder { get; set; }

    public string Style { get; set; }

    public string OnChange { get; set; }

    public int Rows { get; set; }

    public int MaxLength { get; set; }

    public bool ReadOnly { get; set; }

    public bool Disabled { get; set; }

    public Dictionary<string, object> OptionalAttributes ()
    {
        var options = new Dictionary<string, object>();

        if ( !string.IsNullOrWhiteSpace( Id ) )
            options.Add( "id", Id );

        if ( !string.IsNullOrWhiteSpace( Type ) )
            options.Add( "type", Type );

        if ( !string.IsNullOrWhiteSpace( CssClass ) )
            options.Add( "class", CssClass );

        if ( !string.IsNullOrWhiteSpace( PlaceHolder ) )
            options.Add( "placeholder", PlaceHolder );

        if ( !string.IsNullOrWhiteSpace( OnChange ) )
            options.Add( "onchange", OnChange );

        if ( !string.IsNullOrWhiteSpace( Style ) )
            options.Add( "style", Style );

        if ( Rows != 0 )
            options.Add( "rows", Rows );

        if ( MaxLength != 0 )
            options.Add( "maxlength", MaxLength );

        if ( ReadOnly )
            options.Add( "readonly", "readonly" );

        if ( Disabled )
            options.Add( "disabled", "disabled" );

        return options;
    }

メタデータプロバイダーのクラス:

public class MetadataProvider : DataAnnotationsModelMetadataProvider
{
    protected override ModelMetadata CreateMetadata ( IEnumerable<Attribute> attributes, Type containerType, Func<object> modelAccessor, Type modelType, string propertyName )
    {
        var metadata = base.CreateMetadata( attributes, containerType, modelAccessor, modelType, propertyName );

        var additionalHtmlValues = attributes.OfType<AdditionalHtml>().FirstOrDefault();

        if ( additionalHtmlValues != null )
        {
            metadata.AdditionalValues.Add( "AdditionalHtml", additionalHtmlValues );
        }

        return metadata;
    }
}

ヘルパーを追加:

public static class HtmlAttributesHelper
{
    public static string GetHtmlAttribute<T> ( this T model, Expression<Func<T, object>> expression, string attribName )
    {
        string strDefault = String.Empty;
        MemberInfo member = null;

        switch ( expression.Body.NodeType )
        {
            case ExpressionType.Lambda:
            case ExpressionType.Convert:
                {
                    var body = expression.Body as UnaryExpression;
                    if ( body == null )
                        return strDefault;
                    var operand = body.Operand as MemberExpression;
                    if ( operand == null )
                        return strDefault;
                    member = operand.Member;
                    break;
                }
            case ExpressionType.MemberAccess:
                {
                    var body = expression.Body as MemberExpression;
                    if ( body == null )
                        return strDefault;
                    member = body.Member;
                    break;
                }
            default:
                {
                    return expression.Body.ToString() + " " + expression.Body.NodeType.ToString();
                }
        }

        if ( member == null )
            return strDefault;

        var attr = member.GetCustomAttributes( typeof( AdditionalHtml ), false );
        if ( attr.Length > 0 )
        {
            return ( attr [ 0 ] as AdditionalHtml ).OptionalAttributes() [ attribName.ToLower() ].ToString();
        }

        // Return Name of Property if AdditionalHtml.Id is empty
        return attribName == "Id" ? member.Name : strDefault;
    }

    public static string GetHtmlId<T> ( this T model, Expression<Func<T, object>> expression )
    {
        return model.GetHtmlAttribute( expression, "Id" );
    }
}

Global.asax にプロバイダーを登録します。

protected void Application_Start ()
    {
        AreaRegistration.RegisterAllAreas();

        //....
        ModelMetadataProviders.Current = new MetadataProvider();
    }

モデルでは、次のように AdditionHtml を使用できます。

[AdditionalHtml( Id = "OrderNo", CssClass = ShortTextStyle, Disabled = true )]
    public string OrderNo { get; set; }

これで、js に sintax を使用できるようになりました (表示中):

$('#@Model.GetHtmlId( x => x.PropertyName)')

ビューでは、次を使用できます。

@Html.DisplayFor( x => x.FormDate )

自動的に添付される HTML 属性

score 3 · Accepted Answer

列の上に HiddenFor を追加するだけです。これにより、必要なものに使用する ID が得られます。シンプルで、ID でその値を取得するためのトリックを実行します。

<%= Html.HiddenFor(model => model.DeviceComponentName)%>
<%= Html.DisplayFor(model => model.DeviceComponentName)%>

score 2 · Accepted Answer

HtmlHelpers にはオーバーライドがあり、オブジェクトまたは辞書を渡して、生成された html タグに属性を追加できます。

@Html.DisplayFor(model => model.DeviceComponentName, new { id = "myId" })

@Html.DisplayFor(model => model.DeviceComponentName, new Dictionary<string, object>() { { "id", "myId" } })

また

@Html.DisplayFor(model => model.DeviceComponentName, new { id = ViewData.TemplateInfo.GetFullHtmlFieldName("DeviceComponentName") })

@Html.DisplayFor(model => model.DeviceComponentName, new Dictionary<string, object>() { { "id", ViewData.TemplateInfo.GetFullHtmlFieldName("DeviceComponentName" } })

アップデート：

更新されたコードを確認し、質問を読み直した後、ここに私が提案するものがあります-これはあなたの最初のアイデアに似ています.

<td class="editableValue" id="<%= ViewData.TemplateInfo.GetFullHtmlFieldName("DeviceComponentName") %>">
  <%= Html.DisplayFor(model => model.DeviceComponentName)%>
  <button type="button" id="ComponentTreeButton" class="nestedDialogButton">...</button>
</td>

jQuery を介して td 内の値を直接変更できるため、TD 内に余分な div を追加する必要はありません。以下がこれを達成するはずだと私は信じています：

$('#DeviceComponentName').html('newValue');

score 1 · Accepted Answer

Razor で Displayfor() コントロールの ID を作成できません。Displayfor() コントロールの代わりに、span のラベルのような html コントロールを使用できます。それ以外の場合は、displayfor コントロールをスパンコントロールに配置できます。これで、 span の id を作成できます。これが私たちがしなければならない方法..

例<span id="spanid">@Html.Displayfor(modelItem => item.id) </span>

score 0 · Accepted Answer

これは、htmlAttributes を追加できる naspinski ソリューションです。

    public static MvcHtmlString DisplayWithIdFor<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, object htmlAttributes, string wrapperTag = "div")
    {
        var id = helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression));

        if (htmlAttributes != null)
        {
            var tag = new TagBuilder(wrapperTag);
            tag.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes) as IDictionary<string, object>);
            tag.Attributes.Add("id", id);
            tag.SetInnerText(helper.DisplayFor(expression).ToHtmlString());

            return MvcHtmlString.Create(tag.ToString(TagRenderMode.Normal));
        }
        else
        {
            return MvcHtmlString.Create(string.Format("<{0} id=\"{1}\">{2}</{0}>", wrapperTag, id, helper.DisplayFor(expression)));
        }
    }

score 0 · Accepted Answer

私にとって最も簡単な解決策は、読み取り専用のテキストボックスを使用することでした。@Html.TextBoxFor(u => u.Visibilidade, new { disabled = "disabled" })

jquery - MVC3 Html.DisplayFor -- このコントロールに ID を生成させることは可能ですか?

7 に答える 7

Related

Reference