带有模板的用户控件，更改服务器控件呈现的 ID

Question

TL;DR...

使用一次性模板创建[UserControl] 时，是否可以将服务器端控件放置在这些模板中以呈现它们的id 没有 UserControl 或容器ID？

---

在我的 ASP.NET Web 应用程序中，我创建了一个带有多个一次性模板的 UserControl（我在这里只给出了其中一个模板的代码）...

Public Class MyUserCtrl
    Inherits System.Web.UI.UserControl

    Private Class MyUserCtrlLiteralContainer
        Inherits Control
        Implements INamingContainer
    End Class

    <TemplateContainer(GetType(MyUserCtrlLiteralContainer)),
     TemplateInstance(TemplateInstance.Single),
     PersistenceMode(PersistenceMode.InnerProperty)>
    Public Property FirstTemplate As ITemplate

    Private Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Init
        If FirstTemplate IsNot Nothing Then
            Dim container As New MyUserCtrlLiteralContainer()
            FirstTemplate.InstantiateIn(container)
            plhFirst.Controls.Add(container)
        End If
    End Sub
End Class    

（注意，plhFirst 是标记中的<asp:PlaceHolder>）

这是在页面中使用的控件示例（由Master 页面控制）...

<asp:Content runat="server" ID="content" ContentPlaceHolderID="mainContent">
  <uc1:MyUserCtrl runat="server" id="muc1">
    <FirstTemplate>
      <asp:Button runat="server" id="btnMyButton" />
    </FirstTemplate>
  </uc1:MyUserCtrl>
</asp:Content>

当<asp:Button>被渲染到HTML时，元素的id会导致...

id="ctl00_content_muc1_ctl00_btnMyButton"

...其中第二个ctl00 是MyUserCtrlLiteralContainer 实例的ID。

---

有没有办法让控件的id呈现如下？ （所以不使用容器的ID）

ctl00_content_muc1_btnMyButton

或者更好的是，有没有办法让控件的id呈现如下？ （所以既不使用用户控件的ID，也不使用容器的ID）

ctl00_content_btnMyButton

或者，是否有不同的方法来实例化 UserControl 中的控件，这会导致上述任何一种情况？

Answer 1

我不相信您能够让 ID 看起来像您希望的那样，因为它们旨在显示控制层次结构，尽管它们很丑。

您可以，但是如果您愿意，可以在控件、页面或整个项目上使用静态 ID。查看 2010 年的这篇方便的 ScottGu 文章：

https://weblogs.asp.net/scottgu/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series

您要查找的部分是Today’s Cleaner Markup Topic: Client IDs

Answer 2

按钮id 包括muc1 和ctl00，因为UserControl 和MyUserCtrlLiteralContainer 实现了INamingContainer。如果您不希望 id 包含这些部分，但您确实希望 id 包含其他祖先 ID，那么您不能使用这些控件类型。

删除ctl00： 除非您特别需要自定义容器控件，否则可以删除 MyUserCtrlLiteralContainer 并直接在 PlaceHolder 中实例化模板。

删除muc1：您必须将您的 UserControl 重写为不实现 INamingContainer 的服务器控件。

这是一个示例实现：

<ParseChildren(True)>
Public Class MyUserCtrl
    Inherits Control

    Private plhFirst As PlaceHolder

    <TemplateInstance(TemplateInstance.Single),
     PersistenceMode(PersistenceMode.InnerProperty)>
    Public Property FirstTemplate As ITemplate

    Private Sub Page_Init(sender As Object, e As EventArgs) Handles MyBase.Init
        plhFirst = New PlaceHolder()
        Controls.Add(plhFirst)

        If FirstTemplate IsNot Nothing Then
            FirstTemplate.InstantiateIn(plhFirst)
        End If
    End Sub

    Protected Overrides Sub Render(writer As HtmlTextWriter)
        ' <div class="myUserCtrl">
        writer.AddAttribute(HtmlTextWriterAttribute.Class, "myUserCtrl")
        writer.RenderBeginTag(HtmlTextWriterTag.Div)

        ' <div class="firstControls">
        writer.AddAttribute(HtmlTextWriterAttribute.Class, "firstControls")
        writer.RenderBeginTag(HtmlTextWriterTag.Div)

        plhFirst.RenderControl(writer)

        ' </div>
        writer.RenderEndTag()

        ' </div>
        writer.RenderEndTag()
    End Sub
End Class

注意：为避免可能的 ID 冲突，我特意将plhFirst.ID 设为未设置。