Hi,
I have gridview and button inside the gridview to open the jquery dialog.
when the jquery opens i need to pass the a gridview row value to databsse to pull one row of data from database.i am aware od callign this using pagemethoad. but i am not aware of how to call whn jquery opens.
Here is my fiest level of code after referring mudassar's one of the great article.
How to call the pagemethoad when dialog opens and how to parse the data and bind it to the respective controls inside the dialog. Appreciate if there is any smaple.
i tried to refer the follwing article and seems they have db call on button inside the dialog. not when dialog opens
http://weblogs.asp.net/hajan/call-asp-net-server-side-method-from-jquery-ui-dialog.
Any help will be highly apreciated.
Thanks in advance
My sample code below,
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Id" ItemStyle-CssClass="Id" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" ItemStyle-CssClass="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Description" ItemStyle-CssClass="Description" HeaderText="Description"
ItemStyle-Width="150" />
<asp:TemplateField>
<ItemTemplate>
<asp:HiddenField ID="hdnIdMgr" runat="server" Value='<%# Eval("IdManager") %>' />
<asp:LinkButton Text="View" ID="lnkView" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="dialog" style="display: none">
<b>Id:</b> <span id="id"></span>
<br />
<b>Name:</b> <span id="name"></span>
<br />
<b>Description:</b> <span id="description"></span>
<br />
<b>Manager:</b> <span id="manager"></span>
<br />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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">
$(document).on("click", "[id*=lnkView]", function () {
var id = $(".Id", $(this).closest("tr")).html();
alert(id);
$("#id").html($(".Id", $(this).closest("tr")).html());
$("#name").html($(".Name", $(this).closest("tr")).html());
$("#description").html($(".Description", $(this).closest("tr")).html());
// $("#manager").html($(".Manager", ).html());
$("#manager").html("hi");
alert($(this).closest('tr').find($("[id*=hdnIdMgr]")).val());
$("#dialog").dialog({
title: "View Details",
buttons: {
Ok: function () {
$(this).dialog('close');
}
},
modal: true
});
return false;
});
</script>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[4] { new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Description",typeof(string)),
new DataColumn("IdManager",typeof(int))
});
dt.Rows.Add(1, "John Hammond", "Works as a scientist in USA.",100);
dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.",101);
dt.Rows.Add(3, "Suzanne Mathews", "Content Writer in France.",102);
dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.",103);
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
