Можно ли динамически добавлять правила CSS в элементы управления веб-частей Sharepoint 2010?

Возможно динамическое добавление HTML-элементов в метод CreateChildControls() WebPart, например:

protected override void CreateChildControls()
{
    base.CreateChildControls();
    . . .
    HtmlGenericControl _breakingSpace = new HtmlGenericControl("br");
    this.Controls.Add(_breakingSpace);
}

Можно ли добавить правила CSS программно? Например, я хочу сделать "метки" (LiteralControls) блочными элементами, чтобы можно было установить их значение ширины. Возможно ли что-то вроде следующего псевдокода?

CSSRule displayInlineBlock = new CSSRule("display: inline-block");
CSSRule width20em = new CSSRule("width: 20em");
reqDateStr.ApplyCSSRule(displayInlineBlock);
reqDateStr.ApplyCSSRule(width20em);

?

Я попытался применить эти правила CSS, встроенные в сам элемент управления Literal, следующим образом:

LiteralControl reqDateStr = new LiteralControl("<span class=\"finaff-webform-field-label\" style=\"display: inline-block\"; width:200px\">Requester Date:</span>");

... но это не работает по-другому, чем у меня было раньше, который был:

LiteralControl reqDateStr = new LiteralControl("<span class=\"finaff-webform-field-label\">Requester Date:</span>");

Вы можете увидеть, как выглядит форма здесь

ОБНОВИТЬ

В ответ на запрос ceej относительно того, что генерируется HTML, здесь, прямо из браузера "Show Source" ("inline" есть, но, похоже, не имеет никакого эффекта):

<h1>UCSC - Direct Payment Form</h1>
                    <table>
    <tr>
        <td colspan="4"><h2 class="finaff-webform-field-label">Section 1: Payment Information</h2></td>
        <td colspan="2"><h2 class="finaff-webform-field-label">Section 2: Requester Information</h2></td>
    </tr>
    <tr>
        <td><span class="finaff-webform-field-label" style="display: inline-block"; width:200px">Requester Date:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl11" type="text" value="4/23/2015" class="finaff-webform-field-input" /></td>
        <td><span class="finaff-webform-field-label">Payment Amount:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl14" type="text" class="finaff-webform-field-input" /></td>
        <td><span class="finaff-webform-field-label">Requester Name:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl17" type="text" class="finaff-webform-field-input" /></td>
    </tr>
    <tr>
        <td><span class="finaff-webform-field-label">Payee Name:</span></td>
        <td colspan="3"><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl21" type="text" size="64" class="finaff-webform-field-input" /></td>
        <td><span class="finaff-webform-field-label">Dept / Div Name:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl24" type="text" class="finaff-webform-field-input" /></td>
    </tr>
    <tr>
        <td><span class="finaff-webform-field-label">Remit Address:</span></td>
        <td colspan="3"><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl28" type="text" size="64" class="finaff-webform-field-input" /></td>
        <td><span class="finaff-webform-field-label">Phone:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl31" type="text" class="finaff-webform-field-input" /></td>
    </tr>
    <tr height="2em">
        <td><span class="finaff-webform-field-label">&nbsp;&nbsp;&nbsp;OR</span></td>
    </tr>
    <tr>
        <td><span class="finaff-webform-field-label">Mail Stop:</span></td>
        <td colspan="3"><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl37" type="text" size="64" class="finaff-webform-field-input" /></td>
        <td><span class="finaff-webform-field-label">Email:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl40" type="text" class="finaff-webform-field-input" /></td>
    </tr>
    <tr>
        <td><span class="finaff-webform-field-label">Last 4 Digits SSN or ITIN:</span></td>
        <td><input name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl44" type="text" class="finaff-webform-field-input" /></td>
    </tr>
    <tr>
        <td colspan="5"><input id="ctl00_ctl24_g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c_ctl47" type="checkbox" name="ctl00$ctl24$g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c$ctl47" /><label for="ctl00_ctl24_g_5f7ce2fb_5653_4cc9_b9b8_b00ee0d0910c_ctl47"><span class="finaff-webform-field-label">204 submitted or on file. <strong>NOTE:</strong> If not on file, complete a <a href="https://financial.ucsc.edu/Financial_Affairs_Forms/Payee_Setup_204.pdf" target="_blank">Payee_Setup_204</a></span></label></td>
    </tr>
</table>

1 ответ

Решение

Это должно быть возможно. Что такое сгенерированный HTML, который производится? Действительно ли встроенный стиль выводится? HTML искажен?

Я думаю, что это может быть так же просто, как неправильно указать стиль в вашей строке, который применяет встроенные стили в конструкторе LiteralControl. Вы закрываете стиль после inline-block - это не должно быть `style=\"display: inline-block; width:200px\? Это сделало бы полную строку

LiteralControl reqDateStr = new LiteralControl("<span class=\"finaff-webform-field-label\" style=\"display: inline-block; width:200px\">Requester Date:</span>");

Конечно, вы можете добавить динамические элементы управления в веб-части, и это должно быть сделано в CreateChildControls метод. Лично я бы использовал LiteralControl а не HtmlGenericControl для размещения статического текста или разметки, таких как <br> на странице.

Что касается CSS и стилей - большинство веб-элементов управления имеют CssClass собственность и Style имущество. Тем не менее, контроль, который вы выбрали (LiteralControl) не. Рассматривали ли вы использование Label контроль? Это создаст <span> и вы можете установить Style имущество. Вы бы что-то вроде

var reqDateStr = new Label 
    {
        CssClass= "finaff-webform-field-label",
        Text = "Requester Date:"
    };
reqDateStr.Style.Add("display", "inline-block");
reqDateStr.Style.Add("width", "200px");
this.Controls.Add(reqDateStr);

Вы даже можете установить AssociatedControlId свойство, которое приведет к <label for="textboxId"> будучи выходом. Значение должно быть идентификатором элемента управления вводом, например, вашего текстового поля. Это может быть желательно в вашем сценарии.

Надеюсь это поможет...

Другие вопросы по тегам