在页面中重用用户控件时对子控件的引用不正确

Question

添加一个接受一些属性的用户控件，用于能够在我们的应用程序中一般设置不同的配置值。

在某些情况下，这将需要在同一页面上使用其中两个控件。我们使用 Telerik ASP.Net 进行 Ajax 控件，但这不应该特定于 Telerik 套件。代码如下，但控件的简单细分如下：

配置控制

• 打开按钮
• 隐藏的容器窗口
  • 文本框
  • 提交按钮

打开按钮显示在用户控件所在的页面上。单击此按钮不会触发回发，而是使用 javascript 打开容器窗口。

打开后，可以更新值，提交按钮会触发回发，提交更改并关闭窗口。

我的问题是这样的： 当我将其中两个控件放置在同一页面上以获得不同的值时，打开窗口的 JavaScript 位于控件内部并在页面中重复，有时会引用并打开错误的窗口。我该如何解决这个问题？

    function OpenWindow(sender, args) {
        $find('<%= windowControlID.ClientID %>').show();
    }

控件添加到父页面，如下所示：

<span style="display:block;">
    <uc:UpdateConfigurationValue id="configvalue1" runat="server" ConfigurationName="configValueName1" ConfigurationDescription="configValueDescription1" ConfigurationValueContext="configValueContext1" buttonWidth="100%" TelerikSkin="MetroTouch" FieldSecurityID="###" />
</span>
<span style="display:block;">
    <uc:UpdateConfigurationValue id="configValue2" runat="server" ConfigurationName="configValueName2" ConfigurationDescription="configValueDescription2" ConfigurationValueContext="configValueContext2" buttonWidth="100%" TelerikSkin="MetroTouch" FieldSecurity="###" />
</span>

用户控制标记：

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="UpdateConfigurationValue.ascx.vb" Inherits="JearLogistics.UpdateConfigurationValue" %>

<telerik:RadButton id="btnUpdateConfigurationValue" runat="server" AutoPostBack="false" OnClientClicked="btnUpdateConfigurationValue_OnClientClicked" />

<telerik:RadWindow ID="rwUpdateConfigurationValue" runat="server" Skin="MetroTouch" Behaviors="Default" VisibleStatusbar="false" ReloadOnShow="true" AutoSize="true" AutoSizeBehaviors="WidthProportional" >
    <ContentTemplate>
        <center>
            <div>
                <telerik:radlabel ID="lblConfigurationDescription" runat="server" Skin="MetroTouch"/>:
                <telerik:RadTextBox ID="txtConfigurationValue" runat="server" Skin="MetroTouch" />
                <telerik:RadLabel ID="lblConfigurationValueContext" runat="server" Skin="MetroTouch" />
            </div>
            <div>
                <telerik:RadButton ID="btnSubmitConfigurationChange" runat="server" AutoPostback="true" Skin="MetroTouch" Text="Submit" />
            </div>
        </center>
    </ContentTemplate>
</telerik:RadWindow>

<telerik:RadCodeBlock ID="codeBlockUpdateConfigurationValue" runat="server">
    <script type="text/javascript">
        function btnUpdateConfigurationValue_OnClientClicked(sender, args) {
            $find("<%= rwUpdateConfigurationValue.ClientID %>").show();
        }
    </script>
</telerik:RadCodeBlock>

背后的用户控制代码

Imports Telerik.Web.UI
Public Class UpdateConfigurationValue
    Inherits System.Web.UI.UserControl

#Region "Generic Properties"
    Public Property ConfigurationName As String
    Public Property ConfigurationDescription As String
    Public Property ConfigurationValueContext As String

    Public Property ButtonWidth As Unit
    Public Property TelerikSkin As String
    Public Property FieldSecurityID As Long? = Nothing

    Private ReadOnly Property FieldSecurity As Dictionary(Of Integer, Boolean)
        ``` private security getters/setters
    End Property
    Private _FieldSecurity As Dictionary(Of Integer, Boolean)

#End Region

#Region "Post Update Deletgate"
    Public Delegate Sub OnSubmitButtonClicked()
    Public Property AfterSubmitButtonClicked As OnSubmitButtonClicked
#End Region

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then

            If FieldSecurityID IsNot Nothing AndAlso Not FieldSecurity(FieldSecurityID) Then
                btnUpdateConfigurationValue.Visible = False
                Exit Sub
            End If

            If Not ButtonWidth.IsEmpty Then btnUpdateConfigurationValue.Width = ButtonWidth
            If Not String.IsNullOrEmpty(TelerikSkin) Then btnUpdateConfigurationValue.Skin = TelerikSkin
            btnUpdateConfigurationValue.Text = $"Update {ConfigurationDescription}"

            Dim configItem As New TblConfiguration(ConfigurationName)
            lblConfigurationValueContext.Text = ConfigurationValueContext
            lblConfigurationDescription.Text = ConfigurationDescription

            txtConfigurationValue.Text = configItem.Value
        End If
    End Sub

    Private Sub SubmitConfigurationChange_Click(sender As RadButton, e As EventArgs) Handles btnSubmitConfigurationChange.Click
        Dim configItem As New TblConfiguration(ConfigurationName) With {
            .Value = txtConfigurationValue.Text
        }
        configItem.Update()

        Dim afterSubmitButtonClicked As OnSubmitButtonClicked = Me.AfterSubmitButtonClicked
        If afterSubmitButtonClicked IsNot Nothing Then afterSubmitButtonClicked()

    End Sub
End Class

Answer 1

在我自己研究这个问题时，最简单的解决方案是在按钮上启用回发，然后使用响应脚本/启动脚本来显示所需的窗口。这很有效，因为当随控件加载的 javascript 查看页面内容时，子控件是用户控件范围内的唯一内容，而无需故意进入页面。

下面的代码片段取自 Telerik 的文档，并保留为他们提供的通用代码：

Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
    'business logic goes here

    Dim script As String = "function f(){$find(""" + RadWindow1.ClientID + """).show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);"
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, True)
End Sub