রেজার এমভিসি 4 এ শর্তসাপেক্ষ মান সহ দ্বিতীয় সিএসএস ক্লাস কীভাবে যুক্ত করবেন

149

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

একটি মডেল সম্পত্তি @ মডেলের উপর ভিত্তি করে। বিশদগুলি, আমি একটি তালিকা আইটেমটি প্রদর্শন করতে বা আড়াল করতে চাই। যদি বিশদ থাকে, একটি ডিভি প্রদর্শিত হবে, অন্যথায়, এটি লুকানো উচিত। JQuery ব্যবহার করে, আমাকে যা করতে হবে তা হ'ল যথাক্রমে একটি ক্লাস শো বা লুকানো। অন্যান্য উদ্দেশ্যে, আমি আরও একটি ক্লাস, "বিশদ" যুক্ত করতে চাই। সুতরাং, আমার চিহ্ন আপটি হওয়া উচিত:

<div class="details show">[Details]</div> অথবা <div class="details hide">[Details]</div>

নীচে, আমি কিছু ব্যর্থ প্রচেষ্টা দেখিয়েছি (কোনও বিবরণ নেই বলে ধরে নিরূপিত মার্ক-আপ)।

এই: <div @(@Model.Details.Count > 0 ? "class=details show" : "class=details hide")>,

এই রেন্ডার হবে: <div class="details" hide="">।

এই: <div @(@Model.Details.Count > 0 ? "class=\"details show\"" : "class=\"details hide\"")>।

এই রেন্ডার হবে: <div class=""details" hide"="">।

এই: <div @(@Model.Details.Count > 0 ? "class='details show'" : "class='details hide'")>

এই রেন্ডার হবে: <div class="'details" hide'="">।

এগুলির কোনওটিই সঠিক মার্ক আপ নয়।

razor asp.net-mvc-4 html

— আর। শেরুরস
সূত্র

আপনি যদি এমভিসিএইচটিএমএল স্ট্রিংয়ের একটি নতুন উদাহরণে আবৃত হন বা এইচটিএমএল.রা ব্যবহার করেন

— কাইল

301

আমি বিশ্বাস করি যে এখনও দেখা যেতে পারে এবং বৈধ যুক্তি থাকতে পারে। তবে এই জাতীয় জিনিসের জন্য আমি @ বিগমাইকের সাথে একমত, এটি আরও ভালভাবে মডেলটিতে রাখা হয়েছে। সমস্যাটি তিন উপায়ে সমাধান করা যেতে পারে তা বলে:

আপনার উত্তর (এই কাজগুলি ধরে ধরে, আমি এটি চেষ্টা করি নি):

<div class="details @(@Model.Details.Count > 0 ? "show" : "hide")">

দ্বিতীয় বিকল্প:

@if (Model.Details.Count > 0) {
    <div class="details show">
}
else {
    <div class="details hide">
}

তৃতীয় বিকল্প:

<div class="@("details " + (Model.Details.Count>0 ? "show" : "hide"))">

— von v।
সূত্র

2

আমি এটি উত্তর হিসাবে গ্রহণ করেছি, যেহেতু এটি আমার চেয়ে বেশি বিকল্প সরবরাহ করে।

— আর শেরুর্স

18

দ্বিতীয় বিকল্পটি ত্রুটির কারণ ঘটায়The "div" element was not closed

— ইন্ট্রিপিডিস

6

অবশ্যই এটি এখানে যা লেখা আছে তা সম্পূর্ণ কোড নয় বরং প্রশ্নে থাকা কোডের অংশ। ডিভিডিতে আরও কতগুলি উপাদান রয়েছে কে জানে;)

— ভন বনাম

আমার পক্ষে কাজ করেনি। আমি এই ত্রুটিটি পেয়েছি

'ClubsModel' does not contain a definition for 'ClubsFilter' and no extension method 'ClubsFilter' accepting a first argument of type 'ClubsModel' could be found (are you missing a using directive or an assembly reference?)

— মার্টিন এরলিক

আপনার সমস্যা কীভাবে পোস্ট করা প্রশ্নের সাথে সম্পর্কিত?

— ভন বনাম

69

