ASP.NET MVC 3 रेज़र - एडिटरफ़ोर में क्लास जोड़ना


189

मैं एक इनपुट में एक वर्ग जोड़ने की कोशिश कर रहा हूं।

ये काम नहीं कर रहा है:

@Html.EditorFor(x => x.Created, new { @class = "date" })

1
हे तुम भी नाम सही है! - (मेरे कोड के लिए)
चुटकी

1
नोट: कुछ उत्तरों के लिए, भले ही वे सही हों, किसी को इसके वास्तविक होने के लिए ब्राउज़र कैश को साफ़ करना पड़ सकता है। यह विशेष रूप से सच है यदि समाधान सीएसएस आधारित है या इसमें सीएसएस क्लास शामिल है! थोड़े अलग मुद्दे के साथ यह महसूस करते हुए कि उन्होंने काफी समय बिताया ....
जोसेफडोगी

जवाबों:


183

Html.EditorForअपने टेम्पलेट के अंदर एक वर्ग जोड़ने का मतलब यह नहीं है कि आपके पास कई अलग-अलग टैग हो सकते हैं। तो आपको संपादक टेम्प्लेट के अंदर वर्ग निर्दिष्ट करने की आवश्यकता है:

@Html.EditorFor(x => x.Created)

और कस्टम टेम्पलेट में:

<div>
    @Html.TextBoxForModel(x => x.Created, new { @class = "date" })
</div>

