创建 Web 部件页以承载用户控件
创建一个新的 ASP.NET 页。在页顶部添加下面的页声明。
VB
<@page language="VB" %>
C#
<@page language="C#" %>
在刚才添加的页声明下面，添加以下具有 HTML 标记的基本页结构。
<html>
<head>
<title>Web Parts Demo Page</title>
</head>
<body>
<h1>Web Parts User Control Demonstration</h1>
<form runat="server">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top">
</td>
<td valign="top">
</td>
<td valign="top">
</td>
</tr>
</table>
</form>
</body>
</html>
将该页保存到启用了个性化设置的站点下的目录中。
向页添加 Web 部件控件
在页的 <form>元素紧下面，添加一个 WebPartManager 控件。
<asp:webpartmanager id="WebPartManager1" runat="server" />
在 <asp:webpartmanager>元素的紧下面、表的第一组 <td>标记（第一个表列）中间，添加一个 WebPartZone 控件，以包含您将在后面的步骤中添加的用户控件。
<asp:webpartzone id="SideBarZone" runat="server"
headertext="Sidebar Zone">
<zonetemplate>
</zonetemplate>
</asp:webpartzone>
在您刚才添加的区域的 <zonetemplate>元素中，添加一个现有的服务器控件以及一些静态内容，在运行时会将它们视为另一个 Web 部件控件（因为它在 Web 部件区域中）：
<asp:label runat="server" id="linksPart" title="My Links">
<a href="www.asp.net">ASP.NET site</a>
<br />
<a href="www.gotdotnet.com">GotDotNet</a>
<br />
<a href="www.contoso.com">Contoso.com</a>
<br />
</asp:label>
在表的第二组 <td>标记（第二个表列）中，添加另一个 WebPartZone 控件，以包含您将在后面的步骤中添加的用户控件。
<asp:webpartzone id="MainZone" runat="server"
headertext="Main Zone">
<zonetemplate>
</zonetemplate>
</asp:webpartzone>
在表的第三个 <td>元素（第三列）中，添加一个 <asp:editorzone>元素。添加一个 <zonetemplate>元素，然后添加一个<asp:appearanceeditorpart>和一个 <asp:layouteditorpart>元素。编辑器区域中的代码应类似于下面这样：
<asp:editorzone id="EditorZone1" runat="server">
<zonetemplate>
<asp:appearanceeditorpart runat="server"
id="AppearanceEditorPart1" />
<asp:layouteditorpart runat="server"
id="LayoutEditorPart1" />
</zonetemplate>
</asp:editorzone>
保存页。
创建用户控件
在文本编辑器中创建一个新文件。此文件将包含也可以作为 Web 部件控件添加到页面的用户控件。
注意
本演练的搜索控件并不实现实际的搜索功能；它只用于演示 Web 部件功能。
在新文件的顶部，如下例中所示添加控件声明。
VB
<%@ control language="VB" classname="SearchUserControl" %>
C#
<%@ control language="C#" classname="SearchUserControl" %>
在控件声明的下面，添加一对 <script>标记，并在这对标记之间添加用于创建可个性化设置的属性的代码。请注意，ResultsPerPage 属性 (Property) 包含一个 Personalizable 属性 (Attribute)。如果提供了具有用户界面 (UI) 的编辑控件在“设计”视图中更改设置，则此属性将使控件的用户能够个性化设置每一页要返回的搜索结果数量。控件的代码应当类似于下面的代码示例。
VB
<%@ control language="VB" classname="SearchUserControl" %>
<script runat="server">
Private results As Integer
<Personalizable()>_
Property ResultsPerPage() As Integer
Get
Return results
End Get
Set(ByVal value As Integer)
results = value
End Set
End Property
</script>
C#
<%@ control language="C#" classname="SearchUserControl" %>
<script runat="server">
private int results
[Personalizable]
public int ResultsPerPage
{
get
{return results}
set
{results = value}
}
</script>
在 <script>元素的下面添加一个文本框和一个按钮，以便为搜索控件提供基本的用户界面，如下面的代码示例所示。
<asp:textbox runat="server" id="inputBox"></asp:textbox>
<br />
<asp:button runat="server" id="searchButton" text="Search" />
将文件命名为 SearchUserControlVB.ascx 或 SearchUserControlCS.ascx（具体取决于您使用的语言），并将其保存到 WebPartsDemo.aspx 页所在的目录中。
安全注意
该控件具有一个文本框，用于接受用户输入，这是一个潜在的安全威胁。网页中的用户输入可能会包含具有恶意的客户端脚本。默认情况下，ASP.NET 网页验证用户输入，以确保输入中不包含 HTML 元素或脚本。只要启用了此验证，就不需要显式检查用户输入中的脚本或 HTML 元素。有关更多信息，请参见脚本侵入概述。
在主 Web 部件区域中引用用户控件
在网页的顶部，将下面的声明添加到页声明的后面，以引用刚刚创建的用户控件。如果您使用的不是本主题中提供的用户控件示例，则需要将 src 属性设置为您所使用的用户控件的路径和文件名，您还可以选择为 tagname 属性赋一个不同的值。
[VB]
<%@ register tagprefix="uc1" tagname="SearchUserControl"
src="searchusercontrolvb.ascx" %>
[C#]
<%@ register tagprefix="uc1" tagname="SearchUserControl"
src="searchusercontrolcs.ascx" %>
在主区域的 <zonetemplate>元素中，引用您在前面创建的用户控件。
<uc1:SearchUserControl id="searchPart" runat="server"
title="Search" />
保存和关闭该页。
1、打开web网站。2、点击管理员登录。
3、输入管理员密码。
4、点击批量 *** 作。
5、选择所有请求。
6、点击一键添加用户名即可。
<!DOCTYPE html><html>
<head>
<title>登录</title>
</head>
<body>
<form onsubmit="return check()">
<label>用户名</label><input id="username" type="text" name="username">
<label>密码</label><input id="password" type="password" name="password">
<input type="submit" value="登录">
</form>
<script type="text/javascript">
function check(){
var username = document.getElementById("username").value
var password = document.getElementById("password").value
if(!username){
alert("用户名不能为空！")
return false
}
if(!password){
alert("密码不能为空！")
return false
}
return true
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）