304 votos

Cómo utilizar datos HTML-5-* atributos en ASP.NET MVC

Estoy tratando de usar HTML5 de datos de atributos en mi ASP.NET MVC 1 del proyecto. (Soy un C# y ASP.NET MVC novato.)

 <%= Html.ActionLink("« Previous", "Search",
     new { keyword = Model.Keyword, page = Model.currPage - 1},
     new { @class = "prev", data-details = "Some Details"   })%>

Los "datos de detalles" en la anterior htmlAttributes dar el siguiente error:

 CS0746: Invalid anonymous type member declarator. Anonymous type members 
  must be declared with a member assignment, simple name or member access.

Funciona cuando uso data_details, pero creo que se necesitan para comenzar con los "datos" de acuerdo con la especificación.

Mis preguntas:

  • ¿Hay alguna forma de conseguir este trabajo y el uso de HTML5 atributos de datos con Html.ActionLink o similares ayudantes Html ?
  • ¿Hay algún otro mecanismo alternativo para adjuntar datos personalizados a un elemento? Esta información es para ser posteriormente procesados por JS.

612voto

Johnny Oshika Puntos 15580

Este problema ha sido abordado en ASP.Net MVC 3. Ahora convertir automáticamente pone de relieve en html propiedades de los atributos de guiones. Tuvieron suerte en esta, como pone de relieve no son legales en atributos de html, por lo MVC con confianza puede implicar que te gustaría que un guión cuando se utiliza un carácter de subrayado.

Por ejemplo:

@Html.TextBoxFor(vm => vm.City, new { data_bind = "foo" })

harán que esta en MVC 3:

<input data-bind="foo" id="City" name="City" type="text" value="" />

Si usted todavía está utilizando una versión anterior de MVC, puede imitar lo MVC 3 está haciendo con la creación de este método estático que tomé prestada de MVC3 del código fuente:

public class Foo {
    public static RouteValueDictionary AnonymousObjectToHtmlAttributes(object htmlAttributes) {
        RouteValueDictionary result = new RouteValueDictionary();
        if (htmlAttributes != null) {
            foreach (System.ComponentModel.PropertyDescriptor property in System.ComponentModel.TypeDescriptor.GetProperties(htmlAttributes)) {
                result.Add(property.Name.Replace('_', '-'), property.GetValue(htmlAttributes));
            }
        }
        return result;
    }
}

Y, a continuación, se puede utilizar como esta:

<%: Html.TextBoxFor(vm => vm.City, Foo.AnonymousObjectToHtmlAttributes(new { data_bind = "foo" })) %>

y esto hace que los datos correctos-* atributo:

<input data-bind="foo" id="City" name="City" type="text" value="" />

109voto

Morten Mertner Puntos 5786

Actualización: MVC 3 y versiones más recientes tienen soporte incorporado para esto. Ver altamente upvoted respuesta de JohnnyO debajo para soluciones recomendadas.

Yo creo que no hay ningún ayudantes inmediatos para lograr esto, pero tengo dos ideas para probar:

// 1: pass dictionary instead of anonymous object
<%= Html.ActionLink( "back", "Search",
    new { keyword = Model.Keyword, page = Model.currPage - 1},
    new Dictionary<string,Object> { {"class","prev"}, {"data-details","yada"} } )%>

// 2: pass custom type decorated with descriptor attributes
public class CustomArgs
{
    public CustomArgs( string className, string dataDetails ) { ... }

    [DisplayName("class")]
    public string Class { get; set; }
    [DisplayName("data-details")]
    public string DataDetails { get; set; }
}

<%= Html.ActionLink( "back", "Search",
    new { keyword = Model.Keyword, page = Model.currPage - 1},
    new CustomArgs( "prev", "yada" ) )%>

Sólo ideas, no has probado.

58voto

Oliver Puntos 2004

Es más fácil que todo lo sugerido anteriormente. Atributos de datos en MVC que incluyen guiones (-) son atendidos con el uso de subrayado (_).

<%= Html.ActionLink("« Previous", "Search",
 new { keyword = Model.Keyword, page = Model.currPage - 1},
 new { @class = "prev", data_details = "Some Details"   })%>

Ver que johnnyo ya mencionado.

4voto

WestDiscGolf Puntos 3335

Puede implementar esto con una nueva función de extensión de ayuda Html que se utilizará de manera similar a la actuaciónEnlaces existente.

public static MvcHtmlString ActionLinkHtml5Data(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, object routeValues, object htmlAttributes, object htmlDataAttributes)
{
    if (string.IsNullOrEmpty(linkText))
    {
        throw new ArgumentException(string.Empty, "linkText");
    }

    var html = new RouteValueDictionary(htmlAttributes);
    var data = new RouteValueDictionary(htmlDataAttributes);

    foreach (var attributes in data)
    {
        html.Add(string.Format("data-{0}", attributes.Key), attributes.Value);
    }

    return MvcHtmlString.Create(HtmlHelper.GenerateLink(htmlHelper.ViewContext.RequestContext, htmlHelper.RouteCollection, linkText, null, actionName, controllerName, new RouteValueDictionary(routeValues), html));
}

Y se llama así...

<%: Html.ActionLinkHtml5Data("link display", "Action", "Controller", new { id = Model.Id }, new { @class="link" }, new { extra = "some extra info" })  %>

Simples :-)

editar

un poco más de una escritura hasta aquí

1voto

CMerat Puntos 2449

No puede utilizarlas clases anónimas porque - es un símbolo de la operación en C# (símbolo de resta).

Usted necesitará utilizar, como se indica en la otra respuesta, un diccionario o aún.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X