मैं एक इनपुट में एक वर्ग जोड़ने की कोशिश कर रहा हूं।
ये काम नहीं कर रहा है:
@Html.EditorFor(x => x.Created, new { @class = "date" })
मैं एक इनपुट में एक वर्ग जोड़ने की कोशिश कर रहा हूं।
ये काम नहीं कर रहा है:
@Html.EditorFor(x => x.Created, new { @class = "date" })
जवाबों:
Html.EditorFor
अपने टेम्पलेट के अंदर एक वर्ग जोड़ने का मतलब यह नहीं है कि आपके पास कई अलग-अलग टैग हो सकते हैं। तो आपको संपादक टेम्प्लेट के अंदर वर्ग निर्दिष्ट करने की आवश्यकता है:
@Html.EditorFor(x => x.Created)
और कस्टम टेम्पलेट में:
<div>
@Html.TextBoxForModel(x => x.Created, new { @class = "date" })
</div>
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 में नया क्या है, संपादक टेम्पलेट्स के लिए बूटस्ट्रैप समर्थन
आप सामान्य संपादक के लिए क्लास सेट नहीं कर सकते। यदि आप संपादक को जानते हैं जो आप चाहते हैं, तो आप इसे सीधे उपयोग कर सकते हैं, वहां आप कक्षा निर्धारित कर सकते हैं। आपको कोई कस्टम टेम्पलेट बनाने की आवश्यकता नहीं है।
@Html.TextBoxFor(x => x.Created, new { @class = "date" })
आप उपयोग कर सकते हैं:
@Html.EditorFor(x => x.Created, new { htmlAttributes = new { @class = "date" } })
(कम से कम ASP.NET MVC 5 के साथ, लेकिन मुझे नहीं पता कि ASP.NET MVC 3 के साथ कैसा था।)
मेरे पास एक ही निराशाजनक मुद्दा था, और मैं एक EditorTemplate बनाना नहीं चाहता था जो सभी DateTime मानों पर लागू हो (मेरे UI में ऐसे समय थे जहां मैं समय प्रदर्शित करना चाहता था और jQuery UI ड्रॉप-डाउन कैलेंडर नहीं)। मेरे शोध में, मेरे सामने आए मूल मुद्दे थे:
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
, लेकिन यह मुझे कस्टम "डेट-पिकर" क्लास को लागू करने की अनुमति नहीं देगा।इसलिए, मैंने कस्टम HtmlHelper वर्ग बनाया है जिसमें निम्नलिखित लाभ हैं:
यह विधि खाली स्ट्रिंग के साथ बदल देती है।
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');
});
DateTimePickerFor
उस मॉडल के दिनांक क्षेत्र का उपयोग या अद्यतन कर रहे हैं जिसे आप के साथ प्रतिनिधित्व कर रहे हैं [DataType(DataType.Date)]
या अपडेट करने से डेटटाइम या सिर्फ एक दिनांक नियंत्रण दिखाई देता है [DataType(DataType.DateTime)]
? आप इसे mm / dd / yyyy फॉर्म में भी डाल सकते हैं, .ParseFormats(new string[] { "MM/dd/yyyy" })
(या इसे जो चाहें, आसानी से संशोधित कर सकते हैं)। यदि यह शून्य है, तो फ़ील्ड को कोड के बिना खाली के रूप में प्रस्तुत करना पड़ता है।
@MyHtmlHelpers.CalenderTextBoxFor(model => model.ExpirationDate)
। इसे लागू करने के बारे में कोई विचार?
अतिरिक्त दृश्यदा के माध्यम से एक वर्ग या अन्य जानकारी प्रदान करना संभव है - मैं इसका उपयोग करता हूं जहां मैं एक उपयोगकर्ता को डेटाबेस फ़ील्ड (प्रॉपर्टीनेम, एडिटरटाइप, और एडिटरक्लास) के आधार पर एक फॉर्म बनाने की अनुमति देता हूं।
आपके प्रारंभिक उदाहरण के आधार पर:
@Html.EditorFor(x => x.Created, new { cssClass = "date" })
और कस्टम टेम्पलेट में:
<div>
@Html.TextBoxFor(x => x.Created, new { @class = ViewData["cssClass"] })
</div>
ऐसा कोई EditorFor
ओवरराइड नहीं है जो आपको एक अनाम ऑब्जेक्ट में पास करने देता है जिसके गुण किसी न किसी टैग पर विशेषताओं के रूप में जोड़े जाएंगे, विशेष रूप से अंतर्निहित संपादक टेम्पलेट्स के लिए। आपको अपना स्वयं का कस्टम संपादक टेम्प्लेट लिखना होगा और अतिरिक्त मानदण्ड के रूप में इच्छित मान पास करना होगा।
@Html.EditorFor(m=>m.Created ...)
पाठ बॉक्स के लिए किसी भी तर्क को पारित करने की अनुमति नहीं देता है
इस तरह से आप विशेषताओं को लागू कर सकते हैं।
@Html.TextBoxFor(m=>m.Created, new { @class= "date", Name ="myName", id="myId" })
JQuery का उपयोग करना, आप इसे आसानी से कर सकते हैं:
$("input").addClass("class-name")
यहां आपका इनपुट टैग है
@Html.EditorFor(model => model.Name)
ड्रॉपडाउनलिस्ट के लिए आप इसका उपयोग कर सकते हैं:
$("select").addClass("class-name")
Dropdownlist के लिए:
@Html.DropDownlistFor(model=>model.Name)
जबकि प्रश्न 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-*
(कोणीय) जैसे गुणों को जोड़ने के लिए सहायक हो सकता है ।
आप एक ही व्यवहार बना सकते हैं जिसे एक सरल कस्टम संपादक 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 विशेषताओं के साथ भी ऐसा कर सकते हैं, जैसे आसानी से, अक्षम, आदि।
मैंने सीएसएस विशेषता चयनकर्ताओं का उपयोग करके एक और समाधान का उपयोग किया जो आपको चाहिए।
उस एचटीएमएल विशेषता को इंगित करें जिसे आप जानते हैं और उस इच्छित शैली में रखें जिसे आप चाहते हैं।
नीचे की तरह:
input[type="date"]
{
width: 150px;
}
MVC 4. उपयोग के लिए कस्टम टेम्पलेट बनाने की कोई ज़रूरत नहीं करने के लिए पाठ बॉक्स के बजाय EditFor यहाँ विशेष एचटीएमएल गुण समर्थित नहीं हैं, यह केवल MVC 5. पाठ बॉक्स से समर्थित है MVC 4 के लिए समर्थन करना चाहिए, मैं दूसरे संस्करण के बारे में पता नहीं है।
@Html.TextBox("test", "", new { @id = "signupform", @class = "form-control", @role = "form",@placeholder="Name" })
आप इसे jQuery के माध्यम से भी कर सकते हैं:
$('#x_Created').addClass(date);
मुझे बस एक पृष्ठ पर एक टेक्स्टबॉक्स के आकार को सेट करने की आवश्यकता थी। मॉडल पर कोडिंग विशेषताएँ और कस्टम संपादक टेम्प्लेट बनाने से ओवरकिल हो गया था, इसलिए मैंने सिर्फ @ Html.EditorFor को एक स्पैन टैग के साथ लपेटा, जिसे एक वर्ग कहा जाता है जो टेक्स्टबॉक्स के आकार को निर्दिष्ट करता है।
.SpaceAvailableSearch input
{
width:25px;
}
<span class="SpaceAvailableSearch">@Html.EditorFor(model => model.SearchForm.SpaceAvailable)</span>
@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 के लिए काम करता है।