আমি একটি ইনপুটে ক্লাস যুক্ত করার চেষ্টা করছি।
এটি কাজ করছে না:
@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>
এএসপি.এনইটি এমভিসি ৫.১ হিসাবে, একটি ক্লাস যুক্ত EditorFor
করা সম্ভব (মূল প্রশ্নটি এএসপি.নেট এমভিসি 3 নির্দিষ্ট করে, এবং স্বীকৃত উত্তরটি এখনও বিবেচ্য ক্ষেত্রে সেরা)।
@Html.EditorFor(x=> x.MyProperty,
new { htmlAttributes = new { @class = "MyCssClass" } })
দেখুন: এএসপি.নেট এমভিসি 5.1 এ নতুন কী রয়েছে, সম্পাদক টেম্পলেটগুলির জন্য বুটস্ট্র্যাপ সমর্থন
আপনি জেনেরিক এডিটরফোর্ডের জন্য শ্রেণি নির্ধারণ করতে পারবেন না। আপনি যে সম্পাদকটি চান তা যদি আপনি জানেন তবে আপনি সরাসরি এটি ব্যবহার করতে পারবেন, সেখানে আপনি ক্লাসটি সেট করতে পারেন। আপনার কোনও কাস্টম টেম্পলেট তৈরি করার দরকার নেই।
@Html.TextBoxFor(x => x.Created, new { @class = "date" })
তুমি ব্যবহার করতে পার:
@Html.EditorFor(x => x.Created, new { htmlAttributes = new { @class = "date" } })
(কমপক্ষে ASP.NET MVC 5 এর সাথে, তবে আমি জানি না যে এটি কীভাবে এএসপি.নেট এমভিসি 3 এর সাথে ছিল))
আমার একই হতাশাজনক সমস্যা ছিল এবং আমি এমন একটি এডিটর টেম্পলেট তৈরি করতে চাইনি যা সমস্ত ডেটটাইম মানগুলিতে প্রয়োগ হয় (আমার ইউআইতে এমন সময় ছিল যেখানে আমি সময়টি প্রদর্শন করতে চাইতাম এবং একটি জিকুয়েরি ইউআই ড্রপ-ডাউন ক্যালেন্ডার ছিল না)। আমার গবেষণায়, আমি যে মূল সমস্যার মুখোমুখি হয়েছি সেগুলি হ'ল:
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
তবে এটি আমাকে কাস্টম "তারিখ-চয়নকারী" শ্রেণি প্রয়োগ করতে দেয় না।অতএব, আমি কাস্টম এইচটিএমএল হেল্পার ক্লাস তৈরি করেছি যার নিম্নলিখিত সুবিধা রয়েছে:
এই পদ্ধতিটি খালি স্ট্রিংয়ের মাধ্যমে এটি প্রতিস্থাপন করে।
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());
}
এবং যারা জিকুয়ের সিনট্যাক্সটি জানতে চান যা 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)]
? আপনি এটিকে মিমি / ডিডি / ইয়ে ফর্মের সাথেও বলতে পারেন .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")
ড্রপডাউনলিস্টের জন্য:
@Html.DropDownlistFor(model=>model.Name)
প্রশ্নটি এমভিসি ৩.০ এ লক্ষ্যবস্তু করা হয়েছিল, আমরা দেখতে পেলাম যে সমস্যাটি এমভিসি ৪.০ তেও রয়েছে। এমভিসি 5.0 এ এখন এইচটিএমএলঅ্যাট্রিবিউটের জন্য স্থানীয়ভাবে একটি ওভারলোড অন্তর্ভুক্ত।
আমি আমার বর্তমান কর্মসংস্থানের জায়গায় এমভিসি 4.0 ব্যবহার করতে বাধ্য এবং জিকুয়েরি ইন্টিগ্রেশনের জন্য সিএসএস শ্রেণি যুক্ত করা দরকার। আমি একক এক্সটেনশন পদ্ধতি ব্যবহার করে এই সমস্যাটি সমাধান করেছি ...
সম্প্রসারণ পদ্ধতি:
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.EditorFor(expression: x => x.MyTestProperty).AddHtmlAttributes(new { @class = "form-control" })
(রেজার ভিউতে এক্সটেনশন পদ্ধতির নাম স্থান অন্তর্ভুক্ত করার বিষয়টি নিশ্চিত করুন)
ব্যাখ্যা:
ধারণাটি বিদ্যমান এইচটিএমএল ইনজেক্ট করা। আমি লিনক-টু-এক্সএমএল ব্যবহার করে বর্তমান উপাদানটি বিশ্লেষণের সিদ্ধান্ত নিয়েছি XDocument.Parse()
। আমি টাইপ হিসাবে এইচটিএমএলঅ্যাট্রিবিউট পাস করি object
। আমি RouteValueDictionary
এমভিসিটি এইচটিএমএল পাস হওয়া পাসওয়ার্ডগুলিকে ব্যবহার করার জন্য ব্যবহার করি they
ইভেন্টে ইনপুটটি পার্সেবল না হলে XDocument.Parse()
আমি সমস্ত আশা ছেড়ে দিয়ে আসল ইনপুট স্ট্রিংটি ফিরিয়ে দেব।
এখন আমি ডিসপ্লেফোর্ডের সুবিধাটি (যেমন মুদ্রার মতো ডেট্যাটাইপগুলি যথাযথভাবে উপস্থাপন করতে পারি) ব্যবহার করতে পারি তবে সিএসএস ক্লাস (এবং সেই বিষয়ে অন্য কোনও বৈশিষ্ট্য) নির্দিষ্ট করার ক্ষমতাও রয়েছে। data-*
, বা ng-*
(কৌণিক) এর মতো বৈশিষ্ট্যগুলি যুক্ত করতে সহায়ক হতে পারে ।
আপনি ডেটটাইম সিএসটিএমটিএল নামে একটি সাধারণ কাস্টম সম্পাদক তৈরি করে একই আচরণ তৈরি করতে পারবেন, এটি ভিউ / শেয়ার / এডিটরপ্রেমিতে সংরক্ষণ করে
@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" })
মনে রাখবেন যে আমার উদাহরণে আমি দুটি সিএসএস ক্লাস এবং তারিখের ফর্ম্যাটকে হার্ড কোডিং করছি। আপনি অবশ্যই এটি পরিবর্তন করতে পারেন। আপনি অন্যের সাথেও এইচটিএমএল বৈশিষ্ট্য যেমন পঠনযোগ্য, অক্ষম ইত্যাদির সাথেও করতে পারেন can
আপনার যা প্রয়োজন তা পেতে আমি সিএসএস অ্যাট্রিবিউট সিলেক্টর ব্যবহার করে অন্য একটি সমাধান ব্যবহার করেছি।
আপনি যে এইচটিএমএল বৈশিষ্ট্যটি জানেন সেটিকে ইঙ্গিত করুন এবং আপনি চান এমন আপেক্ষিক স্টাইলে রাখুন।
নীচের মত:
input[type="date"]
{
width: 150px;
}
MVC 4. ব্যবহারের জন্য কাস্টম টেমপ্লেট তৈরি কোন প্রয়োজন নেই করার পাঠ্যবাক্স পরিবর্তে EditFor এখানে বিশেষ HTML বৈশিষ্ট্যাবলী সমর্থিত নয়, এটি শুধুমাত্র MVC 5. পাঠ্যবাক্স থেকে সমর্থিত হয় MVC 4 সমর্থন করা উচিত, আমি অন্য সংস্করণ সম্পর্কে জানি না।
@Html.TextBox("test", "", new { @id = "signupform", @class = "form-control", @role = "form",@placeholder="Name" })
আপনি এটি jQuery এর মাধ্যমেও করতে পারেন:
$('#x_Created').addClass(date);
আমার কেবলমাত্র একটি পৃষ্ঠায় একটি পাঠ্যবক্সের আকার নির্ধারণ করা দরকার। মডেলটিতে কোডিং বৈশিষ্ট্যাবলী এবং কাস্টম সম্পাদক টেম্পলেটগুলি ওভারকিল ছিল, সুতরাং আমি কেবলমাত্র @ এইচটিএমএল.এডিটোরের জন্য একটি স্প্যান ট্যাগ দিয়ে কলটি আবৃত করেছি যা একটি পাঠ্যবাক্সের আকার নির্দিষ্ট করে এমন একটি শ্রেণি বলে।
.SpaceAvailableSearch input
{
width:25px;
}
<span class="SpaceAvailableSearch">@Html.EditorFor(model => model.SearchForm.SpaceAvailable)</span>
@Html.EditorFor()
এমভিসি 3 রেজারে ক্লাস প্রয়োগের একটি সেরা উপায় হ'ল
@Html.EditorFor(x => x.Created)
<style type="text/css">
#Created
{
background: #EEE linear-gradient(#EEE,#EEE);
border: 1px solid #adadad;
width:90%;
}
</style>
এটি আপনার উপরে স্টাইল যুক্ত করবে EditorFor()
এটি এমভিসি 3 এর জন্য কাজ করে।