Question

我有一些自定义控件，这些控件是我为Web App用C＃内置的。我也在使用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>

我只希望它呈现我给它的ID tbDamageLife。

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

Answer 1

UserControl本身在html中没有ID，仅在代码中没有ID。因此，根据您的情况，最好的解决方案是将UserControl内容包装在Panel中，并赋予ID tbDamageLife。这将成为类<div>的{{1}}。

input-group

在父页面上

<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" />

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

或者，如果不需要面板控件的功能，则可以简单地执行以下操作。

<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>

Answer 2

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

(pd.melt(df.assign(w = df['wk start']+pd.DateOffset(6)),df.columns[1:],value_name =
  "wk start").drop('variable',1).set_index('wk start').groupby('car').resample('D').pad())


                                    car  sales
car           wk start                        
tesla model 3 2018-08-12  tesla model 3  38000
              2018-08-13  tesla model 3  38000
              2018-08-14  tesla model 3  38000
              2018-08-15  tesla model 3  38000
              2018-08-16  tesla model 3  38000
              2018-08-17  tesla model 3  38000
              2018-08-18  tesla model 3  38000
              2018-08-19  tesla model 3  40000
              2018-08-20  tesla model 3  40000
              2018-08-21  tesla model 3  40000
              2018-08-22  tesla model 3  40000
              2018-08-23  tesla model 3  40000
              2018-08-24  tesla model 3  40000
              2018-08-25  tesla model 3  40000
tesla model x 2018-08-12  tesla model x  98000
              2018-08-13  tesla model x  98000
              2018-08-14  tesla model x  98000
              2018-08-15  tesla model x  98000
              2018-08-16  tesla model x  98000
              2018-08-17  tesla model x  98000
              2018-08-18  tesla model x  98000

在上面的示例中，请注意没有ID为<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>的元素。而是，用户控件id用于为包含的tbDamageLife（呈现）生成唯一标识。因此，这是非常标准的行为，也是正确的行为。

尽管如此，您仍可以使用TextBox从javascript访问用户控件的TextBox，例如：

ClientID

恕我直言，这是最安全的方式，这意味着您实际上是在使用服务器代码中的<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> ID，而服务器代码对此却不为人所知。

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

创建一个使用我提供的ID并使用ClientIDMode =“ Static”

3 个答案: