এএসপি.নেট এমভিসি 3 রেজার - সম্পাদকফোরে ক্লাস যুক্ত করা হচ্ছে


189

আমি একটি ইনপুটে ক্লাস যুক্ত করার চেষ্টা করছি।

এটি কাজ করছে না:

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

1
আরে আপনি এমনকি নামটি পেয়েছেন! - (আমার কোডের জন্য)
চিমটি

1
দ্রষ্টব্য: কিছু উত্তরের জন্য, সেগুলি সঠিক হলেও, এটি বাস্তবায়িত হওয়ার জন্য একজনকে ব্রাউজারের ক্যাশে সাফ করতে হতে পারে। এটি বিশেষত সত্য যদি সমাধানটি CSS ভিত্তিক হয় বা কোনও CSS শ্রেণীর সাথে জড়িত থাকে! কিছুটা আলাদা ইস্যু নিয়ে বুঝতে পেরে বেশ কিছুটা সময় কাটিয়েছি ....
জোসেফডোগি

উত্তর:


183

কোনও শ্রেণি যুক্ত করা Html.EditorForএটির টেমপ্লেটের অভ্যন্তরের হিসাবে বোঝা যায় না যে আপনার অনেকগুলি ভিন্ন ট্যাগ থাকতে পারে। সুতরাং আপনাকে সম্পাদক টেমপ্লেটের ভিতরে শ্রেণি নির্ধারণ করতে হবে:

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

এবং কাস্টম টেমপ্লেটে:

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

5
ধন্যবাদ এটি দুর্দান্ত কাজ করে। আমার মডেলের ডিসপ্লে ফরম্যাট টীকা অনুসারে ক্ষেত্রের মানটি ফর্ম্যাট করতে সমস্যা হচ্ছে। এডিটরফোর্ড এবং ডিসপ্লেফোর্ডের সাথে টীকাযুক্ত হিসাবে ফর্ম্যাট করা হয়েছে তবে টেক্সটবক্সফোর্ড নয় :( দেখে মনে হচ্ছে আমার অবশ্যই একটি কাস্টম টেমপ্লেট ব্যবহার করা উচিত, যদি না কেউ আমার অনুপস্থিত কিছুটির দিকে আমাকে নির্দেশ না করে?
সান

পাঠ্যবক্সফোর্ড ডিসপ্লেফর্ম্যাট সেটটি সম্মান করে না এমন একই সমস্যা রয়েছে।
জোকুল

14
এটি মডেলটমে গ্রাউন্ডকন্ট্রোলার, আমি আপনাকে ভিউটি প্রেরণ করছি এবং আমি সবচেয়ে এমভিসি পথে ভাসছি flo
ট্রেন্ট স্টুয়ার্ট

3
আমার একই সমস্যা আছে তবে আমি ডিসপ্লেফর্ম্যাট হিসাবে যেমন টেক্সটবক্সফোরটি ব্যবহার করতে পারি না যা সম্পাদক বা প্রদর্শনের সাথে কাজ করে তবে একই সাথে আমার ক্লাসও প্রয়োজন, যাতে পাঠ্য আকারে আমি পাঠ্য প্রদর্শন করতে পারি
এটি

153

এএসপি.এনইটি এমভিসি ৫.১ হিসাবে, একটি ক্লাস যুক্ত EditorForকরা সম্ভব (মূল প্রশ্নটি এএসপি.নেট এমভিসি 3 নির্দিষ্ট করে, এবং স্বীকৃত উত্তরটি এখনও বিবেচ্য ক্ষেত্রে সেরা)।

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

দেখুন: এএসপি.নেট এমভিসি 5.1 এ নতুন কী রয়েছে, সম্পাদক টেম্পলেটগুলির জন্য বুটস্ট্র্যাপ সমর্থন


সেটা খুবই ভালো. ধন্যবাদ!
নিল

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 এর সাথে, তবে আমি জানি না যে এটি কীভাবে এএসপি.নেট এমভিসি 3 এর সাথে ছিল))


দয়া করে প্রশ্নের শিরোনামটি পড়ুন, এটি এমভিসি 3 এর জন্য সমস্যা, আপনি এমভিসি 5 সমাধান সরবরাহ করেন যা সম্পূর্ণ বিভ্রান্তিকর।
ভিনসেন্ট

11
এবং আপনি দয়া করে আমার পুরো পোস্টটি পড়ুন যেখানে আমি এটি লিখেছি এটি এমভিসি 5 এর জন্য। গুগলের কাছ থেকে এটিই প্রথম ফলাফল, সুতরাং আমি যে সমাধানটি চেয়েছিলাম তা সন্ধানের পরে এটি এখানে ভাগ করে নেব, সম্ভবত এটি কিছু লোককে সহায়তা করতে পারে।
przno

এই আমাকে সাহায্য! ধন্যবাদ @ প্রজ্নো
জোয়াকিম এম

29

আমার একই হতাশাজনক সমস্যা ছিল এবং আমি এমন একটি এডিটর টেম্পলেট তৈরি করতে চাইনি যা সমস্ত ডেটটাইম মানগুলিতে প্রয়োগ হয় (আমার ইউআইতে এমন সময় ছিল যেখানে আমি সময়টি প্রদর্শন করতে চাইতাম এবং একটি জিকুয়েরি ইউআই ড্রপ-ডাউন ক্যালেন্ডার ছিল না)। আমার গবেষণায়, আমি যে মূল সমস্যার মুখোমুখি হয়েছি সেগুলি হ'ল:

  • স্ট্যান্ডার্ড টেক্সটবক্সফোর্ড সহায়ক আমাকে jQuery UI ক্যালেন্ডার রেন্ডার করতে "তারিখ-চয়নকারী" এর একটি কাস্টম ক্লাস প্রয়োগ করার অনুমতি দিয়েছে, তবে পাঠ্যবক্সফোর সময় ছাড়াই একটি ডেটটাইম ফর্ম্যাট করবে না, ফলে ক্যালেন্ডার রেন্ডারিং ব্যর্থ হতে পারে।
  • স্ট্যান্ডার্ড এডিটরফোলে ডেটটাইমটি ফর্ম্যাট স্ট্রিং হিসাবে প্রদর্শিত হবে (যখন যথাযথ বৈশিষ্ট্যগুলি যেমন সজ্জিত করা হয় [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]তবে এটি আমাকে কাস্টম "তারিখ-চয়নকারী" শ্রেণি প্রয়োগ করতে দেয় না।

অতএব, আমি কাস্টম এইচটিএমএল হেল্পার ক্লাস তৈরি করেছি যার নিম্নলিখিত সুবিধা রয়েছে:

  • পদ্ধতিটি স্বয়ংক্রিয়ভাবে ডেটটাইমকে jQuery ক্যালেন্ডারে প্রয়োজনীয় শর্টডেটস্ট্রিংয়ে রূপান্তর করে (সময় উপস্থিত থাকলে jQuery ব্যর্থ হবে)।
  • ডিফল্টরূপে, সহায়ক একটি jQuery ক্যালেন্ডার প্রদর্শনের জন্য প্রয়োজনীয় htmlAttributes প্রয়োগ করবে, তবে প্রয়োজন হলে সেগুলি ওভাররাইড করা যেতে পারে।
  • তারিখটি বাতিল হলে, এএসপি.এনইটি এমভিসি একটি মান হিসাবে 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());
}

এবং যারা জিকুয়ের সিনট্যাক্সটি জানতে চান যা date-pickerক্লাসের সজ্জা সহ বস্তুগুলি সন্ধান করে তারপরে ক্যালেন্ডারটি রেন্ডার করতে এখানে,

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

এটি আমাকে এখনই সহায়তা করেছে, এটির সামান্য সমস্যা - আপনার মূল্য পরীক্ষা করা দরকার তা পরীক্ষা করে নেওয়া দরকার rib মানচিত্র্যাট্রিবিউট। মূল্যটি ডেটটাইম.পার্স পদ্ধতিতে পাস করার আগে খালি বা শ্বেত স্পেসে নেই, অন্যথায় আপনি একটি ফাঁকা ক্ষেত্রের উপর ফর্ম্যাটেক্সেপশন ঝুঁকিপূর্ণ হওয়ার ঝুঁকিপূর্ণ।
মূ

ধন্যবাদ। আপনি আমাকে অনেক সাহায্য করেছেন।
ব্রোঞ্জাটো

এটি আমাকে সহায়তা করেছিল, তবে আপনি যদি এটি প্রয়োগ করছেন এবং আপনি যদি ক্ষেত্রটি বৈধতা প্রদানের প্রত্যাশা করছেন তবে আপনার এই যুক্তিটি প্রয়োগ করতে হবে: stackoverflow.com/questions/12023970/…
অ্যারন নিউটন

গুড জব, কিন্তু আপনি জানেন না আপনি শুধু ব্যবহার করে একটি তারিখসময় বা শুধু একটি তারিখ নিয়ন্ত্রণ প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে পারেন DateTimePickerForএবং মডেল তারিখ ক্ষেত্র আপনার সাথে প্রতিনিধিত্ব করা হয় আপডেট [DataType(DataType.Date)]বা [DataType(DataType.DateTime)]? আপনি এটিকে মিমি / ডিডি / ইয়ে ফর্মের সাথেও বলতে পারেন .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
@ এইচটিএমএল.এডিটরটির জন্য (x => x.Created, নতুন {cssClass = "তারিখ"}) আমার পক্ষে কাজ করে নি
অ্যালান ম্যাকডোনাল্ড

1
এটি আমার পক্ষে কাজ করেছে এবং চিহ্নিত চিহ্নের চেয়ে উত্তম উত্তর। এটি কোনও টেমপ্লেট ব্যবহারের সুবিধা জোগায়, তবুও jQuery হ্যাক ছাড়া কিছু স্বনির্ধারণের অনুমতি দেয়।
চাদ হেডককক

পাঠ্যবক্সফোর্ড মডেলটিতে সেট করতে পারে এমন অন্যান্য বৈশিষ্ট্যগুলি উপেক্ষা করে যেমন উদাহরণস্বরূপ 'ডেটাটাইপ'স।
মার্কাস

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

ড্রপডাউনলিস্টের জন্য:

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

2

প্রশ্নটি এমভিসি ৩.০ এ লক্ষ্যবস্তু করা হয়েছিল, আমরা দেখতে পেলাম যে সমস্যাটি এমভিসি ৪.০ তেও রয়েছে। এমভিসি 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-*(কৌণিক) এর মতো বৈশিষ্ট্যগুলি যুক্ত করতে সহায়ক হতে পারে ।


1

আপনি ডেটটাইম সিএসটিএমটিএল নামে একটি সাধারণ কাস্টম সম্পাদক তৈরি করে একই আচরণ তৈরি করতে পারবেন, এটি ভিউ / শেয়ার / এডিটরপ্রেমিতে সংরক্ষণ করে

@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


1

আপনার যা প্রয়োজন তা পেতে আমি সিএসএস অ্যাট্রিবিউট সিলেক্টর ব্যবহার করে অন্য একটি সমাধান ব্যবহার করেছি।

আপনি যে এইচটিএমএল বৈশিষ্ট্যটি জানেন সেটিকে ইঙ্গিত করুন এবং আপনি চান এমন আপেক্ষিক স্টাইলে রাখুন।

নীচের মত:

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

1

MVC 4. ব্যবহারের জন্য কাস্টম টেমপ্লেট তৈরি কোন প্রয়োজন নেই করার পাঠ্যবাক্স পরিবর্তে EditFor এখানে বিশেষ HTML বৈশিষ্ট্যাবলী সমর্থিত নয়, এটি শুধুমাত্র MVC 5. পাঠ্যবাক্স থেকে সমর্থিত হয় MVC 4 সমর্থন করা উচিত, আমি অন্য সংস্করণ সম্পর্কে জানি না।

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


0

আমার কেবলমাত্র একটি পৃষ্ঠায় একটি পাঠ্যবক্সের আকার নির্ধারণ করা দরকার। মডেলটিতে কোডিং বৈশিষ্ট্যাবলী এবং কাস্টম সম্পাদক টেম্পলেটগুলি ওভারকিল ছিল, সুতরাং আমি কেবলমাত্র @ এইচটিএমএল.এডিটোরের জন্য একটি স্প্যান ট্যাগ দিয়ে কলটি আবৃত করেছি যা একটি পাঠ্যবাক্সের আকার নির্দিষ্ট করে এমন একটি শ্রেণি বলে।

সিএসএস শ্রেণির ঘোষণা:

.SpaceAvailableSearch input
{
    width:25px;
}

কোড দেখুন:

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

0

@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 এর জন্য কাজ করে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.