ASP.Net DataList Item in jQuery Dialog Modal popup on button click
ASP.Net DataList Item in jQuery Dialog Modal popup on button click:
DataList Item in jQuery Dialog Modal popup:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"
type="text/javascript"></script>
<link
href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script
type="text/javascript">
$("[id*=lnkSelect]").live("click",
function () {
$("#item").html($("[id*=lblItem]",
$(this).closest("tr")).html());
$("#price").html($("[id*=lblPrice]",
$(this).closest("tr")).html());
$("#dialog").dialog({
title: "Selected Row",
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
});
return
false;
});
</script>
</head>
<body>
<form
id="form1" runat="server">
<asp:DataList
ID="DataList1" runat="server">
<ItemTemplate>
Item:
<asp:Label ID="lblItem" runat="server"
Text='<%# Eval("Item") %>'></asp:Label><br />
Price:
<asp:Label ID="lblPrice" runat="server"
Text='<%# Eval("Price") %>'></asp:Label><br />
<asp:LinkButton ID="lnkSelected" runat="server"
Text="Select"></asp:LinkButton>
</ItemTemplate>
</asp:DataList>
<div
id="dialog" style="display: none">
Item:<span
id="item"></span><br />
Price:<span
id="price"></span>
</div>
</form>
</body>
</html>
page.aspx.cs C# code for bind datalist:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable
dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new
DataColumn("Item"), new DataColumn("Price") });
dt.Rows.Add("Shirt", 0);
dt.Rows.Add("Football", 1000);
dt.Rows.Add("Bat", 500);
DataList1.DataSource = dt;
DataList1.DataBind();
}
}
Comments
Post a Comment