控件页面交互
I saw a recent question regarding .NET - Render User Control Logo on Postback and decided to write an article to address the issue stated in that question. To add further, I would like to include some features to make this article a worthwhile read.
我在回发中看到了一个有关.NET-Render用户控件徽标的最新问题，并决定写一篇文章来解决该问题中所述的问题。 为了进一步补充说明，我想提供一些功能，使本文值得一读。
In general, I would like to discuss the following items:
总的来说，我想讨论以下几项：
Create a simple Web Forms User Control创建一个简单的Web窗体用户控件 Load a Web Forms User Control to an page将Web窗体用户控件加载到页 What if I want to get the Web Forms User Control's selection from Parent's Page?如果我想从上级页面中获取Web窗体用户控件的选择怎么办？ What if I want to change the Web Forms User Control's selection from Parent's Page?如果要从“父页面”更改Web窗体用户控件的选择怎么办？ What if I want the changes in Web Forms User Control to reflect in the Parent's Page?如果我希望Web窗体用户控件中的更改反映在父页面中怎么办？ And finally, what if I want the changes in Web Forms User Control to reflect in the Parent's Page, this time by passing a dynamic control instead of hard-coded in codes?最后，如果我希望通过传递动态控件而不是代码中的硬编码，我希望Web窗体用户控件中的更改反映在父页面中，该怎么办？
I'm using Microsoft Visual Studio Community for illustration.
我使用Microsoft Visual Studio Community 进行说明。
1.创建一个简单的Web窗体用户控件
(1. Create a simple Web Forms User Control
)
First of all, start a new project. In this case, I will use for illustration purposes, since was required in the question.
首先，开始一个新项目。 在这种情况下，我将使用进行说明，因为问题中需要。
I'm selecting anEmptytemplate and selectingWeb Formsfor Add folders and core references
我选择一个空模板，然后选择“Web表单”以添加文件夹和核心引用
Now go to menuProject > Add New Item...(or press Ctrl + Shift + A) to add a new item to your project.
现在转到菜单项目>添加新项...（或按Ctrl + Shift + A）将新项添加到您的项目。
First, we can add aWeb Formfrom option, name itWebForm1.aspx
首先，我们可以从选项添加一个Web窗体，将其命名为WebForm1.aspx
Second, we do the same but this time we try to add aWeb FormsUser Controlfrom the option, named it asWebUserControl1.aspx
其次，我们做同样的事情，但是这次我们尝试从选项中添加一个Web窗体用户控件，将其命名为WebUserControl1.aspx。
Now we can double-click the file item generated in the Solution Explorer to edit the codes.
现在，我们可以双击在解决方案资源管理器中生成的文件项来编辑代码。
First, let's try to edit the Web Forms User Control.
首先，让我们尝试编辑Web窗体用户控件。
Once the item has been opened, you will see codes such as shown below:
打开项目后，您将看到如下所示的代码：
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="WebUserControl1.ascx.vb" Inherits="VB_WebApplication1.WebUserControl1" %>
For an explanation of the above codes, you can refer to:@ Control
有关以上代码的说明，您可以参考：@ Control
Now go to theDesignerview (press Shift + F7), and you should see an empty "page" is displayed. Now we try to generate some contents by:
现在转到Designer视图（按Shift + F7），您应该看到显示为空的“页面”。 现在，我们尝试通过以下方式生成一些内容：
Typing some wordings directly on the page直接在页面上键入一些措辞 Go to Toolbox (menuView > Toolbox) and add some controls, such as:
a Label control (named asLabel1)
an Image control (named asImage1)
a DropDownList control (named asDropDownList1)转到工具箱（菜单视图>工具箱），然后添加一些控件，例如：
一个Label控件（名为Label1）
一个Image控件（名为Image1 ）
一个DropDownList控件（名为DropDownList1）
When it's necessary, we can either set these controls with default Properties directly via the Properties window, or via Code Behind by writing the relevant codes.
必要时，我们可以直接通过“属性”窗口或通过编写相关代码通过“隐藏代码”将这些控件设置为具有默认属性的控件。
We can switch the page back toSourceview (press Shift + F7 again) to view the codes that were added, which could be like something below:
我们可以将页面切换回“源”视图（再次按Shift + F7）以查看添加的代码，如下所示：
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="WebUserControl1.ascx.vb" Inherits="VB_WebApplication1.WebUserControl1" %><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><p><asp:Image ID="Image1" runat="server" /></p><asp:DropDownList ID="DropDownList1" runat="server"AutoPostBack="True"><asp:ListItem Value=""></asp:ListItem><asp:ListItem Value="logo1.png">Logo 1</asp:ListItem><asp:ListItem Value="logo2.png">Logo 2</asp:ListItem><asp:ListItem Value="logo3.png">Logo 3</asp:ListItem></asp:DropDownList>
Now, my intention is to display a proper image (logo) based on the dropdown list selection. I can do that by selecting the DropDownList control and go to Properties, go to theEventsicon and double-click theSelectedIndexChangedevent.
现在，我的意图是根据下拉列表选择显示适当的图像（徽标）。 我可以通过选择DropDownList控件并转到“属性”，再转到“事件”图标并双击SelectedIndexChanged事件来做到这一点。
Protected Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles DropDownList1.SelectedIndexChangedIf DropDownList1.SelectedValue <> "" ThenImage1.ImageUrl = "./images/" + DropDownList1.SelectedValueLabel1.Text = "You have selected: " + DropDownList1.SelectedValueElseImage1.ImageUrl = ""Label1.Text = ""End IfEnd Sub
The above code means:
If the selected item in the drop-down list is not empty (user had selected Logo 1, Logo 2, etc) the code will try to look to the physical image file (like: logo1.jpg, logo2.jpg, etc) at folder: <root>/images. Label1 is used to display what user had selected.
上面的代码表示：
如果下拉列表中的所选项目不为空（用户选择了徽标1，徽标2等），则代码将尝试查找位于以下位置的物理图像文件（例如：logo1.jpg，logo2.jpg等）文件夹：<root> / images。 Label1用于显示用户选择的内容。
We can do this by manually adding a folder named as "images" and put in the logo files.
为此，我们可以手动添加一个名为“ images”的文件夹并放入徽标文件中。
Now, we are almost there so we try to include this Web Forms User Control into a normal web page.
现在，我们快到了，因此我们尝试将此Web窗体用户控件包含到普通的网页中。
2.将Web窗体用户控件加载到页 (2. Load a Web Forms User Control to an page)
After we saved the changes on Web Forms User Control, we open up the Web Page (WebForm1.aspx) regardless of its Design, Source or Split view. And then select the Web Forms User Control (WebUserControl1.ascx) from the Solution Explorer and drag it to the Web Page.
将更改保存在Web窗体用户控件上之后，无论其“设计”，“源”或“拆分”视图如何，我们都会打开网页（WebForm1.aspx）。 然后从解决方案资源管理器中选择Web窗体用户控件（WebUserControl1.ascx）并将其拖动到Web页。
By doing this, you should able to see that some additional codes were added:
这样，您应该可以看到添加了一些其他代码：
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="VB_WebApplication1.WebForm1" %>
<%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>
<!DOCTYPE html>
<html xmlns="/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl1 runat="server" id="WebUserControl1" />
</div>
</form>
</body>
</html>
<％@页面语言=“ vb” AutoEventWireup =“ false” CodeBehind =“ WebForm1.aspx.vb” Inherits =“ VB_WebApplication1.WebForm1”％>
<％@注册Src =“〜/ WebUserControl1.ascx” TagPrefix =“ uc1” TagName =“ WebUserControl1”％>
<！DOCTYPE html>
<html xmlns =“ /1999/xhtml”>
<head runat =“ server”>
<title> </ title>
</ head>
<身体>
<form id =“ form1” runat =“ server”>
<div>
<uc1：WebUserControl1 runat =“服务器” id =“ WebUserControl1” />
</ div>
</ form>
</ body>
</ html>
So now save the Web Page and build your solution to see what you get!
因此，现在保存网页并构建您的解决方案，看看您能得到什么！
The image logo and label's text should also be changed once the drop-down selection is changed.
更改下拉选项后，图像徽标和标签的文本也应更改。
Simple enough so we try to explore more.
很简单，所以我们尝试探索更多。
3.如果我想从上级页面中获取Web窗体用户控件的选择怎么办？ (3. What if I want to get the Web Forms User Control's selection from Parent's Page?)
This is simple, we can use this code to achieve that:
这很简单，我们可以使用以下代码来实现：
Dim dropdown As DropDownList = TryCast(WebUserControl1.FindControl("DropDownList1"), DropDownList)If dropdown IsNot Nothing ThenIf dropdown.SelectedValue = "" ThenResponse.Write("You have selected nothing")ElseResponse.Write("You have selected logo: " + dropdown.SelectedValue)End IfEnd If
(
)
4.如果我想从父页面更改Web窗体用户控件的选择，该怎么办？ (4. What if I want to change the Web Forms User Control's selection from Parent's Page?)
You can try:
你可以试试：
'Select the 2nd item in the DropDownList controlDim dropdown As DropDownList = TryCast(WebUserControl1.FindControl("DropDownList1"), DropDownList)If dropdown IsNot Nothing Thendropdown.ClearSelection()dropdown.SelectedIndex = 2End If
or use:
或使用：
Dim dropdown As DropDownList = TryCast(WebUserControl1.FindControl("DropDownList1"), DropDownList)Dim itm As ListItem = TryCast(dropdown.Items.FindByText("Logo 1"), ListItem) 'Select the 2nd item in the DropDownList controlIf itm IsNot Nothing Thenitm.Selected = TrueEnd If
(
)
5.如果我希望Web窗体用户控件中的更改反映在父页面中怎么办？ (5. What if I want the changes in Web Forms User Control reflect in the Parent's Page?)
Let's say we want to display the text of Label Control in Web Forms User Control into the Parent's Page's Label Control:
假设我们要在“ Web窗体用户控件”中将“标签控件”的文本显示到父页面的“标签控件”中：
Assume we have a Label Control in Parent's Page named asParentLabel:
假设我们在父页面中有一个名为ParentLabel的标签控件：
<asp:Label ID="ParentLabel" runat="server" Text="Label"></asp:Label>
Then for the Web Form User Control, we can apply the following codes:
然后，对于Web窗体用户控件，我们可以应用以下代码：
Dim ParentLabel As Label = TryCast(Me.Parent.FindControl("ParentLabel"), Label)If ParentLabel IsNot Nothing ThenParentLabel.Text = Label1.TextEnd If
(
)
6.最后，如果我希望通过传递动态控件而不是代码中的硬编码来使Web窗体用户控件中的更改反映在父级页面中，该怎么办？ (6. Finally, what if I want the changes in Web Forms User Control toreflectin the Parent's Page, this time by passing a dynamic control instead of hard-coded in codes?)
So, what if it's the nature that we only know what Label object we're going to use in a later period, along with the fact that not everytime we get a control named as "ParentLabel", I wish to dynamically set the reference to that control?
因此，如果本质上是我们只知道以后将要使用的Label对象，以及并非每次我们都获得名为“ParentLabel”的控件时，我希望动态地将引用设置为那个控制？
In that case, we can make the following changes to address the issue.
在这种情况下，我们可以进行以下更改以解决该问题。
First, create aPublic Object(in this case, we use a Label control) in Web Forms User Control's code behind:
首先，在后面的Web窗体用户控件的代码中创建一个Public Object（在这种情况下，我们使用Label控件）：
Public ParentLabel As Label
And then remove this line from existing codes:
然后从现有代码中删除此行：
Dim ParentLabel As Label = TryCast(Me.Parent.FindControl("ParentLabel"), Label)
If we now re-build the solution, it seems thatno error will occurbut at the same time,nothing will be reflectedin Parent's Page. Reason being theParentLabelis now declared publicly andnot yet been assigned.
如果我们现在重新构建解决方案，似乎不会发生任何错误，但是同时，“父级页面”中不会反映任何内容。 原因是ParentLabel现在已公开声明，尚未分配。
To make this work, in thePage_Loadevent of Parent's Page, we need to assign the Label control accordingly (let's say this time we would like to reflect the value into another Label control named asParentLabel2.
为了使此工作有效，在“父级页面”的Page_Load事件中，我们需要相应地分配Label控件（假设这次我们希望将该值反映到另一个名为ParentLabel2的Label控件中。
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.LoadWebUserControl1.ParentLabel = ParentLabel2End Sub
Finally, we re-build the solution. It seems everything is working fine now in whichParentLabel2has displayed the text ofLabel1in Web Form User Form.
最后，我们重新构建解决方案。 现在，ParentLabel2已在Web窗体用户窗体中显示Label1的文本，看来一切工作都很好。
摘要：(Summary:)
The illustration above is just to share a bit of my personal experience with using Web Form User Control in development. In real scenarios, it can get much more complex and in a bigger context in which more logical validations or interfaces need to be integrated together, but for now, this article should be a good enough starter for beginners.
上面的插图只是分享我在开发中使用Web窗体用户控件的个人经验。 在实际情况下，它可能变得更加复杂，并且在更大的上下文中（其中需要将更多的逻辑验证或接口集成在一起），但是对于现在的初学者来说，本文应该是一个足够好的入门者。
Please don't hesitate to provide your comments and I shall update this article in due course.
请随时提供您的评论，我将在适当时候更新本文。
Cheers!
干杯!
翻译自: https://www.experts-/articles/31726/ASP-NET-Web-Form-User-Control's-Basic-Interaction.html
控件页面交互
