我有gridview显示列BusRoute，BusNo和Action.Where动作包含链接按钮以显示另一个gridview。我想在jquery对话框中显示它。我的代码是。
ASPX代码：
第一次Gridview：
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkbtn" runat="server" OnClientClick="showDialog();">Shipment Status</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
第二次Gridview：
<div class="gridview_stop" id="popup">
<asp:GridView ID="Stops" runat="server" AutoGenerateColumns="False" CellPadding="6" Width="190px">
<Columns>
<asp:BoundField HeaderText="Bus Stop" DataField="StopName" HeaderStyle-BackColor="#006B89">
<HeaderStyle BackColor="#006B89" Font-Size="18px" Font-Bold="false"></HeaderStyle>
<ItemStyle BackColor="#E0E0E0" HorizontalAlign="Center" />
</asp:BoundField>
</Columns>
</asp:GridView>
</div>
文件后面的代码：
protected void search_Click(object sender, EventArgs e)
{
DataSet ds = new DataSet();
SqlDataAdapter adapter = new SqlDataAdapter();
con.Open();
SqlCommand cmd = new SqlCommand("spGetRoutes", con);
cmd.CommandType = System.Data.CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@BusStop1", Source.Text);
cmd.Parameters.AddWithValue("@BusStop2", Destination.Text);
adapter.SelectCommand = cmd;
adapter.Fill(ds);
adapter.Dispose();
cmd.Dispose();
con.Close();
if (ds.Tables[0].Rows.Count > 0)
{
Route.DataSource = ds.Tables[0];
Route.DataBind();
Stops.DataSource = null;
Stops.DataBind();
Lblmsg.Text = "";
}
else
Lblmsg.Text = "No Direct Bus Between These Stop";
Lblmsg.ForeColor = Color.WhiteSmoke;
Route.Dispose();
Route.DataBind();
Stops.Dispose();
Stops.DataBind();
}
protected void Route_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "this.style.backgroundColor='aquamarine';";
e.Row.Attributes["onmouseout"] = "this.style.backgroundColor='white';";
e.Row.ToolTip = "Click last column for selecting this row.";
}
}
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
string Name = Route.SelectedRow.Cells[0].Text;
SqlDataAdapter adapter1 = new SqlDataAdapter();
DataSet ds1 = new DataSet();
string connetionString = "Data Source=.;Initial Catalog=BusService;uid=sa;Password=Murli@925";
SqlConnection connection = new SqlConnection(connetionString);
connection.Open();
SqlCommand cmd = new SqlCommand("spGetStops", connection);
cmd.CommandType = System.Data.CommandType.StoredProcedure;
int BusNo= Convert.ToInt32(Name);
cmd.Parameters.AddWithValue("@BusNo",BusNo);
adapter1.SelectCommand = cmd;
adapter1.Fill(ds1);
adapter1.Dispose();
cmd.Dispose();
connection.Close();
Stops.DataSource = ds1.Tables[0];
Stops.DataBind();
}
Jquery功能：
<script type="text/javascript">
$("#lnkbtn").live("click",
function showDialog() {
$("#popup").dialog({
show: { effect: "fold", duration: 4000 },
hide: { effect: "fold", duration: 4000 },
});
return false;
});
$(document).click(function (event) {
if (!$(event.target).closest('#popup').length) {
if ($('#popup').is(":visible")) {
$('#popup').dialog('close');
}
}
})
</script>
谢谢＆amp;问候。
答案 0 :(得分：0)
运行页面时，请查看渲染的html。除非您将ClientIDMode设置为静态，否则我怀疑您的按钮ID是$("#lnkbtn")，但更像是$("#gvWhatever_lnkbtn_0")
设置OnClientClick="showDialog();" 或 $("#lnkbtn").live("click", function showDialog(){...})无需同时执行这两项操作。
使用“服务器控制”按钮激活弹出窗口通常不起作用。特别是如果启用了GridView行选择。我无法判断你的第一个GridView是否启用了该功能，因为我只看到了一部分列表。但是，当你试图显示弹出窗口时，你会触发一个回发，所以你永远不会看到弹出窗口。
此外，您的第二个弹出窗口包含一个gridview，它需要一个数据绑定。所以你需要确保在激活弹出窗口之前用数据填充gridview
GridView标记的一部分，包含2个TemplateField＆＃39>
<asp:TemplateField HeaderText="Info">
<ItemTemplate>
<div>
<div class="rs-icon rs-icon-info tooltip-marker" role="button">
</div>
<div id="ContactInfo" style="display:none;">
<table id="tblContactDetail" class="ContactDetail Note">
<tr>
<td style="width: 80px">Name</td>
<td style="width: 100%">
<asp:Literal ID="Literal1" runat="server"
Text='<%# Eval("expert_name") %>' />
</td>
</tr>
.
.
.
</table>
</div>
</div>
<ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CV">
<ItemTemplate>
<div id="divButtonViewCV" runat="server"
class="rs-icon rs-icon-cv" role="button"
onclick='<%# Eval("expert_cv_id", "ViewPDF({0})") %>' >
</div>
</ItemTemplate>
</asp:TemplateField>
在上面的标记中，我设置了两种样式的＆＃34; popup＆＃34;。第一个模板使用jQueryUI ToolTip widget，它在鼠标悬停/退出时激活。这很好，因为它不需要点击，这意味着不用担心回发会破坏作品。这里有趣的是我使用div作为按钮。
工作原理：设置 .tooptip-marker 类的div以激活jqueryui工具提示，该工具提示将显示<div id="ContentInfo">的内容抓住激活按钮的兄弟div的内部html。请注意，此div的样式为 display：none; ，以便内容可用于工具提示但隐藏，以便主GridView正常显示。
为简洁起见，我仅包含<div id="ContentInfo">内容的一部分。但它真的可以包含任何东西。在我的代码中，它是一个简单的<table>包含联系信息字段（使用绑定的<asp:Literal>控件），它们是主要GridView数据源的一部分。
但这可能很容易就是一个嵌入式GridView，它有自己的数据源，它绑定在主GridView的OnRowDatabound事件中。
以下jquery设置小部件。有关更完整的文档，请参阅jQueryUI ToolTip widget
$( function() {
$( document ).tooltip( {
items: ".tooltip-marker",
content: function() {
return $( this ).next().html();
},
position: {
my: "left top",
at: "right+5 top-5"
}
} )
} );
第二个Template字段用于激活弹出窗口。这是你必须小心回发的地方。我再次使用<div>样式作为图标并将其视为简单按钮，因为我已添加onclick。
单击此按钮会显示一个弹出窗口，以便您可以查看PDF格式的人员简历。 PDF作为varbinary存储在我们的数据库中。在这里，我使用另一个jquery插件（colorbox），将PDF显示为页面上的弹出窗口。
在下面的ViewPDF()功能中，请注意我们会阻止＆＃34;冒泡＆＃34;通过设置cancelBubble = true（对于较旧的IE）或对stopPropagation（）（所有其他浏览器）的调用，将click事件发送到GridView。
在此代码中，colorbox设置iframe并将 href 参数传递给其src属性。我正在调用 .ashx 页面，这是一个asp通用处理程序，它允许我们在没有标准网页开销的情况下提供其他类型的内容。这可以很容易地配置为接受独立的 .aspx 页面，您可以在其中放置辅助网格。
// This plain object is used by the call to colorbox(), please
// refer to colorbox documentation for details.
var colorboxDataExpertCV = {
height: "85%",
width: 900,
opacity: .30,
fixed: true,
iframe: true,
returnFocus: false,
href: ''
}
// ========================================================
// In the Template above, the onclick code:
// onclick='<%# Eval("expert_cv_id", "ViewPDF({0})") %>'
//
// Renders to:
// onclick="ViewPDF(12345)"
//
// PdfHandlerExpertsCV.ashx is an GenericHandler that retrieves
// the CV from our database and writes the byte array to the
// colorbox iframe as an "application/pdf" content type which
// triggers native browser pdf management either by internal
// viewer or installed PDF plugin
// ========================================================
function ViewPDF( p ) {
if ( event.stopPropagation )
event.stopPropagation();
else
event.cancelBubble = true;
if ( p && p > 0 ) {
colorboxDataExpertCV.href = "/PdfHandlerExpertsCV.ashx?cvid=" + p;
$.colorbox( colorboxDataExpertCV );
}
return false;
}
<强>附录
让我说清楚一下，我需要在第二个Gridview中绑定数据 在Jquery对话框中显示这个Gridview2。这个数据将被绑定 在linkbutton里面的click事件的对话框中显示 Gridview1
正如我上面所说，你不能绑定GridView（服务器端事件），然后弹出一个jquery ui对话框（客户端事件），而不会引入更多的复杂性。当您准备好按下打开对话框的按钮时，您必须确保弹出窗口所需的所有数据都可用。
实现此目的的最简单方法是在GridView1中嵌入GridView2并同时处理所有绑定。它不漂亮或不高效，并且根据每个项目中显示的项目数量，可能会降低页面速度。但是，如果每个只有几行，那么它应该是可以接受的。
GridView2和DataSource2嵌入<ItemTemplate> <TemplateField>的{{1}}。GridView1中相应的行字段或数据键字段，然后调用GridView2，在RowDataBound Gridview1事件GridView1中绑定GridView2.DataBind()。 重要请注意，gridview行项目ID会被严重删除＆＃34;所以你不应该在jquery调用中使用id，而是使用基于元素名称和类标记的jquery选择器，即：$("button.marker")用于这样定义的按钮：<button class="marker">。
<head>标签）<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui.css" />
<script type="text/javascript" src="Scripts/jquery-2.1.4.min.js"> </script>
<script type="text/javascript" src="Scripts/jquery-ui-1.11.4.min.js"> </script>
<style>
.btn_styling {
text-align: center;
width: 32px;
margin: 2px;
cursor: pointer;
border: 1px solid gray;
border-radius: 3px;
/* add a background image to the div
to make the div look like a button */
/* background-image: url('...') */
}
.ui-dialog-titlebar-close {
display: none;
}
</style>
HTML（.aspx）
<form id="form1" runat="server">
<div style="width: 400px;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="user_id"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="user_name" HeaderText="User Name" SortExpression="user_name" />
<asp:TemplateField HeaderText="Info">
<ItemTemplate>
<div id="divButton" runat="server" class="btn_styling dialog-marker" title="This could also have been a <button> element or maybe an <img> element...anything really">X</div>
<div style="display: none;">
<asp:GridView ID="GridView2" runat="server"
AutoGenerateColumns="False"
DataSourceID="SqlDataSource2">
<Columns>
<asp:BoundField DataField="email" HeaderText="Email" SortExpression="email" />
<asp:BoundField DataField="add_edit_date" HeaderText="Date Added" SortExpression="add_edit_date" DataFormatString='{0:dd-MMMM, yyyy}'/>
<asp:BoundField DataField="add_edit_by" HeaderText="Added By" SortExpression="add_edit_by" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:YourConnectionString %>"
SelectCommand="SELECT email, add_edit_date, add_edit_by FROM tbl_users WHERE (user_id = @user_id)">
<SelectParameters>
<asp:Parameter Name="user_id" />
</SelectParameters>
</asp:SqlDataSource>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle BorderColor="Blue" BorderStyle="Solid" BorderWidth="1px" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:YourConnectionString %>"
SelectCommand="SELECT top 10 user_id, user_name from tbl_users">
</asp:SqlDataSource>
</div>
<div id="dialogContainer">
</div>
</form>
Private Sub GridView1_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
Dim gv2 As GridView = DirectCast(e.Row.FindControl("GridView2"), GridView)
Dim sds As SqlDataSource = DirectCast(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
sds.SelectParameters("user_id").DefaultValue = GridView1.DataKeys(e.Row.RowIndex).Value
gv2.DataBind()
End If
End Sub
<script type="text/javascript">
var dialogOptions = {
autoOpen: false,
appendTo: "#dialogContainer",
modal: true,
height: "auto",
width: "auto",
title: "Dialog Title",
closeOnEscape: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
}
};
$( function() {
$( ".dialog-marker" ).on( "click", function() {
var d = $( this ).next( "div" ).first().dialog( dialogOptions );
d.dialog( "open" );
} );
} );
</script>