web-dev-qa-db-ja.com

cssクラスをhtmlジェネリックコントロールdivに追加する方法は？

次のようなdivタグを作成しました。

System.Web.UI.HtmlControls.HtmlGenericControl dynDiv = 
    new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");

次のようにdivタグにスタイルを追加しました：

dynDiv.Style.Add(HtmlTextWriterStyle.BorderStyle, "1px solid #DBE0E4");
dynDiv.Style.Add(HtmlTextWriterStyle.Height, "auto");
dynDiv.Style.Add(HtmlTextWriterStyle.MarginTop, "5px");
dynDiv.Style.Add(HtmlTextWriterStyle.PaddingBottom, "5px");
dynDiv.Style.Add(HtmlTextWriterStyle.Width, "682px");

しかし、フォルダー~/css/maincss.cssにある外部cssファイルを介してdivタグのスタイルを制御する必要があります。

そのファイルのCSSをこのdivに適用するにはどうすればよいですか？

c#css
63
beeshma
dynDiv.Attributes["class"] = "myCssClass";
80
Curt

HtmlGenericControlの方法で生成されたdivにクラスを追加するには、次を使用できます。

div1.Attributes.Add("class", "classname");

Panelオプションを使用している場合、次のようになります。

panel1.CssClass = "classname";
37
sudhakar m

要素のクラスの既存のリストにクラスを追加する場合：

element.Attributes.Add("class", element.Attributes["class"] + " " + sType);
11
Fabio Napodano

私のアプローチは：

/// <summary>
/// Appends CSS Class seprated by a space character
/// </summary>
/// <param name="control">Target control</param>
/// <param name="cssClass">CSS class name to append</param>
public static void AppendCss(HtmlGenericControl control, string cssClass)
{
    // Ensure CSS class is definied
    if (string.IsNullOrEmpty(cssClass)) return;

    // Append CSS class
    if (string.IsNullOrEmpty(control.Attributes["class"]))
    {
        // Set our CSS Class as only one
        control.Attributes["class"] = cssClass;
    }
    else
    {
        // Append new CSS class with space as seprator
        control.Attributes["class"] += (" " + cssClass);
    }
}
6
Amit Bhagat

Curtの答えは正しいと思いますが、ASP.NETコードで宣言されたクラスが既にあるdivにクラスを追加する場合はどうでしょう。

これは私の解決策です。これは汎用メソッドなので、これを直接呼び出すことができます：

Asp Net Divの宣言：

<div id="divButtonWrapper" runat="server" class="text-center smallbutton fixPad">

クラスを追加するコード：

divButtonWrapper.AddClassToHtmlControl("nameOfYourCssClass")

ジェネリッククラス：

public static class HtmlGenericControlExtensions
{
    public static void AddClassToHtmlControl(this HtmlGenericControl htmlGenericControl, string className)
    {
        if (string.IsNullOrWhiteSpace(className))
            return;

        htmlGenericControl
            .Attributes.Add("class", string.Join(" ", htmlGenericControl
            .Attributes["class"]
            .Split(' ')
            .Except(new[] { "", className })
            .Concat(new[] { className })
            .ToArray()));
    }
}
4
Andrés Villenas

これを繰り返す場合は、拡張メソッドを使用することもできます。

// appends a string class to the html controls class attribute
public static void AddClass(this HtmlControl control, string newClass)
{
    if (control.Attributes["class"].IsNotNullAndNotEmpty())
    {
        control.Attributes["class"] += " " + newClass;
    }
    else
    {
        control.Attributes["class"] = newClass;
    }
}
3
Ben Sewards

Cssファイルをdivに追加するのではなく、クラスを追加し、次のようにHTMLページの上部にインポートを配置します。

<link href="../files/external.css" rel="stylesheet" type="text/css" />

次に、次のようなクラスをコードに追加します： 'myStyle'。

次に、cssファイルで次のようにします。

.myStyle
{
   border-style: 1px solid #DBE0E4;
}
2
Chris

拡張方法はどうですか？

ここに、showまたはhideメソッドがあります。 CSSクラスの使用hidden。

public static class HtmlControlExtensions
{
    public static void Hide(this HtmlControl ctrl)
    {
        if (!string.IsNullOrEmpty(ctrl.Attributes["class"]))
        {
            if (!ctrl.Attributes["class"].Contains("hidden"))
                ctrl.Attributes.Add("class", ctrl.Attributes["class"] + " hidden");
        }
        else
        {
            ctrl.Attributes.Add("class", "hidden");
        }
    }

    public static void Show(this HtmlControl ctrl)
    {
        if (!string.IsNullOrEmpty(ctrl.Attributes["class"]))
            if (ctrl.Attributes["class"].Contains("hidden"))
                ctrl.Attributes.Add("class", ctrl.Attributes["class"].Replace("hidden", ""));
    }
}

次に、コントロールを表示または非表示にする場合：

myUserControl.Hide();

//... some other code

myUserControl.Show();
1
GregoryBrad

要素のクラスの既存のリストにクラスを追加する場合の代替アプローチ：

element.Attributes["class"] += " myCssClass";
1
Rithin Chalumuri