ASP.net SqlDataSource.Update button with AJAX - asp.net

I cannot figure out how to use SqlDataSource.Update() in an UpdatePanel to avoid a page refresh. Here is the application structure:
Div click event calls ASP:Button > ASP:Button OnClick event calls SqlDataSource.Update() code behind > DB column is updated
I am trying to do all this without refreshing the page. Here is my code:
Default.aspx:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true"/>
<asp:Timer ID="Timer1" runat="server" Interval="10000" OnTick="Timer1_Tick" Enabled="True" />
<div class="square" id="myId" runat="server">
<div class="content">
<div class="table">
<div class="table-cell">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
<asp:AsyncPostBackTrigger ControlID="myBtn" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="myBtn" runat="server" Text="Button" OnClick="my_Click" />
<p id="MyText" class="p">Unavailable for Dispatch</p>
<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataSourceID="SqlDataSource1" CssClass="Grid" RowStyle-HorizontalAlign="Center" DataKeyNames="PhysicalAddress">
<Fields>
<asp:BoundField DataField="OwnerName" HeaderText="OwnerName" ShowHeader="False" SortExpression="OwnerName">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="Building" HeaderText="Building" ShowHeader="False" SortExpression="Building" ItemStyle-CssClass="building">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="TimeOn" HeaderText="TimeOn" ShowHeader="False" SortExpression="TimeOn">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="IPAddress" HeaderText="IPAddress" ShowHeader="False" SortExpression="IPAddress" ItemStyle-CssClass="hide">
<ControlStyle BorderStyle="None" />
<ItemStyle BorderStyle="None" />
</asp:BoundField>
<asp:BoundField DataField="PhysicalAddress" HeaderText="PhysicalAddress" ShowHeader="False" ReadOnly="True" SortExpression="PhysicalAddress" ItemStyle-CssClass="hide">
<ItemStyle CssClass="hide" />
</asp:BoundField>
<asp:BoundField DataField="Available" HeaderText="Available" ShowHeader="False" SortExpression="Available" ItemStyle-CssClass="hide">
<ItemStyle CssClass="hide" />
</asp:BoundField>
</Fields>
<RowStyle HorizontalAlign="Center" />
</asp:DetailsView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyDbConnectionString %>" SelectCommand="SELECT [OwnerName], [Building], [TimeOn], [IPAddress], [PhysicalAddress], [Available] FROM [MyDb] WHERE ([OwnerName] = #OwnerName)" UpdateCommand="UPDATE [MyDb] SET [Available] = CASE WHEN Available = '0' THEN '1' ELSE '0' END WHERE ([OwnerName] = #OwnerName)"> <SelectParameters> <asp:Parameter DefaultValue="My Name" Name="OwnerName" Type="String" /> </SelectParameters> <UpdateParameters> <asp:Parameter Name="OwnerName" /> </UpdateParameters> </asp:SqlDataSource>
jQuery Div click event:
$('#myId').on('click', (function (clickEvent) {
document.getElementById("myBtn").click();
})
)
Default.aspx.cs
protected void my_Click(object sender, EventArgs e)
{
SqlDataSource1.UpdateParameters["OwnerName"].DefaultValue = "My Name";
SqlDataSource1.Update();
Response.Redirect(Request.Url.AbsoluteUri);
}
Bear in mind that all of this does work, but not without refreshing the entire page after ADO.NET event. Here is the event Output:
Thank you for any advice.

I looked at my event output posted above and answered my own question.
I changed my code-behind to:
protected void my_Click(object sender, EventArgs e) {
SqlDataSource1.UpdateParameters["OwnerName"].DefaultValue = "My Name";
SqlDataSource1.Update();}
...and of course I am no longer called the Response.Redirect. It is working as expected now.
Thank you!

Related

showing gridview on textbox keyup event without postback

can someone plz tell me how to show data in gridview without postback when i enter some text in textbox .... i mean onkeyup event without postback
with postback i am able to do the same in asp.net using C#...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function runPostback() {
document.forms["form1"].submit();
document.getElementById("TextBox1").focus();
}
function SetDelay() {
setTimeout("runPostback()", 100);
}
</script>
<style type="text/css">
.style1
{
width: 100%;
}
FixedHeader {
position: absolute;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<%--<asp:TextBox ID="TextBox1" runat="server"
onkeyup="javascript:_doPostBack('TextBob1',' ')" onfocus="this.value = this.value;"
AutoPostBack="true" ontextchanged="TextBox1_TextChanged" ></asp:TextBox>
<br />
--%>
<asp:UpdatePanel ID="gridsearchUpdatePanel" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TextBox1" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="TextBox1" onkeyup="SetDelay();" runat="server" Width="490px"></asp:TextBox>
<div id="gridDiv" style="max-height:190px; overflow:auto; max-width:495px; ">
<asp:GridView ID="SearchGridView" runat="server" AutoGenerateColumns="False"
HeaderStyle-CssClass="FixedHeader" HeaderStyle-BackColor="YellowGreen"
DataSourceID="SearchMembersSqlDataSource" Width="476px" CellPadding="3"
GridLines="Horizontal" BackColor="White" BorderColor="#E7E7FF"
BorderStyle="None" BorderWidth="1px" ShowHeader="False" >
<AlternatingRowStyle BackColor="#F7F7F7" />
<Columns>
<asp:BoundField DataField="id" HeaderText="id" SortExpression="id" />
<asp:BoundField DataField="vname" HeaderText="vname" SortExpression="vname" />
<asp:BoundField DataField="vemail" HeaderText="vemail"
SortExpression="vemail" />
<asp:BoundField DataField="vpassword" HeaderText="vpassword"
SortExpression="vpassword" />
</Columns>
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7"
Wrap="True" />
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<SortedAscendingCellStyle BackColor="#F4F4FD" />
<SortedAscendingHeaderStyle BackColor="#5A4C9D" />
<SortedDescendingCellStyle BackColor="#D8D8F0" />
<SortedDescendingHeaderStyle BackColor="#3E3277" />
</asp:GridView>
</div>
<asp:SqlDataSource ID="SearchMembersSqlDataSource" runat="server"
ConnectionString="<%$ ConnectionStrings:DemoDBConnectionString %>"
SelectCommand="prcAdvanceSearchUser" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:ControlParameter ControlID="TextBox1" Name="username" PropertyName="Text" Type="String" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Is there any way of doing it without postback ???
You can try changing the display style of the DIV layer which is holding the GridView.
Modify the TextBox
<asp:TextBox ID="TextBox1" onkeyup="OnKeyUp_TextBox();" runat="server" Width="490px"></asp:TextBox>
Also the script function to be called
function OnKeyUp_TextBox() {
var oGridDIV = document.getElementById("gridDiv");
if(oGridDIV != null) {
oGridDIV.display = "block"; // display the DIV layer with gridview
// oGridDIV.display = "none"; // hide the DIV layer with gridview
}
}
ANd finally the style of the DIV layer holding the GridView
<div id="gridDiv" style="max-height:190px; overflow:auto; max-width:495px; display:none;">

Button Outside Gridview not firing once click on Edit button of gridview

I have a gridview and i have two buttons edit and delete.Once i click on edit button, i take the values and put those in textboxes outside grid and visible update and cancel button. but that does not fires..
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Panel ID="pnladdproduct" runat="server">
<div class="mws-form-col-1-8">
<asp:Label ID="Label11" runat="server" AssociatedControlID="btnAddProduct"> </asp:Label>
<div class="mws-form-item large">
<asp:Button ID="btnAddProduct" ValidationGroup="grpProduct" runat="server" CssClass="mws-button red" Text="Add" OnClick="btnAddProduct_Click" />
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnlUpdateProduct" runat="server">
<div class="mws-form-col-1-8">
<asp:Label ID="Label12" runat="server" AssociatedControlID="btnUpdateProduct"> </asp:Label>
<div class="mws-form-item large">
<asp:Button ID="btnUpdateProduct" runat="server" CausesValidation="False" CssClass="mws-button blue" Text="Update" OnClick="btnUpdateProduct_Click" />
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnlCancel" runat="server">
<div class="mws-form-col-1-8">
<asp:Label ID="Label13" runat="server" AssociatedControlID="btnCancelUpdate"> </asp:Label>
<div class="mws-form-item large">
<asp:Button ID="btnCancelUpdate" CausesValidation="False" runat="server" CssClass="mws-button gray" Text="Cancel" OnClick="btnCancelUpdate_Click" />
</div>
</div>
</asp:Panel>
<div class="mws-form-col-8-8">
<asp:GridView ID="grdProduct" ShowHeaderWhenEmpty="True" CssClass="mGrid" runat="server" AutoGenerateColumns="False" AllowPaging="True" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" OnPageIndexChanging="grdProduct_PageIndexChanging" OnRowDeleting="grdProduct_RowDeleting" OnRowEditing="grdProduct_RowEditing">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Product" SortExpression="Product" />
<asp:BoundField DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity" />
<asp:BoundField DataField="Rate" HeaderText="Rate" SortExpression="Rate" />
<asp:BoundField DataField="Amount" HeaderText="Amount" SortExpression="Amount" />
<asp:ButtonField ButtonType="Image" CommandName="Edit" HeaderText="Edit" ImageUrl="~/css/icons/16/edit.png" ShowHeader="True" Text="Edit" />
<asp:ButtonField ButtonType="Image" CommandName="Delete" HeaderText="Delete" ImageUrl="~/css/icons/16/delete.png" ShowHeader="True" Text="Delete" />
<asp:TemplateField HeaderText="HiddenColumn">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<asp:HiddenField ID="hdfProductID" runat="server" Value='<%# Bind("ProID") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
No Products Added !!
</EmptyDataTemplate>
</asp:GridView>
<div class="mws-form-row inline">
<asp:Label ID="Label15" runat="server" AssociatedControlID="txtQuantity">Total Amount</asp:Label>
<div class="mws-form-item medium">
<asp:TextBox ID="txtTotalAmount" BackColor="Beige" BorderColor="red" ReadOnly="True" CssClass="mws-textinput" runat="server"></asp:TextBox>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdateProduct" EventName="Click"/>
<asp:PostBackTrigger ControlID="btnCancelUpdate" />
</Triggers>
</asp:UpdatePanel>
Server side Code..
protected void grdProduct_RowEditing(object sender, GridViewEditEventArgs e)
{
Session["proID"] = StepGetHiddenValuesFromGridControl(e.NewEditIndex);
txtQuantity.Text = grdProduct.Rows[e.NewEditIndex].Cells[1].Text;
txtRate.Text = grdProduct.Rows[e.NewEditIndex].Cells[2].Text;
txtAmount.Text = grdProduct.Rows[e.NewEditIndex].Cells[3].Text;
txtQuantity.BackColor = Color.Beige;
txtRate.BackColor = Color.Beige;
txtAmount.BackColor = Color.Beige;
//pnladdproduct.Visible = false;
//pnlUpdateProduct.Visible = true;
//pnlCancel.Visible = true;
}
protected void btnUpdateProduct_Click(object sender, EventArgs e)
{
// this code not firing
}
I don't think there's a need for triggers.

visual studio doesn't see the dropdownlist for trigger

I have a VB.NET / ASP.NET web application. I added a dropdownlist into FooterTemplate of a Gridview. And I used ajax for postbacks. But when I add the dropdown to the triggers, vs gives me that error :
A control with ID 'DropDownList2' could not be found for the trigger in UpdatePanel 'UpdatePanel1'.
ASP.NET code is like that :
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView2" runat="server" Width="329px" AutoGenerateColumns="False"
Font-Names="Arial" Font-Size="11pt"
AlternatingRowStyle-BackColor="#C2D69B" HeaderStyle-BackColor="green"
AllowPaging="True" ShowFooter="True" OnPageIndexChanging="OnPaging"
Style="margin-right: 0px" BackColor="White" BorderColor="#336666"
BorderStyle="Double" BorderWidth="3px" CellPadding="3"
GridLines="Horizontal">
<AlternatingRowStyle BackColor="#C2D69B" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="lnkRemove" runat="server" CommandArgument='<%# Eval("il_ad")%>'
OnClientClick="return confirm('SİLMEK İSTEDİĞİNİZDEN EMİN MİSİNİZ?')"
Text="SİL" OnClick="DeleteDURUM"></asp:Button>
</ItemTemplate>
<FooterTemplate>
<asp:Button ID="btnAdd" runat="server" Text="EKLE" OnClick="AddNewDURUM" />
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField EditText="DEĞİŞTİR" ButtonType="Button"
CancelText="İPTAL" DeleteText="SİL" UpdateText="KAYDET" ControlStyle-Width="70PX"
CausesValidation="False">
<ControlStyle Width="70px" />
</asp:CommandField>
<asp:TemplateField ItemStyle-Width="30px" HeaderText="YTM No">
<ItemTemplate>
<asp:Label ID="lblytm_id" runat="server" Text='<%# Eval("ytm_id")%>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="30px"></ItemStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="İl">
<ItemTemplate>
<asp:Label ID="il_ad" runat="server" Text='<%# Eval("il_ad")%>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="il_ad" runat="server" Text='<%# Eval("il_ad")%>'></asp:TextBox>
</EditItemTemplate>
<!-- Dropdownlist is here : -->
<FooterTemplate>
<asp:DropDownList ID="DropDownList2" runat="server" Width= "120px" DataSourceID="iller_yukle" AutoPostBack="True">
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="White" ForeColor="#333333" />
<HeaderStyle BackColor="#336666" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#336666" ForeColor="#000066" HorizontalAlign="Left" />
<RowStyle BackColor="White" ForeColor="#000066" />
<SelectedRowStyle BackColor="#339966" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F7F7F7" />
<SortedAscendingHeaderStyle BackColor="#487575" />
<SortedDescendingCellStyle BackColor="#E5E5E5" />
<SortedDescendingHeaderStyle BackColor="#275353" />
</asp:GridView>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView2" />
<asp:AsyncPostBackTrigger ControlID="DropDownList2" /> <!-- Error is here -->
</Triggers>
</asp:UpdatePanel>
where is the mistake, I couldn't figure it out, thanks..
The DropDownList only exists within the GridView and you cannot access controls within a GridView directly.
You would need to dynamically add the trigger to the UpdatePanel after you have bound the GridView.
To dynamically add it you would need to first Bind your gridview, then register the trigger
AsyncPostBackTrigger apt = new AsyncPostBackTrigger();
apt.ControlID = ((Button)this.GridView1.FooterRow.FindControl("btnTrigger")).UniqueID;
apt.EventName = "Click";
this.UpdatePanel1.Triggers.Add(apt);
In this example I am using a button's click event to trigger the UpdatePanel. You can adapt this to the DropDownList
Generally the mistake is that you don't need to specify triggers for controls inside an UpdatePanel till you don's set ChildrenAsTriggers="false" on that UpdatePanel

Gridview not displaying in Panel associated with a ModalPopupExtender

I have two imagebuttons which are associated with a modalpopupextender. When I click imagebutton1, it opens up the panel and within that panel there is a grid which loads with the information. However, when I click Imagebutton2 it opens up the panel but does not display the gridview even though that gridview tag is under that panel.
I am pretty new with web, please help. Thank You. Please find the code below:
<asp:Panel ID="PNL" ScrollBars="Auto" runat="server" Style="border: 2px solid Black; display: none; width: auto;
background-color: White; padding: 20px; text-align: center;" Height="444">
<asp:Label ID="LabelCount" runat="server" Text="Label" Font-Size="Large"
style="text-align: center"></asp:Label>
<asp:Button ID="ButtonOK" Text="OK" runat="server" />
<%-- Area for keeping POPUP grid ot window or picture DO NOT PUT UNDER TABLE Taj 3-Jan-2010--%>
<asp:GridView ID="gvUsersWHYME" runat="server" BackColor="White" BorderColor="#010101"
BorderStyle="None" CaptionAlign="Top" CellPadding="1" CellSpacing="2" GridLines="None"
Style="margin-left: 0px" DataSourceID="SqlDataSource0" AutoGenerateColumns="False"
EnableTheming="False" AllowSorting="True"
OnRowDataBound="gvUsers_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Roles" Visible="False">
<HeaderTemplate>
<asp:CheckBox ID="chkAll" runat="server"
onclick="javascript:SelectAllCheckboxesSpecific(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkGenerate" runat="server"
onclick="javascript:HighlightRow(this);" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ProjectNum" HeaderText="Release#" SortExpression="ProjectNum"
ReadOnly="true" />
<asp:BoundField DataField="IPMRefNum" HeaderText="IPM Ref #"
SortExpression="IPMRefNum" />
<asp:BoundField DataField="TestprojectNo" HeaderText="Release Description" SortExpression="TestprojectNo"
ItemStyle-Width="444">
<ItemStyle Width="444px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="ProjectName" HeaderText="ProjectName" SortExpression="ProjectName"
Visible="False" />
<asp:BoundField DataField="ProposedPhaseName" HeaderText="Proposed Phase Name" ItemStyle-Wrap="False"
SortExpression="ProposedPhaseName">
<ItemStyle Wrap="False"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="DependencyList" HeaderText="Dependency List"
SortExpression="DependencyList" />
<asp:BoundField DataField="QA_Planned_EndDate" HeaderText="Release Handover Date"
SortExpression="QA_Planned_EndDate" DataFormatString="{0:d}"
ItemStyle-Wrap="False">
<ItemStyle Wrap="False"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="Applications" HeaderText="Impacted Application(s)"
SortExpression="Applications" />
<asp:BoundField DataField="AppCount" HeaderText="Count"
SortExpression="AppCount" />
</Columns>
<FooterStyle BackColor="White" ForeColor="#330099" />
<RowStyle BackColor="White" ForeColor="#330099" />
<HeaderStyle BackColor="#ACCDF6" Font-Bold="True" ForeColor="#FFFFCC" />
</asp:GridView>
<asp:Label ID="lblCountImpacted" runat="server" Text="Total Impacted App."
Font-Size="Large"></asp:Label>
</asp:Panel>
<br />
<br />
<br />
<br />
<br />
<asp:Panel ID="Panel1" ScrollBars="Auto" runat="server" Style="border: 2px solid Black; display: none; width: auto;
background-color: White; padding: 20px; text-align: center;" Height="444">
<asp:Button ID="Button1" Text="OK" runat="server" />
<asp:GridView ID="GridView4" runat="server" BackColor="White" BorderColor="#010101"
BorderStyle="None" CaptionAlign="Top" CellPadding="1" CellSpacing="2" GridLines="None"
Style="margin-left: 0px" DataSourceID="SqlDataSource6" AutoGenerateColumns="False"
EnableTheming="False" AllowSorting="True"
OnRowDataBound="GridView4_RowDataBound">
<Columns>
<asp:BoundField DataField="ProjectNum" HeaderText="Release#" SortExpression="ProjectNum"
ReadOnly="true" />
<asp:BoundField DataField="IPMRefNum" HeaderText="IPM Ref #"
SortExpression="IPMRefNum" />
<asp:BoundField DataField="TestprojectNo" HeaderText="Release Description" SortExpression="TestprojectNo"
ItemStyle-Width="444">
<ItemStyle Width="444px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="ProjectName" HeaderText="ProjectName" SortExpression="ProjectName"
Visible="False" />
<asp:BoundField DataField="ProposedPhaseName" HeaderText="Proposed Phase Name" ItemStyle-Wrap="False"
SortExpression="ProposedPhaseName">
<ItemStyle Wrap="False"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="DependencyList" HeaderText="Dependency List"
SortExpression="DependencyList" />
<asp:BoundField DataField="QA_Planned_EndDate" HeaderText="Release Handover Date"
SortExpression="QA_Planned_EndDate" DataFormatString="{0:d}"
ItemStyle-Wrap="False">
<ItemStyle Wrap="False"></ItemStyle>
</asp:BoundField>
</Columns>
<FooterStyle BackColor="White" ForeColor="#330099" />
<RowStyle BackColor="White" ForeColor="#330099" />
<HeaderStyle BackColor="#ACCDF6" Font-Bold="True" ForeColor="#FFFFCC" />
</asp:GridView>
</asp:Panel>
I have created a sample code.Similar to your problem.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="MasterDetail.aspx.cs"
Inherits="MasterDetail" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form" runat="server">
<asp:ScriptManager ID="scriptManager" runat="server" />
<div>
<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblTitle" runat="server" Text="Customers" BackColor="lightblue" Width="95%" />
<asp:GridView ID="gvCustomers" runat="server" DataKeyNames="Id" AutoGenerateColumns="false"
AllowPaging="true" AllowSorting="true" PageSize="10" Width="95%">
<AlternatingRowStyle BackColor="aliceBlue" />
<HeaderStyle HorizontalAlign="Left" />
<Columns>
<asp:TemplateField ControlStyle-Width="50px" HeaderStyle-Width="60px">
<ItemTemplate>
<asp:Button ID="btnViewDetails" runat="server" Text="Details" OnClick="BtnViewDetails_Click" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Id" HeaderText="ID" SortExpression="Id" ReadOnly="true" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="contactname" ReadOnly="true" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<ajaxtoolkit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup"
PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" runat="server" Width="500px" Style="display: none">
<asp:UpdatePanel ID="updPnlCustomerDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblCustomerDetail" runat="server" Text="Customer Detail" BackColor="lightblue"
Width="95%" />
<asp:DetailsView ID="dvCustomerDetail" runat="server" DefaultMode="Edit" Width="95%"
BackColor="white" />
</ContentTemplate>
</asp:UpdatePanel>
<div align="right" style="width: 95%">
<asp:Button ID="btnSave" runat="server" Text="Save"
OnClientClick="alert('Sorry, but I didnt implement save '); return false;"
Width="50px" />
<asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
</div>
</asp:Panel>
</div>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class MasterDetail : System.Web.UI.Page
{
DataSet ds;
protected void Page_Load(object sender, EventArgs e)
{
ds = Data();
if (!this.IsPostBack)
{
if (Session["parent"] == null)
{
gvCustomers.DataSource = ds.Tables["Parent"];
gvCustomers.DataBind();
}
else
{
gvCustomers.DataSource = Session["Parent"] as DataTable;
gvCustomers.DataBind();
}
}
}
private DataSet Data()
{
DataTable dt = new DataTable();
dt.Columns.Add("Id", typeof(int));
dt.Columns.Add("Name", typeof(string));
dt.Rows.Add(new object[] { 1, "aaaa" });
dt.Rows.Add(new object[] { 2, "bbbb" });
dt.Rows.Add(new object[] { 3, "cccc" });
dt.TableName = "Parent";
DataTable dtc = new DataTable();
dtc.Columns.Add("Id", typeof(int));
dtc.Columns.Add("Qul", typeof(string));
dtc.Rows.Add(new object[] { 1, "aaaa" });
dtc.Rows.Add(new object[] { 2, "bbbb" });
dtc.Rows.Add(new object[] { 3, "bbbb" });
dtc.TableName = "Child";
DataSet ds = new DataSet();
ds.Tables.Add(dt);
ds.Tables.Add(dtc);
Session["Parent"] = dt;
return ds;
}
protected void BtnViewDetails_Click(object sender, EventArgs e)
{
// get the gridviewrow from the sender so we can get the datakey we need
Button btnDetails = sender as Button;
GridViewRow row = (GridViewRow)btnDetails.NamingContainer;
// extract the id from the row whose details button originated the postback.
// grab the customerid and feed it to the customer details datasource
// finally, rebind the detailview
DataView dv = new DataView(ds.Tables["Child"]);
dv.RowFilter = "Id=" + Convert.ToString(this.gvCustomers.DataKeys[row.RowIndex].Value);
dvCustomerDetail.DataSource = dv;
dvCustomerDetail.DataBind();
// update the contents in the detail panel
this.updPnlCustomerDetail.Update();
// show the modal popup
this.mdlPopup.Show();
}
}

Asp ModalPopupExtender not displaying detail view

I am using a ModalPopupExtender within an updatePanel to show a detailView when a user selects a "Details" Button within a GridView.
The problem is that when the button is selected the popup is not being displayed. I have stepped through the code and the mdlPopup.Show() method is being executed but the popup does not "Show" Could someone perhaps help me out with what is happening?
Here is my Code:
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetRequests"
TypeName="RequestDAL" SortParameterName="SortExpression"></asp:ObjectDataSource>
<asp:ObjectDataSource ID="ObjectDataSourceDetails" runat="server" SelectMethod="GetRequestsDetail"
OnSelecting="OdsDetail_Selecting" TypeName="RequestDAL"></asp:ObjectDataSource>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="RequestID"
DataSourceID="ObjectDataSource1" EnableModelValidation="True" AllowSorting="True"
CellPadding="10" ForeColor="#333333" GridLines="None" OnSelectedIndexChanged="gv_SelectedIndexChanged">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:CommandField ShowSelectButton="True" />
<asp:BoundField DataField="DateSubmit" HeaderText="DateSubmit" SortExpression="DateSubmit" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="lName" />
<asp:BoundField DataField="FirstDate" HeaderText="Date" SortExpression="FirstDate" />
<asp:BoundField DataField="BeginTime" HeaderText="Begin Time" SortExpression="beginTime" />
<asp:BoundField DataField="EndTime" HeaderText="End Time" SortExpression="endTime" />
<asp:BoundField DataField="Lab" HeaderText="Lab" SortExpression="room" />
<asp:BoundField DataField="ClassName" HeaderText="Class" SortExpression="Class" />
<asp:BoundField DataField="Semester" HeaderText="Semester" SortExpression="term" />
<asp:BoundField DataField="RequestID" HeaderText="RequestID" SortExpression="id" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="btnDetails" runat="server" Text="Details" CommandName="Select" /></ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
</asp:GridView>
<asp:Panel ID="pnlPopup" runat="server" Style="display: none" Width="500px">
<asp:UpdatePanel ID="updatePnlRequestDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<Ajax:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup"
PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" />
<asp:Label ID="lblRequestDetail" runat="server" Text="Request Detail" BackColor="LightBlue"
Width="95%"></asp:Label>
<asp:DetailsView ID="dvRequestDetail" DataSourceID="ObjectDataSourceDetails" runat="server"
DefaultMode="Edit" Width="95%" BackColor="White" Visible="false">
<Fields>
<asp:BoundField HeaderText="Id" DataField="RequestID" /></Fields>
</asp:DetailsView>
<asp:LinkButton runat="server" ID="btnClose" Text="Close" CausesValidation="false"></asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
protected void gv_SelectedIndexChanged(object sender, EventArgs e) {
//show the detail view to render
dvRequestDetail.Visible = true;
// force the databinding
dvRequestDetail.DataBind();
// update the detail panel
updatePnlRequestDetail.Update();
//show the popup
mdlPopup.Show();
}
protected void OdsDetail_Selecting(object sender, ObjectDataSourceSelectingEventArgs e)
{
try
{
e.InputParameters["id"] = Convert.ToString(this.GridView1.DataKeys[this.GridView1.SelectedIndex].Value);
}
catch(Exception ex)
{
throw new Exception(ex.Message);
}
}
This is all taken from a tutorial I found for using Modal Popup extenders with ObjectDataSources http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html
2 thing I whould do:
set your GridView as a AsyncPostBackTrigger for the popup UpdatePanel.
put the TargetControl and the ModalPopupExtender outside of the PopupControl Panel.
<asp:Panel ID="pnlPopup" runat="server" Style="display: none" Width="500px">
<asp:UpdatePanel ID="updatePnlRequestDetail" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView1" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblRequestDetail" runat="server" Text="Request Detail" BackColor="LightBlue" Width="95%"></asp:Label>
<asp:DetailsView ID="dvRequestDetail" DataSourceID="ObjectDataSourceDetails" runat="server" DefaultMode="Edit" Width="95%" BackColor="White" Visible="false">
<Fields>
<asp:BoundField HeaderText="Id" DataField="RequestID" />
</Fields>
</asp:DetailsView>
<asp:LinkButton runat="server" ID="btnClose" Text="Close" CausesValidation="false"></asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<Ajax:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlPopup" CancelControlID="btnClose" BackgroundCssClass="modalBackground" />

Resources