创建一个自定义用户控件，使用我给它的 ID 并尊重 ClientIDMode="Static"答案

【问题标题】：Create a Custom User Control that Uses the ID I give it and honors ClientIDMode="Static"创建一个自定义用户控件，使用我给它的 ID 并尊重 ClientIDMode="Static"
【发布时间】：2018-08-10 18:38:18
【问题描述】：

我在 C# 中为我的 Web 应用程序构建了一些自定义控件。我也在使用 Visual Studio 2013。

控制：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="YearsTextBox.ascx.cs" Inherits="MutualExpert.Controls.YearsTextBox"  %>
<div class="input-group">
    <asp:TextBox ID="tb" runat="server" CssClass="form-control text-right" />
    <div class="input-group-addon">Years</div>
</div>

从我想使用它的 ASPX 页面调用它：

<cc:YearsTextBox runat="server" ID="tbDamageLife" />

我希望控件在页面上呈现为“tbDamageLife”

我尝试了什么：

如果我指定 ClientIDMode="Static" 则我得到 ID="tb" ：

<div class="input-group">
    <input name="ctl00$cpMain$tbDamageLife$tb" id="tb" class="form-control text-right" type="text">
    <div class="input-group-addon">Years</div>
</div>

如果我不这样做，我会得到 ID="ctl00_cpMain_tbDamageLife_tb" ：

<div class="input-group">
    <input name="ctl00$cpMain$tbDamageLife$tb" id="ctl00_cpMain_tbDamageLife_tb" class="form-control text-right" type="text">
    <div class="input-group-addon">Years</div>
</div>

我只想让它渲染 tbDamageLife，我给它的 ID。

这是一个棘手的问题，我需要这些是静态的，以便 JS 访问它来进行计算。有必要。如果可以的话，我会解决它，但我根本做不到。

【问题讨论】：

我正在输出多个收集“年”的控件，因此如果它们都出现“tb”（密钥已存在），则存在一个明显的问题

标签： javascript html jquery asp.net webusercontrol

【解决方案1】：

UserControl 本身在 html 中没有 ID，只有在代码中。因此，在您的情况下，最好的解决方案是将 UserControl 内容包装在 Panel 中并提供 ID tbDamageLife。这将成为带有 input-group 类的 <div>。

<asp:Panel ID="tbDamageLife" runat="server" CssClass="input-group">
    <asp:TextBox ID="tb" runat="server" CssClass="form-control text-right" />
    <div class="input-group-addon">Years</div>
</asp:Panel>

在父页面上

<cc:YearsTextBox runat="server" ID="tbDamageLife" ClientIDMode="Static" />

将呈现为

<div id="tbDamageLife" class="input-group">
    <input name="ctl00$cpMain$tbDamageLife$tb" type="text" id="tb" class="form-control text-right" />
    <div class="input-group-addon">Years</div>
</div>

但是，如果您应该添加多个控件，则会有重复的 ID。

如果您不需要 Panel Control 的功能，您也可以简单地执行以下操作。

<div id="tbDamageLife" class="input-group">
    <asp:TextBox ID="tb" runat="server" CssClass="form-control text-right" />
    <div class="input-group-addon">Years</div>
</div>

【讨论】：

这可以工作，但添加了 JS 代码，这些代码必须编写才能找到面板的子级，并且在引导表单格式化策略的所有情况下每次都不会总是 100% 工作相同的JS。感谢您的回答！

【解决方案2】：

用户控件充当“占位符”，并在呈现调用页面时替换为其实际内容：

<form method="post" id="form1">
    <div class="input-group">
        <input name="tbDamageLife$tb" type="text" id="tbDamageLife_tb" class="form-control text-right">
        <div class="input-group-addon">Years</div>
    </div>
</form>

在上面的例子中，注意没有tbDamageLife id的元素。相反，用户控件 id 用于为包含的TextBox（呈现）生成唯一标识。所以，这是非常标准的行为，也是正确的行为。

不过，您可以使用 ClientID 从 javascript 访问用户控件的 TextBox，例如：

<form id="form1" runat="server">
    <div>
        <uc:YearsTextBox runat="server" ID="tbDamageLife" />
        <input type="button" value="OK" onclick="btnOK_Click()" />
    </div>
</form>
<script type="text/javascript">
    function btnOK_Click() {
        var ucTb = document.getElementById('<%= tbDamageLife.FindControl("tb").ClientID %>');

        console.log(ucTb.value);
    }
</script>

恕我直言，这是“最安全”的方式，这意味着您实际上使用的是服务器代码中的tbDamageLife id，确实知道。

【讨论】：

这可以正常工作，但最终会添加更多的 JS，并且会让我不得不创建全局变量以从脚本访问 ClientID（而不是将 js 内联到 HTML）。这不会无缝扩展。

【解决方案3】：

我和团队找到了另一种方法，最终在 HTML 和 JS 方面的代码少了很多，恕我直言，团队更容易记住和使用。

简单来说，添加一个 CSS 类名。示例：

<cc:YearsTextBox runat="server" ID="tbDamageLife" CssClass="tbDamageLife" />

在用户控件中：

    /// <summary>
    /// Gets or sets Class
    /// </summary>
    public string CssClass
    {
        get { return tb.CssClass; }
        set
        {
            // we need to make sure that form-control is always part of the Class
            if (value.Contains("form-control"))
                tb.CssClass = value;
            else
                tb.CssClass += " " + value;
        }
    }

在 JS 中：

    case _ui.newlevel.select:
        $(".tbDamageLife").removeAttr("disabled");

【讨论】：