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





html5 custom-data-attribute (8)


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

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 एक और लिखने के लिए थोड़ा सा

मैं अपने एएसपी.नेट एमवीसी 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 डेटा विशेषताओं का उपयोग करने का कोई तरीका है?
  • क्या किसी तत्व को कस्टम डेटा संलग्न करने के लिए कोई अन्य वैकल्पिक तंत्र है? जेएस द्वारा बाद में इस डेटा को संसाधित किया जाना है।



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

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



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

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

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

HTH




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

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

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

इसे एमवीसी 3 में प्रस्तुत करेगा:

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

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

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="" />



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

एमवीसी में:

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

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

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



एमवीसी 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("« Previous", "Search",
 new { keyword = Model.Keyword, page = Model.currPage - 1},
 new { @class = "prev", data_details = "Some Details"   })%>

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




Simple way to save multiple files

cshtml

@using (Html.BeginForm("Index","Home",FormMethod.Post,new { enctype = "multipart/form-data" }))
{
    <label for="file">Upload Files:</label>
    <input type="file" multiple name="files" id="files" /><br><br>
    <input type="submit" value="Upload Files" />
    <br><br>
    @ViewBag.Message
}

नियंत्रक

[HttpPost]
        public ActionResult Index(HttpPostedFileBase[] files)
        {
            foreach (HttpPostedFileBase file in files)
            {
                if (file != null && file.ContentLength > 0)
                    try
                    {
                        string path = Path.Combine(Server.MapPath("~/Files"), Path.GetFileName(file.FileName));
                        file.SaveAs(path);
                        ViewBag.Message = "File uploaded successfully";
                    }
                    catch (Exception ex)
                    {
                        ViewBag.Message = "ERROR:" + ex.Message.ToString();
                    }

                else
                {
                    ViewBag.Message = "You have not specified a file.";
                }
            }
            return View();
        }




asp.net-mvc html5 custom-data-attribute