将值发送到使用 MultiView 和 GridView 控件的 JavaScript 弹出窗口并从中接收值
4.00/5 (1投票)
在本文中，我们将学习如何创建 JavaScript 弹出窗口，如何使用 MultiView 控件在两个视图之间切换，以及如何使用带分页的 GridView 控件。
引言
在我们的应用程序中，我们经常需要创建一个弹出窗口。通常，当我们弹出窗口时，我们也需要与调用窗口进行通信。在本文中，我将展示如何在 ASP.NET 应用程序中创建弹出窗口（使用 JavaScript），以及弹出窗口如何将值发送回原始调用页面并自动点击该页面上的按钮。此外，我将使用 MultiView 控件以及带分页索引的 GridView 控件。
第一步：创建第一个页面
启动一个新的 ASP.NET 网站；默认情况下，您会看到 Default.aspx 页面。在该页面中，添加一个标签、一个文本框（用于输入学生 ID）、一个链接按钮（单击它会弹出窗口）和一个提交按钮。您可以从工具箱中添加所有这些项。为了获得更好的对齐效果，我将这些控件放在一个 HTML 表格中。
以下是写在 div 标签内的完整代码。
<div>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Student Id"></asp:Label></td>
<td>
<asp:TextBox ID="txtStudentId" runat="server"></asp:TextBox></td>
<td>
<asp:LinkButton ID="LinkButton1" runat="server">
Show Student List</asp:LinkButton></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</td>
<td></td>
</tr>
</table>
</div>
第二步：创建数据库
现在，从菜单栏的“网站 | 添加新项 | SQL Server 数据库”，我们将一个数据库添加到我们的网站。我们的数据库名为 StudentDB.mdf，它是一个非常简单的数据库，只包含一个表 – Students。
在此表中，StudentId 是主键，IsIdentity 为 true，Identity Increment 设置为 1，Identity Seed 也为 1。表如下所示
然后我们向数据库插入一些数据
因此，数据库中有 4 名学生，来自两个不同的专业。
第三步：完成开始页面
接下来，从工具箱中，我们将一个 SqlDataSource 控件添加到 Default.aspx 页面。我们可以通过双击工具箱中的 SQLDataSource 控件来完成此操作。然后，通过单击添加到项目中的 SQLDataSource 右上角的箭头，我们将获得配置数据源的链接。通过单击此链接，我们将进入配置数据源向导。我们选择数据源（在本例中为 StudentDB.mdf），单击“下一步”，然后再次单击“下一步”。我们保留默认的单选按钮选择（即指定表或视图的列）。在“列”区域，我们选择 *（星号；显示 Students 表的所有列）。然后我们单击 Where 按钮。
在“添加 WHERE 子句”对话框中，我们选择 StudentId 作为“列字段”。我们还选择 =（等于）作为“运算符”，选择“控件”作为“源”，并选择 txtStudentId 作为“控件”。
然后单击“添加”，然后单击“确定”，然后单击“下一步”和“完成”以完成向导。
现在，我们将一个 GridView 控件添加到我们的网站。我们在表格之后添加它。数据将仅在单击 btnSubmit 时绑定到此 GridView 控件（我们称之为 GridView1）。因此，我们必须在该按钮的单击事件处理程序中编写代码。
为此，我们双击提交按钮，并向其单击事件添加以下操作。
protected void btnSubmit_Click(object sender, EventArgs e)
{
GridView1.DataSource = SqlDataSource1;
GridView1.DataBind();
}
目前，我们的项目部分正常工作。如果我们输入学生 ID 并单击提交按钮，我们可以看到学生的详细信息。我们可以按 F5 运行项目并进行查看。
现在，为了弹出菜单，我们在 Default.aspx 的 head 标签附近添加一个 JavaScript 函数。
<head runat="server">
<title></title>
<script type="text/javascript">
function Navigate()
{
window.open("StudentList.aspx");
}
</script>
</head>
在后台代码页面中，我们将 onClick 属性添加到链接按钮
LinkButton1.Attributes.Add("onClick", "javascript:Navigate();");
第四步：添加和修改 StudentList.aspx
现在，我们从菜单栏“网站 | 添加新项”向项目中添加一个名为 StudentList.aspx 的新 Web 窗体。此时，如果我们运行项目，单击链接按钮将弹出名为 StudentList.aspx 的窗口。现在，我们将从数据库中为该页面获取值。
我们希望该页面首先显示可用的 Majors 列表，单击一个 Major 后，它将显示该 Major 的所有学生。然后，如果我们单击一个 student，弹出窗口将自行关闭，将选定的 student 的 ID 发送回 Default.aspx 页面的 txtStudent 文本字段，并自动单击 btnSubmit 按钮。这样，选定 student 的学生详细信息将显示在 GridView1 中。
为此，我们将一个 MultiView 控件添加到 StudentList.aspx 页面。MultiView 控件将包含两个视图，每个视图都将包含一个 GridView 控件。
以下是 div 标签内 MultiView 控件的代码。
<div>
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="view1" runat="server"></asp:View>
<asp:View ID="view2" runat="server"></asp:View>
</asp:MultiView>
</div>
请注意，我们已将 id 和 runat 属性添加到视图。
在每个视图中，我们将添加一个 SqlDataSource 控件和一个 GridView 控件。我们将使用向导来设置它们的属性，就像我们在 Default.aspx 页面上所做的那样。但这次，我们将有不同的 select 语句。这次，我只在这里提及源代码，而不是展示如何使用向导进行设置。使用向导完成这些任务应该很简单，并且与我们之前所做的类似。确保在添加 SQLDataSource 控件和 GridView 控件时将光标放在正确的视图内，因为代码会在光标闪烁的位置添加。
以下是 view1 所需的代码。
<asp:View ID="view1" runat="server">
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT DISTINCT [Major] FROM [Students]">
</asp:SqlDataSource>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="Major" HeaderText="Major"
SortExpression="Major" />
</Columns>
</asp:GridView>
</asp:View>
现在，如果我们运行项目并查看 StudentList.aspx 页面，我们将能够看到 Students 的 Majors 列表。但是，我们如何选择一行呢？好吧，有几种方法可以做到，这里我们以一种非常简单的方式来完成。紧跟在 asp:BoundField 标签之后，我们添加一个 asp:TemplateField，在该 TemplateField 中，我们添加一个 ItemTemplate，其中包含一个 asp:LinkButton。这是源代码
<Columns>
<asp:BoundField DataField="Major" HeaderText="Major" SortExpression="Major" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton id="lnkSelect1" runat="server"
CommandName="select" CommandArgument='<%# Eval("Major") %>'
Text="Select"> </asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
请特别注意我们如何添加自定义链接按钮。我们给它一个 id，以便它可以被识别，最重要的是，我们添加了 CommandName 属性，它将在 GridView 控件的 RowDataBound 事件处理程序中使用。另外请注意，为了将 Major 与单击事件一起传递，我们添加了 CommandArgument 属性。Eval 命令将从数据库中获取的部分绑定到 CommandArgument。我们很快就会利用这些属性。
在继续之前，我们为 view2 添加 GridView 控件。这是代码
<asp:View ID="view2" runat="server">
<asp:GridView ID="GridView2" runat="server">
</asp:GridView>
</asp:View>
在 StudentList 的 Page_Load 事件中，我们将 view1 设置为 MultiView 的默认视图。我们还添加了单击链接按钮的事件处理程序。
protected void Page_Load(object sender, EventArgs e)
{
MultiView1.SetActiveView(view1);
GridView1.RowCommand += new GridViewCommandEventHandler(GridView1_RowCommand);
}
在 GridView1_RowCommand 事件处理程序中，我们调用一个名为 BindGridView2 的方法，该方法动态声明一个 SqlDataSource 控件来获取选定 Major 的学生，然后将 SqlDataSource 绑定到 gridview。这是代码
void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Select")
{
bindGridView2(e.CommandArgument.ToString());
}
}
private void bindGridView2(string Major)
{
SqlDataSource sds = new SqlDataSource();
sds.ConnectionString =
ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
sds.ProviderName = "System.Data.SqlClient";
sds.SelectCommandType = SqlDataSourceCommandType.Text;
sds.SelectCommand = "Select * from Students Where Major=@MajorParam";
/* MajorParam gets its value from LinkButton lnkSelect1's CommandArgument
Recall that in lnkSelect1 we added parameter: CommandArgument='' */
sds.SelectParameters.Add("MajorParam", Major);
GridView2.DataSource = sds;
GridView2.DataBind();
MultiView1.SetActiveView(view2);
}
我们不要忘记在页面顶部使用“using System.Configuration;”包含 Configuration 库，否则我们将无法使用 ConfigurationManager。
此时，如果我们运行项目，当我们在 StudentList.aspx 页面首次出现时，通过选择一个专业，我们可以看到该专业的所有学生。
下一部分是向 GridView2 添加一个可选择的列，以便当我们选择一行时，相应的学生 ID 将被发送回 Default.aspx，并且 StudentList.aspx 窗口将自动关闭。这借助 TemplateField 标签、RowDataBound 事件和少量 JavaScript 来完成。
首先，我们在 aspx 文件中通过以下语句向 Gridview 添加一个模板字段。
<asp:View ID="view2" runat="server">
<asp:GridView ID="GridView2" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton id="lnkSelect2" runat="server"
Text="Select"> </asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:View>
通过代码段，我们在 GridView2 控件的每一行中添加了一个名为 lnkSelect2 的链接按钮。我们希望为所有 lnkSelect2 按钮的单击事件添加一个事件处理程序。一个好时机是在数据绑定到 GridView 控件时完成。
因此，我们通过向 Page_Load 事件添加以下代码来挂接 GridView2 控件的 RowDataBound 事件的事件处理程序。
GridView2.RowDataBound += new GridViewRowEventHandler(GridView2_RowDataBound);
然后我们按如下方式编写事件处理程序的正文。
void GridView2_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton b = (LinkButton) e.Row.FindControl("lnkSelect2");
b.Attributes.Add("onclick",
"javascript:showStudents('" + Request.QueryString["tc"] + "','" +
Request.QueryString["bc"] + "','" + e.Row.Cells[1].Text+"');");
}
}
但是等等！似乎我们通过 tc 和 bc 这两个名称从查询字符串中获取了一些值。那是什么？这些是前一个页面（Default.aspx）的 txtStudentId 文本框和 btnSubmit 提交按钮的控件 ID。除非我们在（StudentList.aspx）页面中有这些 ID，否则我们无法单击它们或将值发送回它们。因此，它们的控件 ID 必须首先从 Default 页面发送到此页面。为此，我们需要做两件事。
首先，在 Default 页面的 Page_Load 事件中，我们删除在开始第四步之前添加的语句，然后添加以下代码。
LinkButton1.Attributes.Add("onClick",
"javascript:Navigate('" +
txtStudentId.ClientID + "','" +
btnSubmit.ClientID + "');");
这意味着我们正在使用文本框和提交按钮的控件 ID 调用 JavaScript 函数 Navigate。接下来，我们修改 Navigate 函数如下。
<script type="text/javascript">
function Navigate(tControl, bControl) {
window.open("StudentList.aspx?tc="+tControl+"&bc="+bControl, "",
"height=600,width=600,left=500,top=100,resizable=no,scrollbars=yes");
}
</script>
最后，以下是 JavaScript 函数 showStudents，它应该写在 StudentList.aspx 的 head 标签之间。此函数将选定的 StudentId 发送回 Default 页面，单击提交按钮并关闭弹出窗口。
<script type="text/javascript">
function showStudents(tControl, bControl, studId) {
var tc = window.opener.document.getElementById(tControl);
var bc = window.opener.document.getElementById(bControl);
tc.value = studId;
bc.click();
window.close();
}
</script>
第五步：启用分页
Student 列表可能很长，我们可能希望为 GridView2 控件启用分页。这可以通过两个简单的步骤来实现。首先，将 GridView 控件的 AllowPaging 属性设置为 True。
<asp:GridView ID="GridView2" runat="server" AllowPaging="True" PageSize="10">
然后处理 PageIndexChanging 事件，这同样分两步完成。首先，通过在 Page_Load 方法中挂接事件处理程序方法。
GridView2.PageIndexChanging +=
new GridViewPageEventHandler(GridView2_PageIndexChanging);
然后，按如下方式编写事件处理程序的正文。
void GridView2_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView2.PageIndex = e.NewPageIndex;
bindGridView2(ViewState["Major"].ToString());
}
等等！你注意到我们使用了 ViewState 吗？这是必需的，以便将数据绑定到 GridView2 控件。由于我们在此处读取 ViewState["Major"]，因此我们必须首先将 Major 的值保存到视图状态。猜猜我们应该在哪里做？当然是在 bindGridView2 方法中的任何位置。因为这是我们首次了解 Major 参数值的地方。因此，在 bindGridView2 方法中的任何位置添加以下代码。
ViewState["Major"] = Major;
项目已完成，现在应该可以工作了。我们现在可以分页浏览 Students，即使学生列表很长，也可以更轻松地选择学生。
结论
尽管其中大部分是旧主题且非常基础，但我们在本教程中涵盖了与 GridView 控件和弹出窗口相关的许多内容。我们已经学习了如何创建 JavaScript 弹出窗口，如何使用 MultiView 控件在两个视图之间移动，我们还使用了带分页的 GridView 控件。我们已经看到了如何在 GridView 控件中启用可选链接按钮，然后如何使用 JavaScript 将值从弹出窗口发送回调用窗口。
历史
- 2009 年 4 月 16 日：初始版本