ASP.NET MVC रेजर: HTML में सशर्त विशेषता


84

नीचे कोड साफ नहीं लगता है। कोड सुधारने के लिए कोई सुझाव?

<li @if(ViewData["pagename"].ToString()=="Business details"){ <text>class="active" </text> } >
        <a  @if(ViewData["pagename"].ToString()=="Business details"){ <text>style="color: white; background-color: #08C; border: 1px solid #08C;" </text> }
            href="@Url.Action("BusinessDetails", "Business")">Business Details</a>
    </li> 
    <li @if (ViewData["pagename"].ToString() == "Booking policies"){ <text>class="active"</text> }> 
        <a  @if (ViewData["pagename"].ToString() == "Booking policies")
               { <text>style="color: white; background-color: #08C; border: 1px solid #08C;" </text> }
            href="@Url.Action("BookingPolicies", "Business")">Booking policies</a> 
    </li> 

शायद एक कस्टम HTML हेल्पर बनाना जो चाइल्ड लिंक तत्वों के साथ LI को प्रस्तुत करेगा?
निक बोर्क

जवाबों:


146

MVC में सशर्त विशेषताएँ निर्मित हैं ...

<div @{if (myClass != null) { <text>class="@myClass"</text> } }>Content</div>
<div class="@myClass">Content</div>

अगर @myClass शून्य है, तो यह केवल विशेषता का उपयोग नहीं करेगा ...

मुझे पता है कि आपके वर्तमान मुद्दे को काफी हल नहीं किया जा सकता है, लेकिन यह उल्लेखनीय है!

http://weblogs.asp.net/jgalloway/archive/2012/02/16/asp-net-4-beta-released.aspx


सावधान रहें कि आपके वर्ग का नाम 'सक्रिय' नहीं है या आपके पास एक प्रवेश कक्षा विशेषता होगी। पता नहीं क्यों।
स्कॉटिश

3
अनाम htmlPropertiesऑब्जेक्ट पास करने वाले html सहायकों को कॉल करते समय समान अशक्त व्यवहार प्राप्त करने का एक तरीका है ? उदाहरण के लिए, मैं सशर्त रूप से विशेषता को पास करना चाहता हूं disabled, जैसे @Html.TextBoxFor(lambda, new { disabled = condition ? true : null }), लेकिन वह disabled=""तब भी प्रतिपादन करता है जब disabledवह था null, जो प्रतिपादन के समान है disabled="anything"क्योंकि disabledसक्रिय है जब विशेषता मौजूद है, मूल्य की परवाह किए बिना। इस विषय पर stackoverflow.com/q/7978137/11683 मिला है , लेकिन क्या आजकल मेरे बेहतर तरीके हैं?
GSerg

1
साइड नोट: "डेटा -..." विशेषताएँ सशर्त नहीं हो सकती हैं और शून्य के लिए भी खाली मूल्य प्रदान कर सकती हैं ( stackoverflow.com/questions/13267619/… )
अलेक्सई लेवेनकोव

76
<li class="@(ViewBag.pagename == "Business details" ? "active" : null)">  

आपको style="..."एक अलग वर्गनाम के साथ इनलाइन को बदलना चाहिए और उसी सिंटैक्स का उपयोग करना चाहिए ।

हालाँकि, यह एक अलग HTML सहायक विस्तार विधि बनाने के लिए क्लीनर होगा जो पेज और एक्शन नाम लेता है और HTML को उदारता से उत्पन्न करता है।


1
अन्य विकल्पों (रेजर 2.0 विकल्प के अलावा) की तुलना में बहुत अच्छा है।
ctrlplusb

21

मैं एक छोटी सहायक विधि का उपयोग करता हूं जो सशर्त रूप से एक विशेषता जोड़ देगा यदि मूल्य गैर-खाली है, और, यदि परिभाषित किया जाता है, जब एक बूलियन फ़ंक्शन अभिव्यक्ति का मूल्यांकन करता है true:

public static MvcHtmlString Attr(this HtmlHelper helper, string name, string value, Func<bool> condition = null)
{
    if (string.IsNullOrEmpty(name) || string.IsNullOrEmpty(value))
    {
        return MvcHtmlString.Empty;
    }

    var render = condition != null ? condition() : true;

    return render ? 
        new MvcHtmlString(string.Format("{0}=\"{1}\"", name, HttpUtility.HtmlAttributeEncode(value))) : 
        MvcHtmlString.Empty;
}