এই:

    <div class="details @(Model.Details.Count > 0 ? "show" : "hide")">

এটি রেন্ডার করবে:

    <div class="details hide">

এবং আমি চাই মার্ক আপ।

— আর। শেরুরস
সূত্র

1

আমি ভিউগুলিতে যুক্তিযুক্ত হওয়া পছন্দ করি না, এমনকি এটি যদি তুচ্ছ যুক্তিযুক্ত হয় তবে আমি getDetailClass () পদ্ধতিতে মডেলভিউ অবজেক্টটি ব্যবহার করতে পছন্দ করি।

— বিগমাইক

29

ব্যক্তিগতভাবে আমি তুচ্ছ যুক্তি পছন্দ করি, একটি getDetailCssClass পদ্ধতি থাকার অর্থ আপনার মডেলটি আপনার দৃষ্টিভঙ্গি সম্পর্কে সচেতন এবং বিমূর্ততাটি ভেঙে দেয়। ভিউটিতে প্রয়োজনীয় যুক্তি কমাতে আমি মডেলটিতে একটি হ্যাসডিটেলস পদ্ধতি যুক্ত করব, তারপরে সিএসএস শ্রেণির যুক্তিকে ভিউতে রেখে দিন, এর অর্থ আপনাকে ভিউটি লিটারে ফেলতে হবে না @Model.Details.Count > 0। উদাহরণস্বরূপ<div class="details @(@Model.HasDetails ? "show" : "hide")">

— ক্রিস ডুবুরি

26

আপনি নীচে আপনার মডেলটিতে সম্পত্তি যুক্ত করতে পারেন:

    public string DetailsClass { get { return Details.Count > 0 ? "show" : "hide" } }

এবং তারপরে আপনার দর্শন সহজ হবে এবং এতে কোনও যুক্তি থাকবে না:

    <div class="details @Model.DetailsClass"/>

এটি এমনকি অনেক ক্লাসের সাথেও কাজ করবে এবং এটি শূন্য হলে শ্রেণি সরবরাহ করবে না:

    <div class="@Model.Class1 @Model.Class2"/>

2 টি নাল নয় এমন বৈশিষ্ট্য সহ রেন্ডার হবে:

    <div class="class1 class2"/>

ক্লাস 1 যদি নাল হয়

    <div class=" class2"/>

— syned
সূত্র

11

আমি মনে করি সিএসএস ক্লাসের মতো দর্শনকে জিনিস সংজ্ঞায়িত করা আরও ভাল। মনে রাখবেন যে ভিউ

— মডেলটিকে

1

যদিও আমি রেড্ডির সাথে সাধারণভাবে একমত, এমন কিছু মামলাও থাকতে পারে যেখানে সিনড বলার পদ্ধতিতে এটি করা ন্যায়সঙ্গত হতে পারে। আমি ঠিক ঠিক এর মতো করেছিলাম। আমার ক্ষেত্রে আমি ভিউর মডেল অবজেক্টটির উপর নির্ভর করে ভিউ রেন্ডার করার জন্য তথ্যে পূর্ণ, এটি কেবল কোনও ডেটা অবজেক্ট নয়।

— গনজালো মান্দেজ

1

2 টির বেশি ফলাফল থাকলে আমি এটি এটি ব্যবহার করব use উদাহরণস্বরূপ 5 সম্ভাব্য ক্লাসের জন্য। এটিকে দেখার পক্ষে অগোছালো মনে হবে।

— মাতেউজ মিগিয়ানা

1

দৃশ্যটি সঠিক জায়গা। এটিকে কোনও কোড ব্লকে পরিবর্তনশীল অ্যাসাইনমেন্ট হিসাবে সুন্দরভাবে ফর্ম্যাট করুন এবং এটি অগোছালো হবে না।

— টম ব্লডজেট

3

শর্তের ভিত্তিতে দ্বিতীয় শ্রেণি যুক্ত করতে আপনি স্ট্রিং.ফর্ম্যাট ফাংশনটি ব্যবহার করতে পারেন:

<div class="@String.Format("details {0}", Details.Count > 0 ? "show" : "hide")">

— চেতন গাওনকার
সূত্র