HTML-5 डेटा में डैश का उपयोग कैसे करें- * ASP.NET MVC में विशेषताएँ

Question

मैं अपने ASP.NET MVC 1 प्रोजेक्ट में HTML5 डेटा- विशेषताओं का उपयोग करने का प्रयास कर रहा हूं । (मैं एक C # और ASP.NET MVC नौसिखिया हूँ।)

 <%= 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.

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

मेरे सवाल:

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

Comments

यह पुराने उत्तर के साथ एक पुराना प्रश्न है - MVC 3 और इसके बाद के संस्करण के उपयोगकर्ताओं को यह प्रश्न देखना चाहिए stackoverflow.com/questions/2897733/…

— ED-209

Answer 1

अपडेट: MVC 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" ) )%>

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

Comments

नमस्ते। यदि आप 1 दृष्टिकोण का उपयोग करना चाहते हैं, तो बस सुनिश्चित करें कि आपका शब्दकोश प्रकार का है <String, Object>।

— ओन्ड्रेज स्टैस्टनी

जबकि यह तकनीकी रूप से काम करता है, अनुशंसित तरीका (एमवीसी 3 के साथ शुरू) हाइफ़न के स्थान पर अंडरस्कोर का उपयोग करना है (जैसा कि जॉनीओ ने बताया है)।

— कर्टिस

पूरी दुनिया को इस चुने हुए उत्तर के साथ भ्रमित करना, जब तक कि ऊपर दिए गए वास्तविक उत्तर को ध्यान में न रखा जाए !

— रुबेंस मारियाज़ो

Answer 2

इस समस्या को ASP.Net MVC 3 में संबोधित किया गया है। अब वे स्वचालित रूप से html विशेषता गुणों में अंडरस्कोर को डैश में बदल देते हैं। वे इस पर भाग्यशाली हो गए, क्योंकि HTML विशेषताओं में अंडरस्कोर कानूनी नहीं है, इसलिए MVC आत्मविश्वास से कह सकता है कि जब आप अंडरस्कोर का उपयोग करते हैं तो आप डैश चाहते हैं।

उदाहरण के लिए:

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

MVC 3 में इसे प्रस्तुत करना होगा:

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

यदि आप अभी भी MVC के पुराने संस्करण का उपयोग कर रहे हैं, तो आप MVC 3 को इस स्थिर विधि को बनाकर नकल कर सकते हैं जिसे मैंने MVC3 के स्रोत कोड से उधार लिया था:

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

और फिर आप इसे इस तरह से उपयोग कर सकते हैं:

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

और यह सही डेटा प्रस्तुत करेगा- * विशेषता:

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

Comments

यह किसी कारण से मेरे लिए काम नहीं करता है। स्रोत देखें डेटा_ * दिखाता है। MVC3 का उपयोग करना। कोई विचार?

— सिमोन हार्टचर

हाय साइमन, क्या आपने अपनी समस्या का समाधान किया? यदि नहीं, तो क्या आप अपना कोड प्रदान कर सकते हैं जिससे आपको समस्या हो रही है?

— जॉनी ओशिका

फिर भी साथ नसीब नहीं WebGrid.GetHtml(htmlAttributes: new { data_some : "thing" })। : '(

— रुबेन्स मारियाज़ो

यह निर्दिष्ट करने के लिए +1 कि अंडरस्कोर काम क्यों करेगा। यह मेरे लिए नहीं था कि HTML के लिए विशेषता नामों में अंडरस्कोर मान्य नहीं थे!

— उमर फारूक ख्वाजा

@RubensMariuzzo यह BVC नहीं है RouteValueDictionaryलेकिन MVC3 के Html.Something()तरीकों में है। यह संभव है कि WebGridउसी तरह से उन्नत नहीं किया गया है, या आप संस्करण की जांच कर सकते हैंSystem.Web.Helpers.dll

— कीथ

Answer 3

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

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

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

Comments

इसके लिए ज़िम्मेदार तरीका है: HtmlHelper.AnonymousObjectToHtmlAttributes (ऑब्जेक्ट), अगर कोई भी सोच रहा है कि उनका कस्टम एक्सटेंशन अंडरस्कोर को हाइफ़न से क्यों नहीं बदलेगा।

— निककेलमैन

यह वास्तव में मतदान की जरूरत है क्योंकि यह अब तक का सबसे सरल उत्तर है और पूरी तरह से काम करता है!

— दान डिप्लो

Answer 4

Mvc 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>

Comments

नमस्ते, वहाँ एक Ajax या सबमिट के माध्यम से नियंत्रक के लिए डेटा-फ़िड को पोस्ट करने का एक तरीका है। सोच रहा था कि डेटा का लाभ कैसे उठाया जाए। उदाहरण के लिए यदि मेरे पास data-dateविशेषता थी, तो मैं इसे नियंत्रक / कार्रवाई में कैसे पोस्ट कर सकता हूं? इसके अलावा% 23 क्या है

— ट्रांसफार्मर

हां फॉर्म संग्रह का उपयोग करें और इसे आईडी या नाम के साथ एक्सेस करें, और% 23 है #

— mzonerz

Answer 5

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

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

साइन्स :-)

संपादित करें

थोड़ा और यहाँ लिखें

Answer 6

मैंने एक सामान्य हाइपरलिंक का उपयोग करते हुए समाप्त किया Url.Action, जैसे कि:

<a href='<%= Url.Action("Show", new { controller = "Browse", id = node.Id }) %>'
  data-nodeId='<%= node.Id %>'>
  <%: node.Name %>
</a>

यह बदसूरत है, लेकिन आपको aटैग पर थोड़ा अधिक नियंत्रण मिला है , जो कभी-कभी भारी AJAXified साइटों में उपयोगी होता है।

HTH

Answer 7

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

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

Comments

निश्चित रूप से एक बेहतर वर्ग नाम है ... tकम से कम अंत में एक अतिरिक्त !

— hugughan3

Answer 8

आप इसे इस तरह से उपयोग कर सकते हैं:

Mvc में:

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

Html में:

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