asp.net mvc - एचटीएमएल-5 डेटा में डैश का उपयोग कैसे करें-*एएसपी.नेट एमवीसी में विशेषताएं




asp.net-mvc html5 (6)

आप इसे इस तरह इस्तेमाल कर सकते हैं:

एमवीसी में:

@Html.TextBoxFor(x=>x.Id,new{@data_val_number="10"});

एचटीएमएल में:

<input type="text" name="Id" data_val_number="10"/>

मैं अपने एएसपी.नेट एमवीसी 1 प्रोजेक्ट में एचटीएमएल 5 डेटा-एट्रिब्यूट्स का उपयोग करने की कोशिश कर रहा हूं। (मैं एक सी # और एएसपी.नेट एमवीसी नौसिखिया हूँ।)

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

उपरोक्त HTMLAttributes में "डेटा-विवरण" निम्न त्रुटि देते हैं:

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

जब मैं डेटा_डेट्स का उपयोग करता हूं तो यह काम करता है, लेकिन मुझे लगता है कि इसे स्पेस के अनुसार "डेटा-" से शुरू करने की आवश्यकता है।

मेरे सवाल:

  • क्या यह काम करने और एचटीएमएल.एक्शनलिंक या इसी तरह के एचटीएमएल हेल्पर्स के साथ एचटीएमएल 5 डेटा विशेषताओं का उपयोग करने का कोई तरीका है?
  • क्या किसी तत्व को कस्टम डेटा संलग्न करने के लिए कोई अन्य वैकल्पिक तंत्र है? जेएस द्वारा बाद में इस डेटा को संसाधित किया जाना है।

आप इसे एक नए एचटीएमएल हेल्पर एक्सटेंशन फ़ंक्शन के साथ कार्यान्वित कर सकते हैं जिसका उपयोग मौजूदा एक्शनलिंक्स के समान ही किया जाएगा।

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));
}

और आप इसे इस तरह कहते हैं ...

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

सरल :-)

संपादित करें

here एक और लिखने के लिए थोड़ा सा


एमवीसी 4 में अंडरस्कोर ("_") के साथ प्रस्तुत किया जा सकता है

उस्तरा:

@Html.ActionLink("Vote", "#", new { id = item.FileId, }, new { @class = "votes", data_fid = item.FileId, data_jid = item.JudgeID, })

प्रस्तुत एचटीएमएल

<a class="votes" data-fid="18587" data-jid="9" href="/Home/%23/18587">Vote</a>

मुझे शुद्ध "ए" टैग का उपयोग करना पसंद नहीं है, बहुत ज्यादा टाइपिंग। तो मैं समाधान के साथ आते हैं। इसे देखो में देखो

<%: Html.ActionLink(node.Name, "Show", "Browse", 
                    Dic.Route("id", node.Id), Dic.New("data-nodeId", node.Id)) %>

डिक कक्षा का कार्यान्वयन

public static class Dic
{
    public static Dictionary<string, object> New(params object[] attrs)
    {
        var res = new Dictionary<string, object>();
        for (var i = 0; i < attrs.Length; i = i + 2)
            res.Add(attrs[i].ToString(), attrs[i + 1]);
        return res;
    }

    public static RouteValueDictionary Route(params object[] attrs)
    {
        return new RouteValueDictionary(Dic.New(attrs));
    }
}

यह ऊपर सुझाए गए सब कुछ से भी आसान है। एमवीसी में डेटा विशेषताएँ जिनमें डैश (-) शामिल हैं अंडरस्कोर (_) के उपयोग के लिए कैटर किया गया है।

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

मैंने देखा जॉनीओ ने पहले ही इसका उल्लेख किया है।


अद्यतन: एमवीसी 3 और नए संस्करणों के लिए अंतर्निहित समर्थन है। अनुशंसित समाधानों के लिए नीचे जॉनीओ के अत्यधिक उल्लिखित उत्तर देखें।

मुझे नहीं लगता कि इसे प्राप्त करने के लिए कोई तत्काल सहायक हैं, लेकिन मेरे पास आपके लिए दो विचार हैं:

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

बस विचारों, इसका परीक्षण नहीं किया है।





custom-data-attribute