5
यह महान काम करता है, धन्यवाद। मेरे मॉडल में DisplayFormat एनोटेशन के अनुसार फ़ील्ड मान को प्रारूपित करने में समस्या हो रही है। EditorFor और DisplayFor के साथ एनोटेट के रूप में प्रारूपित, लेकिन TextBoxFor के साथ नहीं :( ऐसा लगता है कि मुझे एक कस्टम टेम्पलेट का उपयोग करना चाहिए, जब तक कि कोई मुझे कुछ याद नहीं कर सकता है?
शॉन

एक ही समस्या होने पर जहां TextBoxFor DisplayFormat सेट का सम्मान नहीं करता है।
jocull

14
यह मॉडलटॉम को ग्राउंडकंट्रोलर है, मैं आपको व्यू भेज रहा हूं और मैं सबसे एमवीसी तरीके से तैर रहा हूं।
ट्रेंट स्टीवर्ट

3
मेरे पास एक ही मुद्दा है, लेकिन मैं TextBoxFor का उपयोग नहीं कर सकता क्योंकि मुझे DisplayFormat की आवश्यकता है, जो संपादक या प्रदर्शन के साथ काम करता है, लेकिन साथ ही मुझे कक्षा की भी आवश्यकता है, ताकि मैं पाठ को आसानी से प्रदर्शित कर सकूं
AT

153

ASP.NET MVC 5.1 के रूप में, एक वर्ग को एक EditorForसे जोड़ना संभव है (मूल प्रश्न ASP.NET MVC 3 को निर्दिष्ट करता है, और स्वीकृत उत्तर अभी भी उस विचार के साथ सबसे अच्छा है)।

@Html.EditorFor(x=> x.MyProperty,
    new { htmlAttributes = new { @class = "MyCssClass" } })

देखें: ASP.NET MVC 5.1 में नया क्या है, संपादक टेम्पलेट्स के लिए बूटस्ट्रैप समर्थन


वह तो कमाल है। धन्यवाद!
नील

1
मैं लगभग इसे याद किया क्योंकि यह सूची में 3 है। यह शायद इसे अपना प्रश्न बनाने में सहायक होगा और फिर स्वयं इसका उत्तर देगा।
रॉब सदलर

एमवीसी 2,3,4 के दौरान मुझे समझ में नहीं आया ... लेकिन जैसा कि अधिक लोगों ने इसका इस्तेमाल करना शुरू कर दिया और इसकी कमी के बारे में शिकायत करना शुरू कर दिया - यह अचानक एमवीसी 5: डी +1
पीओटर कुला

यह अब मेरी राय में स्वीकृत उत्तर होना चाहिए।
मैन्फ्रेड

101

आप सामान्य संपादक के लिए क्लास सेट नहीं कर सकते। यदि आप संपादक को जानते हैं जो आप चाहते हैं, तो आप इसे सीधे उपयोग कर सकते हैं, वहां आप कक्षा निर्धारित कर सकते हैं। आपको कोई कस्टम टेम्पलेट बनाने की आवश्यकता नहीं है।

@Html.TextBoxFor(x => x.Created, new { @class = "date" }) 

5
अच्छा सौदा, कस्टम टेम्पलेट बनाने की जरूरत नहीं थी।
स्टीव ड्यूइट्समैन

आपने मेरे लिए बहुत समय बचाया!
प्रशान्त बेनी

40

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

@Html.EditorFor(x => x.Created, new { htmlAttributes = new { @class = "date" } })

(कम से कम ASP.NET MVC 5 के साथ, लेकिन मुझे नहीं पता कि ASP.NET MVC 3 के साथ कैसा था।)


कृपया प्रश्न शीर्षक पढ़ें, यह MVC3 के लिए समस्या है, आप MVC5 समाधान प्रदान करते हैं जो पूरी तरह से भ्रामक है।
विंसेंट

11
और आप कृपया मेरी पूरी पोस्ट पढ़ें जहां मैंने लिखा था कि यह एमवीसी 5 के लिए है। यह Google की ओर से पहला परिणाम था, इसलिए मुझे इसका समाधान मिल जाने के बाद मैं इसे यहाँ साझा करना चाहता था, शायद यह कुछ लोगों की मदद कर सके।
प्रोज्नो

इसने मेरी मदद की! धन्यवाद @przno
जोकिम एम

29

मेरे पास एक ही निराशाजनक मुद्दा था, और मैं एक EditorTemplate बनाना नहीं चाहता था जो सभी DateTime मानों पर लागू हो (मेरे UI में ऐसे समय थे जहां मैं समय प्रदर्शित करना चाहता था और jQuery UI ड्रॉप-डाउन कैलेंडर नहीं)। मेरे शोध में, मेरे सामने आए मूल मुद्दे थे:

  • मानक TextBoxFor सहायक ने मुझे विनीत jQuery UI कैलेंडर प्रदान करने के लिए "डेट-पिकर" के एक कस्टम वर्ग को लागू करने की अनुमति दी, लेकिन TextBoxFor समय के बिना किसी डेटटाइम को प्रारूपित नहीं करेगा, इसलिए कैलेंडर रेंडरिंग विफल हो गया।
  • मानक EditorFor डेटाइम को एक स्वरूपित स्ट्रिंग के रूप में प्रदर्शित करेगा (जब उचित विशेषताओं के साथ सजाया जाए [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")], लेकिन यह मुझे कस्टम "डेट-पिकर" क्लास को लागू करने की अनुमति नहीं देगा।

इसलिए, मैंने कस्टम HtmlHelper वर्ग बनाया है जिसमें निम्नलिखित लाभ हैं:

  • विधि स्वचालित रूप से दिनांक-समय को JDD कैलेंडर द्वारा आवश्यक शॉर्टडेट्रिंग में परिवर्तित करती है (यदि समय मौजूद हो तो jQuery विफल हो जाएगा)।
  • डिफ़ॉल्ट रूप से, सहायक एक jQuery कैलेंडर प्रदर्शित करने के लिए आवश्यक htmlAttributes को लागू करेगा, लेकिन जरूरत पड़ने पर उन्हें ओवरराइड किया जा सकता है।
  • यदि तारीख शून्य है, ASP.NET MVC एक मूल्य के रूप में 1/1/0001 की तारीख डालेगा।

यह विधि खाली स्ट्रिंग के साथ बदल देती है।

public static MvcHtmlString CalenderTextBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes = null)
{
    var mvcHtmlString = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper, expression, htmlAttributes ?? new { @class = "text-box single-line date-picker" });
    var xDoc = XDocument.Parse(mvcHtmlString.ToHtmlString());
    var xElement = xDoc.Element("input");
    if (xElement != null)
    {
        var valueAttribute = xElement.Attribute("value");
        if (valueAttribute != null)
        {
            valueAttribute.Value = DateTime.Parse(valueAttribute.Value).ToShortDateString();
            if (valueAttribute.Value == "1/1/0001")
                valueAttribute.Value = string.Empty;
        }
    }
    return new MvcHtmlString(xDoc.ToString());
}

और उन लोगों के लिए जो JQuery सिंटैक्स जानना चाहते हैं जो date-pickerक्लास डेकोरेशन के साथ ऑब्जेक्ट को कैलेंडर के लिए प्रस्तुत करना चाहते हैं, यहाँ यह है:

$(document).ready(function () {
    $('.date-picker').datepicker({ inline: true, maxDate: 0, changeMonth: true, changeYear: true });
    $('.date-picker').datepicker('option', 'showAnim', 'slideDown');
});

इससे मुझे अभी मदद मिली है, इसके साथ थोड़ी सी समस्या - आपको यह सुनिश्चित करने के लिए जांचने की आवश्यकता है कि DateAttribute.Value रिक्त स्थान पर या व्हाट्सएप को DateTime.Parse विधि से पारित करने से पहले, अन्यथा आप एक खाली मैदान पर फेंके जा रहे FormatException को जोखिम में डालते हैं।
मू

धन्यवाद। आपने मेरी बहुत मदद की।
ब्रोंज़ेटो

इससे मुझे मदद मिली, हालाँकि यदि आप इसे लागू कर रहे हैं और आप इस क्षेत्र में सत्यापन करने की अपेक्षा कर रहे हैं तो आपको इस तर्क को लागू करने की आवश्यकता होगी: stackoverflow.com/questions/12023970/…
हारून न्यूटन

अच्छी नौकरी, लेकिन क्या आप जानते हैं कि यदि आप DateTimePickerForउस मॉडल के दिनांक क्षेत्र का उपयोग या अद्यतन कर रहे हैं जिसे आप के साथ प्रतिनिधित्व कर रहे हैं [DataType(DataType.Date)]या अपडेट करने से डेटटाइम या सिर्फ एक दिनांक नियंत्रण दिखाई देता है [DataType(DataType.DateTime)]? आप इसे mm / dd / yyyy फॉर्म में भी डाल सकते हैं, .ParseFormats(new string[] { "MM/dd/yyyy" })(या इसे जो चाहें, आसानी से संशोधित कर सकते हैं)। यदि यह शून्य है, तो फ़ील्ड को कोड के बिना खाली के रूप में प्रस्तुत करना पड़ता है।
vapcguy

उस्तरा पहचान नहीं होगा @MyHtmlHelpers.CalenderTextBoxFor(model => model.ExpirationDate)। इसे लागू करने के बारे में कोई विचार?
मेहदीवे

15

अतिरिक्त दृश्यदा के माध्यम से एक वर्ग या अन्य जानकारी प्रदान करना संभव है - मैं इसका उपयोग करता हूं जहां मैं एक उपयोगकर्ता को डेटाबेस फ़ील्ड (प्रॉपर्टीनेम, एडिटरटाइप, और एडिटरक्लास) के आधार पर एक फॉर्म बनाने की अनुमति देता हूं।

आपके प्रारंभिक उदाहरण के आधार पर:

@Html.EditorFor(x => x.Created, new { cssClass = "date" })

और कस्टम टेम्पलेट में:

<div>
    @Html.TextBoxFor(x => x.Created, new { @class = ViewData["cssClass"] })
</div>

8
@ Html.EditorFor (x => x.Created, new {cssClass = "date"}) ने मेरे लिए काम नहीं किया
एलन मैकडोनाल्ड

1
यह मेरे लिए काम करता है और एक चिह्नित की तुलना में बेहतर उत्तर है। यह टेम्पलेट का उपयोग करने का लाभ प्रदान करता है, फिर भी jQuery के हैक के बिना कुछ अनुकूलन की अनुमति देता है।
चाड हेडगॉक

TextBoxFor मॉडल में सेट की जा सकने वाली अन्य विशेषताओं को अनदेखा करता है, जैसे 'DataType का उदाहरण।
मार्कस

8

ऐसा कोई EditorForओवरराइड नहीं है जो आपको एक अनाम ऑब्जेक्ट में पास करने देता है जिसके गुण किसी न किसी टैग पर विशेषताओं के रूप में जोड़े जाएंगे, विशेष रूप से अंतर्निहित संपादक टेम्पलेट्स के लिए। आपको अपना स्वयं का कस्टम संपादक टेम्प्लेट लिखना होगा और अतिरिक्त मानदण्ड के रूप में इच्छित मान पास करना होगा।


2
@Html.EditorFor(m=>m.Created ...) 

पाठ बॉक्स के लिए किसी भी तर्क को पारित करने की अनुमति नहीं देता है

इस तरह से आप विशेषताओं को लागू कर सकते हैं।

@Html.TextBoxFor(m=>m.Created, new { @class= "date", Name ="myName", id="myId" })

2

JQuery का उपयोग करना, आप इसे आसानी से कर सकते हैं:

$("input").addClass("class-name")

यहां आपका इनपुट टैग है

@Html.EditorFor(model => model.Name)

ड्रॉपडाउनलिस्ट के लिए आप इसका उपयोग कर सकते हैं:

$("select").addClass("class-name")

Dropdownlist के लिए:

@Html.DropDownlistFor(model=>model.Name)

2

जबकि प्रश्न MVC 3.0 पर लक्षित था, हम पाते हैं कि समस्या MVC 4.0 में भी बनी हुई है। MVC 5.0 में अब htmlAttributes के लिए मूल रूप से एक अधिभार शामिल है।

मुझे रोजगार के अपने वर्तमान स्थान पर MVC 4.0 का उपयोग करने के लिए मजबूर किया गया है और JQuery एकीकरण के लिए एक सीएसएस वर्ग जोड़ने की आवश्यकता है। मैंने एक एकल एक्सटेंशन विधि का उपयोग करके इस समस्या को हल किया ...

विस्तार विधि:

using System.Linq;
using System.Web.Mvc;
using System.Web.Routing;
using System.Xml.Linq;

namespace MyTest.Utilities
{
    public static class MVCHelperExtensionMethods
    {
        public static MvcHtmlString AddHtmlAttributes(this MvcHtmlString input, object htmlAttributes)
        {
            // WE WANT TO INJECT INTO AN EXISTING ELEMENT.  IF THE ATTRIBUTE ALREADY EXISTS, ADD TO IT, OTHERWISE
            // CREATE THE ATTRIBUTE WITH DATA VALUES.

            // USE XML PARSER TO PARSE HTML ELEMENT
            var xdoc = XDocument.Parse(input.ToHtmlString());
            var rootElement = (from e in xdoc.Elements() select e).FirstOrDefault();

            // IF WE CANNOT PARSE THE INPUT USING XDocument THEN RETURN THE ORIGINAL UNMODIFIED.
            if (rootElement == null)
            {
                return input;
            }

            // USE RouteValueDictionary TO PARSE THE NEW HTML ATTRIBUTES
            var routeValueDictionary = new RouteValueDictionary(htmlAttributes);

            foreach (var routeValue in routeValueDictionary)
            {
                var attribute = rootElement.Attribute(routeValue.Key);

                if (attribute == null)
                {
                    attribute = new XAttribute(name: routeValue.Key, value: routeValue.Value);
                    rootElement.Add(attribute);
                }
                else
                {
                    attribute.Value = string.Format("{0} {1}", attribute.Value, routeValue.Value).Trim();
                }
            }

            var elementString = rootElement.ToString();
            var response = new MvcHtmlString(elementString);
            return response;
        }
    }
}

HTML मार्कअप उपयोग:

@Html.EditorFor(expression: x => x.MyTestProperty).AddHtmlAttributes(new { @class = "form-control" })

(विस्तार विधि के नाम स्थान को रेजर दृश्य में शामिल करना सुनिश्चित करें)

स्पष्टीकरण: विचार मौजूदा HTML में इंजेक्ट करना है। मैंने Linq-to-XML का उपयोग करके वर्तमान तत्व को पार्स करने का विकल्प चुना XDocument.Parse()। मैं टाइप के रूप में htmlAttributes पास करता हूं object। मैं RouteValueDictionaryपास किए गए htmlAttributes को पार्स करने के लिए MVC का उपयोग करता हूं। मैं उन विशेषताओं को मर्ज करता हूं जहां वे पहले से ही मौजूद हैं, या अगर यह अभी तक मौजूद नहीं है तो एक नई विशेषता जोड़ें।

यदि XDocument.Parse()मैं सभी आशाओं को छोड़ देता हूं और मूल इनपुट स्ट्रिंग वापस करता हूं , तो इस घटना में इनपुट पार्स करने योग्य नहीं है ।

अब मैं डिसप्लेफ़ोर के लाभ का उपयोग कर सकता हूं (उचित रूप में डेटाटिप को प्रस्तुत करना) लेकिन सीएसएस कक्षाएं (और उस मामले के लिए कोई अन्य विशेषता) निर्दिष्ट करने की क्षमता भी है। data-*या ng-*(कोणीय) जैसे गुणों को जोड़ने के लिए सहायक हो सकता है ।


1

आप एक ही व्यवहार बना सकते हैं जिसे एक सरल कस्टम संपादक DateTime.cshtml कहा जाता है, यह दृश्य / साझा / EditorTemplates में सहेज रहा है

@model DateTime

@{
    var css = ViewData["class"] ?? "";
    @Html.TextBox("", (Model != DateTime.MinValue? Model.ToString("dd/MM/yyyy") : string.Empty), new { @class = "calendar medium " + css});
}

और आपके विचारों में

@Html.EditorFor(model => model.StartDate, new { @class = "required" })

ध्यान दें कि मेरे उदाहरण में मैं दो सीएसएस वर्गों और तिथि प्रारूप को हार्ड-कोडिंग कर रहा हूं। आप निश्चित रूप से, इसे बदल सकते हैं। आप अन्य HTML विशेषताओं के साथ भी ऐसा कर सकते हैं, जैसे आसानी से, अक्षम, आदि।


1

मैंने सीएसएस विशेषता चयनकर्ताओं का उपयोग करके एक और समाधान का उपयोग किया जो आपको चाहिए।

उस एचटीएमएल विशेषता को इंगित करें जिसे आप जानते हैं और उस इच्छित शैली में रखें जिसे आप चाहते हैं।

नीचे की तरह:

input[type="date"]
{
     width: 150px;
}

1

MVC 4. उपयोग के लिए कस्टम टेम्पलेट बनाने की कोई ज़रूरत नहीं करने के लिए पाठ बॉक्स के बजाय EditFor यहाँ विशेष एचटीएमएल गुण समर्थित नहीं हैं, यह केवल MVC 5. पाठ बॉक्स से समर्थित है MVC 4 के लिए समर्थन करना चाहिए, मैं दूसरे संस्करण के बारे में पता नहीं है।

@Html.TextBox("test", "", new { @id = "signupform", @class = "form-control", @role = "form",@placeholder="Name" })


0

मुझे बस एक पृष्ठ पर एक टेक्स्टबॉक्स के आकार को सेट करने की आवश्यकता थी। मॉडल पर कोडिंग विशेषताएँ और कस्टम संपादक टेम्प्लेट बनाने से ओवरकिल हो गया था, इसलिए मैंने सिर्फ @ Html.EditorFor को एक स्पैन टैग के साथ लपेटा, जिसे एक वर्ग कहा जाता है जो टेक्स्टबॉक्स के आकार को निर्दिष्ट करता है।

सीएसएस वर्ग घोषणा:

.SpaceAvailableSearch input
{
    width:25px;
}

कोड देखें:

<span class="SpaceAvailableSearch">@Html.EditorFor(model => model.SearchForm.SpaceAvailable)</span>

0

@Html.EditorFor()MVC3 RAzor में क्लास लगाने का एक सबसे अच्छा तरीका है

@Html.EditorFor(x => x.Created)


<style type="text/css">

#Created
{
    background: #EEE linear-gradient(#EEE,#EEE);   
    border: 1px solid #adadad;
    width:90%;
    }
</style>

यह आपके ऊपर स्टाइल को जोड़ देगा EditorFor()

यह MVC3 के लिए काम करता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.