I have a RadioButtonList with AutoPostBack=true that is within a Repeater. The entire Repeater is surrounded by an Update Panel. However, the RadioButtonList is causing a full postback to occur.
I have tried other scenarios where the UpdatePanel is also within the repeater as well and still get the same issue.
The following code shows the issue.
The first Radio Button is outside of an Update Panel and should cause a full postback. This works correctly.
The second Radio Button is within its own Update Panel and should cause a partial postback. This works correctly.
The third Radio Button is within a Repeater that is within an Update Panel. This should cause a partial postback, however, it is causing a full postback.
The fourth Radio Button is within an Update Panel that is within a Repeater. This should also cause a prtial postback, however, it is causing a full postback.
<%# Page Language="C#" AutoEventWireup="true" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
rptTest1.DataSource = Enumerable.Range(1, 1);
rptTest1.DataBind();
rptTest2.DataSource = Enumerable.Range(1, 1);
rptTest2.DataBind();
}
}
</script>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="script1" EnablePartialRendering="true" runat="server" />
Date1: <%=System.DateTime.Now.ToString() %>
<asp:RadioButtonList ID="rbl1" AutoPostBack="true" runat="server">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
</asp:RadioButtonList>
<br /><br />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
Date2: <%=System.DateTime.Now.ToString() %>
<asp:RadioButtonList ID="rbl2" AutoPostBack="true" runat="server">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
</asp:RadioButtonList>
<br /><br />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel runat="server" id="upd1" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rptTest1" runat="server">
<ItemTemplate>
Date3: <%=System.DateTime.Now.ToString() %>
<asp:RadioButtonList ID="rbl3" AutoPostBack="true" runat="server">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
</asp:RadioButtonList>
<br /><br />
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Repeater ID="rptTest2" runat="server">
<ItemTemplate>
<asp:UpdatePanel runat="server" id="upd2" UpdateMode="Conditional">
<ContentTemplate>
Date4: <%=System.DateTime.Now.ToString() %>
<asp:RadioButtonList ID="rbl4" AutoPostBack="true" runat="server">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem>b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
</asp:RadioButtonList>
<br /><br />
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
I need to find a way of having an AutoPostBack RadioButton within a repeater that does NOT cause a full postback as the page itself is large and the resulting postback causes a large flicker to the end user.
Related
I have a very simple application. I am trying to upload the file using File upload control of ASP.net. Below is my entire .cs code and .aspx code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestFileUpload1
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void uploadFile_Click(object sender, EventArgs e)
{
if (UploadImages.HasFiles)
{
foreach (HttpPostedFile uploadedFile in UploadImages.PostedFiles)
{
uploadedFile.SaveAs(System.IO.Path.Combine(Server.MapPath("~/Images/"), uploadedFile.FileName));
//listofuploadedfiles.Text += String.Format("{0}<br />", uploadedFile.FileName);
}
}
}
}
}
My .aspx code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestFileUpload1.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test web site</title>
<script src="Scripts/jquery-1.11.0.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
<asp:Label ID="listofuploadedfiles" runat="server" />
</div>
</div>
</form>
</body>
</html>
whenever I try to upload a file, I get "False" for UploadImages.HasFiles.
Above is full working example.
As soon as I remove one of these script tags :
<script src="Scripts/jquery-1.11.0.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
my code starts working and I get "true" for UploadImages.HasFiles when I try to upload a file.
I am using .net framework 4.7.2
I need to keep these two script tags in my code because of the GUI and this is an old application where these tags are used in all the pages.
I also tried to wrap the control in a update panel and that didn't work either. below is the changed .aspx page. although, I want my original code to work. I don't want to use ajax, but I just tried to use it because it is suggested as one of the solution
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestFileUpload1.WebForm1" %>
<%--<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp"%>--%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test web site</title>
<script src="Scripts/jquery-1.11.0.js"></script>
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:FileUpload runat="server" ID="UploadImages" AllowMultiple="true" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="uploadedFile" />
</Triggers>
</asp:UpdatePanel>
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
<asp:Label ID="listofuploadedfiles" runat="server" />
</div>
</div>
</form>
</body>
</html>
below is the image of false value that I am getting in code behind:
Any help will be highly appreciated.
All I had to do is put data-ajax ="false" in form tag and that fixed the issue.
<form id="form1" runat="server" data-ajax ="false">
Use a update panel and wrap your controls inside it. Then add the button controlID as a trigger (be sure its a PostBackTrigger) to the update panel. To test be sure to put a break point on the uploadFile_Click event so you can step through and see the values..
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnSignaureOfRequestor" />
</Triggers>
<ContentTemplate>
<table>
<tr> <td class="tdText" colspan="4">
<asp:FileUpload ID="fileUpload" runat="server" Width="50%" />
</td>
</tr>
<tr>
<td> <asp:Button ID="btnSignaureOfRequestor" runat="server" Text="Submit Request" Visible="true" OnClientClick="return confirm('Are you sure you want to continue?');" OnClick="btnSignaureOfRequestor_Click" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
Try the below, removed allow multiple and add update mode conditional (see confirm case/syntax of these changes as I'm just writing it in notepad)
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" updateMode="Conditional">
<ContentTemplate>
<asp:FileUpload runat="server" ID="UploadImages" />
<asp:Button runat="server" ID="uploadedFile" Text="Upload" OnClick="uploadFile_Click" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="uploadedFile" />
</Triggers>
</asp:UpdatePanel>
<asp:Label ID="listofuploadedfiles" runat="server" />
</div>
</div>
I've tried to use the DropDownList to update the content of a label.
The first one is the Asynchronous Transfer Mode. The page doesn't refresh when a new item is selected.
The second one is the Synchronous Transfer Mode. The entire page is refreshed when a new item is selected.
However, neither of these two labels refreshed as I like when I tried to selected a new item in my DropDownList.
Could anyone help me?
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="ex8_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
</asp:ScriptManager>
<div>
Password：<asp:TextBox ID="TextBox1" runat="server" TextMode="Password"></asp:TextBox>
<br />
<br />
Asynchronous Transfer Mode</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Value="1">Item 1</asp:ListItem>
<asp:ListItem Value="2">Item 2</asp:ListItem>
<asp:ListItem Value="3">Item 3</asp:ListItem>
<asp:ListItem Value="4">Item 4</asp:ListItem>
<asp:ListItem Value="5">Item 5</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<p>
Show selected item <asp:Label ID="Label1" runat="server"></asp:Label>
</p>
<p>
Synchronous Transfer Mode</p>
<p>
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
<asp:ListItem Value="1">Item 1</asp:ListItem>
<asp:ListItem Value="2">Item 2</asp:ListItem>
<asp:ListItem Value="3">Item 3</asp:ListItem>
<asp:ListItem Value="4">Item 4</asp:ListItem>
<asp:ListItem Value="5">Item 5</asp:ListItem>
</asp:DropDownList>
</p>
<p>
Show selected item <asp:Label ID="Label2" runat="server"></asp:Label>
</p>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class ex8_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Label1.Text = DropDownList1.SelectedValue;
}
protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
{
Label2.Text = DropDownList2.SelectedValue;
}
}
DropDownList1 is inside UpdatePanel, while Label1 is outside of it. UpdatePanel enables rendering part of a page which is inside of it. Therefore Label1 keeps the old value. If you place Label1 inside UpdatePanel, more precise inside ContentTemplate, you will see the change of the label.
UpdatePanel renders part of the page without postback. You can see that when you select an item from DropDownList1 there is no new go back arrow in your browser. The best way to check this is when you open the .aspx page and first select an item from DropDownList1. Go back arrow will still be disabled.
DropDownList2 is not inside an UpdatePanel and it uses postback to render entire page. This is the reason why Label1, if it is outside UpdatePanel, sets its value to selected item from DropDownList1 when you select an item from DropDownList2. Label1 got the selected item from DropDownList1, it just waits for the postback, which is fired by DropDownList1.
To update Label2 you need to add event handler OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged" to DropDownList2.
When removed UdpatePanel control, the DropDownList after SelectedIndexChanged, Label is updated with selectedvalue.
The ScriptManager and UpdatePanel controls remove the requirement to refresh the whole page with each postback, which improves the user experience.
More Information Here!
You can have one global UpdatePanel and then use UpdatePanels as per requirements. And then controls may not be restricted to particular UpdatePanel. It still gets refreshed.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form2" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList
ID="DropDownList1"
runat="server"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
AutoPostBack="True">
<asp:ListItem Value="1">Item 1</asp:ListItem>
<asp:ListItem Value="2">Item 2</asp:ListItem>
<asp:ListItem Value="3">Item 3</asp:ListItem>
<asp:ListItem Value="4">Item 4</asp:ListItem>
<asp:ListItem Value="5">Item 5</asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<p>
Show selected item <asp:Label ID="Label1" runat="server"></asp:Label>
</p>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
I have a very simple user control like this:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="tebimir.sections.WebUserControl1" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
And I have a page ajax.aspx like this:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="ajax.aspx.cs" Inherits="tebimir.ajax" %>
<%# Register Src="~/sections/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<uc1:WebUserControl1 runat="server" ID="WebUserControl1" />
</div>
</form>
</body>
</html>
And this is Button1 click code:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}
I want to update my label text to current date time without refreshing page but every time i click on button page is refreshed. why?
Do you have any other triggers in your user control because I don't see a closing tag for </asp:UpdatePanel>.I've created a brand new ASP.NET web forms web application and created the following user control and it works just fine(without refresh):
User control:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="StackOverflowClean.WebUserControl1" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Page that calls the user control:
<%# Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<uc1:WebUserControl1 runat="server" id="WebUserControl1" />
</div>
</form>
</body>
</html>
Page url: http://advancedmedia.co.il/data.aspx
Code:
<asp:Content ID="Content2" ContentPlaceHolderID="page_content_cp" Runat="Server">
<asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional">
<ContentTemplate>
<section id="page_section">
<div class="data_top">
<ul class="bxslider">
<asp:ListView ID="LV_slider" runat="server" DataSourceID="**">
<ItemTemplate>
<li>
<asp:Image ID="Image11" ImageUrl='<%#XPath("big_image_url") %>' AlternateText="slider" runat="server" />
</li>
</ItemTemplate>
</asp:ListView>
</ul>
</div>
<div class="shaddow"></div>
<div class="data_bottom">
<asp:ListView runat="server" ID="LV_data_bottom" DataSourceID="**">
<ItemTemplate>
<div style="display:inline;">
<asp:LinkButton runat="server" CommandArgument='<%#XPath("big_image_url") %>' ID="LB_thumb" OnClick="lb_thumb1" ><asp:Image runat="server" ID="IMG_img1" ImageUrl='<%#XPath("small_image_url") %>' />
<asp:Label runat="server" CssClass="title" ID="bottom_label" Text='<%#XPath("title") %>'></asp:Label></asp:LinkButton>
</div>
</ItemTemplate>
</asp:ListView>
</div>
</section>
</ContentTemplate>
</asp:UpdatePanel>
<asp:XmlDataSource ID="**" runat="server"
DataFile="~/***/***" XPath="/Data/**/**">
</asp:XmlDataSource>
</asp:Content>
Click on the thumbs "jump" the page.
I dont want the page will "jump"/"refresh" after click on thumb. how can i do that? Maybe i wrong on the place of the updatepanel ?
You can always get it done using updatepanel and microsoft ajax... but there is a better and more lightweight alternative. Use jquery to swap the main image on top when the thumbnails are clicked, without doing a page refresh.
Define a surrounding div for the imain image with id "imageBox"
<img class="thumb" src="image1_thumb.jpg" />
<div id="imageBox"> </div>
then,
$(document).ready(function(){
$('#changeImage').click(function(){
var rel = $(this).attr('rel');
$("#imageBox").html("<img src='image" + rel + ".jpg' />");
})
});
This is both clean and lightweight. no Microsoft ajax panel junk.
I'm not sure about what is your problem here, but if you want to separate the Update Panel into two you can do so.
There's an explanation on how different update panels can trigger themselves.
http://www.asp.net/web-forms/tutorials/aspnet-ajax/understanding-asp-net-ajax-updatepanel-triggers
Used AutoPostBack="false" in listview page can't be refresh ..or used javascript to change the image
Put ScriptManager.
<asp:ScriptManager EnablePartialRendering="true"
ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Content ID="Content2" ContentPlaceHolderID="page_content_cp" Runat="Server">
<asp:UpdatePanel runat="server" ID="UP1" UpdateMode="Conditional">
<!-- bla bla bla.. -->
Did you try to change the following
UpdateMode="Conditional"
With this?
UpdateMode="Always"
Set ClientIDMode=Auto on the LinkButton.
Everything seems correct.
Here is a sample for Update panel.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="Updatepanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Code Behind
namespace WebApplication3
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
this.Label1.Text = "change Test 1";
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
this.Label1.Text = "change Test 2";
}
}
}
I am using ModalPopupExtender from AjaxToolkit for asp.net. I am trying to have a ModalPopupExtender triggered with different buttons. The problem is that unless I am using the TargetControlID the popup opens and quickly closes within under a second. I need this popup to be accessible
by several different buttons with the same panel being used everytime.
The code below should replicate the problem nicely, on my actual application it almost works fine. Even content being updated with the chosen panel of the popup except that it closes after about 1/2 sec when i call .show() from OnClientClick;
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
//Function to Hide ModalPopUp
function Hidepopup() {
$find('AjaxPopupHi').hide();
}
//Function to Show ModalPopUp
function Showpopup() {
$find('AjaxPopupHi').show();
}
</script>
</head>
<form id="form1" runat="server">
<asp:LinkButton ID="lnk" OnClientClick = "Showpopup()" runat="server" Text="hi"></asp:LinkButton>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:Button ID="Button_dummy" Style="display: none" runat="server" Text="Button" />
<ajaxToolKit:ModalPopupExtender ID="mpe" runat="server" BehaviorID="AjaxPopupHi" TargetControlID="Button_dummy" PopupControlID="pnl"
CancelControlID="close" />
<!--BELOW panel does not remain OPEN :/-->
<asp:Panel ID="pnl" runat="server" CssClass="popupPanel">
<div>
Hi!!!
</div>
<asp:Button ID="close" runat="server" Text="Close" />
</asp:Panel>
</form>
Thanks
You can use like this
OnClientClick = "return Showpopup()"
function Showpopup() {
$find('AjaxPopupHi').show();
return false;
}
You must use return in you OnClientClick combining your code
<asp:LinkButton ID="lnk" OnClientClick = "return Showpopup()" runat="server" Text="hi">
</asp:LinkButton>
and your javascript function should be like
function Showpopup() {
$find('AjaxPopupHi').show();
return false;
}
It is very late but lets hope this helps someone who is looking for the answer.
When you click, a postback occurs and the page reloads. If you use updatepanel then your popup message will remain after page load. See this example below:
Aspx :
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Popup.aspx.cs" Inherits="Popup_example_Popup" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
//Function to Hide ModalPopUp
function Hidepopup() {
$find('AjaxPopupHi').hide();
}
//Function to Show ModalPopUp
function Showpopup() {
$find('AjaxPopupHi').show();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="udpOutterUpdatePanel" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnk" OnClientClick="Showpopup()" runat="server" Text="hi"></asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:Button ID="Button_dummy" Style="display: none" runat="server" Text="Button" />
<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" BehaviorID="AjaxPopupHi" TargetControlID="Button_dummy" PopupControlID="pnl"
CancelControlID="close" />
<asp:Panel ID="pnl" runat="server" CssClass="popupPanel">
<div>
Hi!!!
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="close" runat="server" Text="Close" OnClick="close_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
</body>
</html>
Code behind :
using System;
public partial class Popup_example_Popup : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void close_Click(object sender, EventArgs e)
{
mpe.Hide();
}
}