CSS 规则可以动态添加到 Sharepoint 2010 Web 部件控件吗？

Posted 2023-03-27

【中文标题】CSS 规则可以动态添加到 Sharepoint 2010 Web 部件控件吗？

【英文标题】：Can CSS rules be dynamically added to Sharepoint 2010 Web Part Controls?

【发布时间】：2015-06-30 20:47:03

【问题描述】：

可以在 WebPart 的 CreateChildControls() 方法中动态添加 html 元素，如下所示：

protected override void CreateChildControls()

    base.CreateChildControls();
    . . .
    HtmlGenericControl _breakingSpace = new HtmlGenericControl("br");
    this.Controls.Add(_breakingSpace);

是否也可以通过编程方式添加 CSS 规则？例如，我想制作“标签”（LiteralControls）块元素，以便可以设置它们的宽度值。类似下面的伪代码是可能的吗？

Cs-s-rule displayInlineBlock = new Cs-s-rule("display: inline-block");
Cs-s-rule width20em = new Cs-s-rule("width: 20em");
reqDateStr.ApplyCs-s-rule(displayInlineBlock);
reqDateStr.ApplyCs-s-rule(width20em);

?

我尝试将这些 CSS 规则内联应用到 Literal Control 本身，如下所示：

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

您可以看到表单的外观here

更新

为了回答 ceej 关于生成什么 HTML 的询问，这里是，直接来自浏览器的“显示源代码”（“内联”在那里，但似乎没有效果）：

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

您当然可以在 Web 部件中添加动态控件，并且应该在 CreateChildControls 方法中完成。我个人会使用LiteralControl 而不是HtmlGenericControl 在页面上放置静态文本或标记，例如<br>。

至于 CSS 和样式 - 大多数 Web 控件都有一个 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"> 被输出。该值应该是输入控件的 Id，例如你的文本框。这在您的场景中可能是可取的。

希望这会有所帮助...

【讨论】：

我回答了您关于更新中生成的 HTML 是什么的问题。

至于 LiteralControl 而不是 HtmlGenericControl，这是我的第一次尝试： //this.Controls.Add(new LiteralControl("")); //

至于你给出的最后一个例子，那不会飞，因为我得到，“不能将属性或索引器'样式'分配给——它是只读的”

多哈。忘记了 style 属性是样式的集合。已更正我的答案，显示如何分配键值对。感谢您指出这一点！

至于 LiteralControl，您可以尝试将 Mode 属性设置为 PassThrough？