এইচটিএমএল -5 ডেটাতে ড্যাশগুলি কীভাবে ব্যবহার করবেন- এএসপি.নেট এমভিসিতে * বৈশিষ্ট্য


325

আমি আমার এএসপি.নেট এমভিসি 1 প্রকল্পে এইচটিএমএল 5 ডেটা- বৈশিষ্ট্যগুলি ব্যবহার করার চেষ্টা করছি । (আমি একজন সি # এবং এএসপি। নেট এমভিসি নবাগত)

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

উপরের এইচটিএমএলঅ্যাট্রিবিউটে "ডেটা-বিশদ" নিম্নলিখিত ত্রুটিটি দেয়:

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

যখন আমি ডেটা_ডেটেলগুলি ব্যবহার করি এটি কাজ করে তবে আমার ধারণা এটি অনুমান অনুযায়ী "ডেটা-" দিয়ে শুরু করা দরকার।

আমার প্রশ্নগুলো:

  • এই কাজটি পেতে এবং এইচটিএমএল.অ্যাকশনলিঙ্ক বা অনুরূপ এইচটিএমএল সহায়কগুলির সাথে এইচটিএমএল 5 ডেটা অ্যাট্রিবিউটগুলি ব্যবহার করার কোনও উপায় আছে কি?
  • কোনও উপাদানের সাথে কাস্টম ডেটা সংযুক্ত করার জন্য কি অন্য কোনও বিকল্প ব্যবস্থা আছে? এই তথ্যটি পরে জেএস দ্বারা প্রক্রিয়া করা হবে।

5
পুরানো উত্তর সহ এটি একটি পুরানো প্রশ্ন - এমভিসি 3 এবং ততোধিক ব্যবহারকারীদের এই প্রশ্নটি দেখতে হবে stackoverflow.com/questions/2897733/…
ED-209

উত্তর:


115

আপডেট: এমভিসি 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" ) )%>

শুধু ধারণা, এটি পরীক্ষা করা হয়নি।


5
ওহে. আপনি যদি প্রথম পদক্ষেপটি ব্যবহার করতে চান তবে কেবল আপনার ডিকশনারি <স্ট্রিং, অবজেক্ট> টাইপ করা হয়েছে তা নিশ্চিত করুন।
ওন্দ্রেজ স্টাস্টনি

40
এই প্রযুক্তিগতভাবে কাজ করার সময়, প্রস্তাবিত উপায় (এমভিসি 3 দিয়ে শুরু) হিফেনের জায়গায় একটি আন্ডারস্কোর ব্যবহার করা হয় (জননিও উল্লেখ করেছেন)।
কার্টিস

3
উপরের আসল উত্তরের বিষয়টি পর্যবেক্ষণ না করা পর্যন্ত এই নির্বাচিত উত্তরের সাথে পুরো বিশ্বকে বিভ্রান্ত করছে !
রুবেন্স মারিজুজো

648

এএসপি. নেট এমভিসি ৩. এ এই সমস্যাটির সমাধান করা হয়েছে They এগুলির জন্য তারা ভাগ্যবান হয়ে উঠেছে, কারণ এইচটিএমএল বৈশিষ্ট্যে আন্ডারস্কোরগুলি আইনী নয়, সুতরাং এমভিসি আত্মবিশ্বাসের সাথে বোঝাতে পারে যে আপনি যখন আন্ডারস্কোর ব্যবহার করবেন তখন আপনি কোনও ড্যাশ চান like

উদাহরণ স্বরূপ:

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

6
এটি কোনও কারণে আমার পক্ষে কাজ করে না। উত্স দেখুন ডেটা_ * দেখায়। এমভিসি 3 ব্যবহার করে। কোন ধারনা?
সাইমন হার্টচার

হাই সাইমন, আপনি কি আপনার সমস্যার সমাধান করেছেন? যদি তা না হয় তবে আপনি কি আপনার কোডটি সরবরাহ করতে পারেন যা সমস্যার সৃষ্টি করছে?
জনি ওশিকা

এখনও ভাগ্য নেই WebGrid.GetHtml(htmlAttributes: new { data_some : "thing" })। : '(
রুবেন্স মারিউজো

আন্ডারস্কোরগুলি কেন কাজ করবে তা নির্দিষ্ট করার জন্য +1। আমার কাছে এটি ঘটেনি যে এইচটিএমএলটির জন্য গুণাবলী নামগুলিতে আন্ডারস্কোরগুলি বৈধ ছিল না!
উমর ফারুক খাজা

2
@ রুবেেন্সমারিজুও এটি RouteValueDictionaryএমভিসি 3 এর Html.Something()পদ্ধতিতে বেকড নয় । এটা যে সম্ভব WebGridহয়েছে একই ভাবে আপগ্রেড করা, অথবা আপনি সংস্করণটি পরীক্ষা পারেSystem.Web.Helpers.dll
কিথ

58

এটি উপরে প্রস্তাবিত সমস্ত কিছুর চেয়েও সহজ। এমভিসি-তে ডেটা অ্যাট্রিবিউটস যা ড্যাশগুলি অন্তর্ভুক্ত করে (-) আন্ডারস্কোর (_) ব্যবহারের জন্য প্রস্তুত হয়।

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

আমি দেখছি জনিও ইতিমধ্যে এটি উল্লেখ করেছে।


12
এর জন্য দায়ী পদ্ধতিটি হ'ল: এইচটিএমএলহেলপার.অনামনিসঅবজেক্টটহএইচটিএমটিএটিবিউটস (অবজেক্ট), যদি কেউ ভাবছেন যে কেন তাদের কাস্টম এক্সটেনশানটি হাইফেনের সাহায্যে আন্ডারস্কোরটি প্রতিস্থাপন করবে না।
নিকেলম্যান

1
এটি এতদূর সহজ উত্তর এবং পুরোপুরি কার্যকর হিসাবে এটি সত্যই ভোট দেওয়ার প্রয়োজন!
ড্যান ডিপো

21

এমভিসি 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>

হাই, কোনও অ্যাজাক্সের মাধ্যমে নিয়ন্ত্রণকারীর কাছে ডেটা-ফিড পোস্ট করার বা জমা দেওয়ার কোনও উপায় আছে? কীভাবে ডেটা লাভ করবেন তা ভাবছি। উদাহরণস্বরূপ, যদি আমার data-dateবৈশিষ্ট্যটিতে একটি থাকে তবে আমি কীভাবে এটি নিয়ামক / ক্রিয়ায় পোস্ট করতে পারি? এছাড়াও% সেখানে 23%
ট্রান্সফর্মার

হ্যাঁ ফর্ম সংগ্রহটি ব্যবহার করুন এবং আইডি বা নাম দিয়ে এটি অ্যাক্সেস করুন এবং% 23 #
হ'ল

4

আপনি এটি একটি নতুন এইচটিএমএল সহায়ক সম্প্রসারণ ফাংশন দিয়ে বাস্তবায়ন করতে পারেন যা বিদ্যমান অ্যাকশনলিংকের অনুরূপ ব্যবহৃত হবে।

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

সরল :-)

সম্পাদন করা

এখানে একটি লেখার বিট আরও কিছু


3

আমি পাশাপাশি একটি সাধারণ হাইপারলিঙ্ক ব্যবহার করে শেষ করেছি Url.Action:

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

এটি কৃপণকর, তবে আপনি aট্যাগটির উপরে আরও কিছুটা নিয়ন্ত্রণ পেয়ে গেছেন যা কখনও কখনও ভারী এজেএক্সএফাইফাইড সাইটগুলিতে দরকারী।

আছে HTH


0

আমি খুব বেশি টাইপিং খাঁটি "এ" ট্যাগ ব্যবহার পছন্দ করি না। সুতরাং আমি সমাধান সঙ্গে আসা। দেখুন এটি চেহারা

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

1
অবশ্যই আরও ভাল শ্রেণীর নাম আছে ... tকমপক্ষে একটি বাড়তি অন্তত!
hvaughan3

-2

আপনি এটি এর মতো ব্যবহার করতে পারেন:

এমভিসি তে:

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

এইচটিএমএলে:

<input type="text" name="Id" data_val_number="10"/>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.