एक बार परिभाषित करने के बाद, मैं अपने रेजर विचारों में इस पद्धति का उपयोग कर सकता हूं:

<li @(Html.Attr("class", "new", () => example.isNew))>
...
</li>

उपरोक्त कोड प्रस्तुत करना होगा <li class="new">...</li>अगर example.isNew == true, अगर पूरे नहीं छोड़ जाएगा classविशेषता।


1
बहुत सुंदर तरीका है कि करने के लिए। लेकिन Func<bool>लैम्ब्डा के बजाय , मैं एक साधारण bool?पैरामीटर पसंद करूंगा , क्योंकि यह सरल है:<li @Html.Attr("class", "new", example.isNew)>
टी-मोटी

मुझे यह दृष्टिकोण पसंद है क्योंकि मेरे ऐप में बहुत सारे कस्टम जावास्क्रिप्ट अभी भी चलेंगे जब विशेषता नाम अभी भी है। और कम से कम यह आपको विशेषता अंतर के कारण एक ही div को दोहराने नहीं देता है। धन्यवाद!
बेन सीवार्ड्स


0

TagWrap विस्तार विधि के साथ दृष्टिकोण। आपके प्रश्न के लिए कोड इस तरह दिखेगा:

@using (Html.TagWrap("li", condition ? new { @class = "active" } : null))
{
    var anchorAttrs = new Dictionary<string, object> { { "href", Url.Action("BusinessDetails", "Business") } };
    if(condition)
    {
        anchorAttrs["style"] = "color: white; background-color: #08C; border: 1px solid #08C;";
    }
    using (Html.TagWrap("a", anchorAttrs))
    {
        <text>Business Details</text>
    }
}

TagWrap विस्तार के तरीके

Microsoft.AspNetCore.Mvc.ViewFeatures का उपयोग करना;

public static IDisposable TagWrap(this IHtmlHelper htmlHelper, string tagName, object data)
{
    return htmlHelper.TagWrap(tagName, HtmlHelper.AnonymousObjectToHtmlAttributes(data));
}

public static IDisposable TagWrap(this IHtmlHelper htmlHelper, string tagName, IDictionary<string, object> data)
{
    var tag = new TagBuilder(tagName);
    tag.MergeAttributes(data);

    htmlHelper.ViewContext.Writer.Write(tag.RenderStartTag());

    return new DisposableAction(() =>
        htmlHelper.ViewContext.Writer.Write(tag.RenderEndTag()));
}

डिस्पोज़ पर समापन टैग प्रदान करने के लिए हेल्पर वर्ग का उपयोग किया जाता है

public class DisposableAction : IDisposable
{
    private readonly Action DisposeAction;

    public DisposableAction(Action action)
    {
        DisposeAction = action;
    }

    public void Dispose()
    {
        DisposeAction();
    }
}

0

डीफ्रॉस्ट के आधार पर यहां एक अनुकूलन का उत्तर दिया गया objectहै string:

    public static MvcHtmlString ConditionalAttr(this HtmlHelper helper, string attributeName, object value, Func<bool> condition)
    {
        if (string.IsNullOrEmpty(attributeName) || value == null)
        {
            return MvcHtmlString.Empty;
        }

        var render = condition != null ? condition() : true;

        return render ? 
            new MvcHtmlString($"{attributeName}=\"{HttpUtility.HtmlAttributeEncode(value.ToString())}\"") : 
            MvcHtmlString.Empty;
    }

इस तरह से आपको अपने अन्य डेटाटाइप्स को उन्हें पास करने से पहले मोड़ना नहीं पड़ता है, जिससे fiew की बचत होती है .ToString()वहाँ एक अंतर है : खाली स्ट्रिंग पास करना अभी भी प्रस्तुत करना होगा। उदाहरण के रूप में:

@Html.ConditionalAttr("data-foo", "", () => Model.IsFooNeeded)

// Ouput:
data-foo=""

0
@{ var classAttr= needClass ? "class=\"class-name\"" : "" }

और फिर HTML में

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