This is my Default.aspx
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<script runat="server">
Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
ScriptManager1.RegisterAsyncPostBackControl(HyperLink1)
End Sub
</script>
<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">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Panel Created"></asp:Label>
<asp:HyperLink NavigateUrl="Default2.aspx" ID="HyperLink1" runat="server">HyperLink</asp:HyperLink>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
I want that when a user clicks on the HyperLink , content from another .aspx page gets loaded in the Default.aspx without full page refresh
You can manually update your updatepanel from javascript.
Here you have the example:
How to refresh an UpdatePanel from javascript
Related
In the below code Changing asyncPostBackTrigger to PostBackTrigger causing the entirepage postback.
But the below code is not at all doing anything when we use the trigger as asyncPostBackTrigger.
Any suggestions about what I am doing wrong??
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="UpdatePanel_1" >
<ContentTemplate>
<asp:CheckBox ID="chkNotKnown" runat="server" AutoPostBack="True"
Text="(Not Known)" OnCheckedChanged="chkNotKnown_CheckedChanged"/>
</ContentTemplate>
<Triggers>
<asp:asyncPostBackTrigger ControlID="chkNotKnown"/>
</Triggers>
</asp:UpdatePanel>
<asp:TextBox ID="txtDrCode" runat="server" OnFocus="this.style.borderColor='red'" OnBlur="this.style.borderColor=''"></asp:TextBox>
</form>
</body>
</html>
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub chkNotKnown_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles chkNotKnown.CheckedChanged
With txtDrCode
If chkNotKnown.Checked Then
.Text = "Not Known"
.Enabled = False
Else
.Text = ""
.Enabled = True
End If
End With
End Sub
End Class
The chkNotKnown is inside the UpdatePanel, while txtDrCode is outside of it. Also you specify chkNotKnown as an asyncPostBackTrigger, which is the same as something already present in the UpdatePanel.
So either change the Trigger to a PostBackTrigger (causing a full PostBack)
<Triggers>
<asp:PostBackTrigger ControlID="chkNotKnown" />
</Triggers>
Or place the TextBox inside the UpdatePanel
<asp:UpdatePanel runat="server" ID="UpdatePanel_1">
<ContentTemplate>
<asp:CheckBox ID="chkNotKnown" runat="server" AutoPostBack="True"
Text="(Not Known)" OnCheckedChanged="chkNotKnown_CheckedChanged" />
<asp:TextBox ID="txtDrCode" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
I was trying this from some time, but I am not able to get around it. Following is the code of the aspx page display:
<!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">
Test<br />
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
</asp:DropDownList>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Following is the code for the button1 click event:
Public Class WebForm1
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles DropDownList1.SelectedIndexChanged
Label1.Text = DropDownList1.SelectedIndex
UpdatePanel1.Update()
End Sub
End Class
Could you please tell me what I missed out.
Set the autopostback to true in the drop down.
The true means: everytime the value in the drop down changes, a postback to the server will occur.
But listen to Tim Schmelter answer. If the drop down will not change, it's a good idea to put it outside the update panel and the update panel must be triggered asynchronous by the drop down (if you don't set a trigger to the update panel, every postback will update your updatepanel). If the content of the dropdown changes, put it inside the updatepanel.
But like I said, I'm not using that for a long time, its a good idea to double check everything I say about the subject. =p
PS: Microsoft Update Panels are easy to develop but make your site very slow. Try to learn about aspnet webservices and jQuery.
You have forgotten to set AutoPostback to True on your DropDownList. The default is False.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listcontrol.autopostback.aspx
And if you want to trigger Async-Postback in your UpdatePanel if the User changes the DropDownList, you have to specify an AsyncPostbackTrigger for the UpdatePanel, because the DropDown is outside of it.
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
Apart from that you need to place the ScriptManager at the beginning as Ed said.
Look here for more infos on ASP.NET-Ajax:
http://msdn.microsoft.com/en-us/magazine/cc163354.aspx
You need to place your Scriptmanager before any controls that will use it.
So place it above your dropdownlist control.
You also need to set the AutoPostBack property to true on the dropdownlist for the selectedindexchange event to fire on it.
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
Test<br />
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostback="true">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
</asp:DropDownList>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
Below is the correct markup, just put it to your page:
<!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">
Test<br />
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostback ="True">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
</asp:DropDownList>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</form>
I have a very simple page:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<%= DateTime.Now %>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%= DateTime.Now %>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
This version work as I expected. From firebug I can refresh the updatepanel everytime using __doPostBack('MainContent_UpdatePanel1','').
The second version has only one new control, this is AsyncFileUpload from ajax control toolkit. This time using javascript I can only refresh the updatepanel once. Why is this happening?
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<%= DateTime.Now %>
<asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%= DateTime.Now %>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
There seem to be a couple of issue re triggering postbacks with the upload control on the page
http://ajaxcontroltoolkit.codeplex.com/workitem/25475
I am trying to set up ajaxConfirmButton Extender. Here is my code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# 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="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script language="javascript" type="text/javascript">
function onCancel()
{
var lblMsg = $get('<%=lblMessage.ClientID%>');
lblMsg.innerHTML = "You clicked the <b>Cancel</b> button of AJAX confirm.";
}
</script>
<asp:Label ID="Label1" runat="server" Text="Click this button to open AJAX Confirm box:" Font-Bold="true" Font-Size="16px"></asp:Label><br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnConfirm" runat="server" Text="Confirm" OnClick="btnConfirm_Click" />
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" TargetControlID="btnConfirm"
ConfirmText="Are you sure?
You want to run the server code." OnClientCancel="onCancel" ConfirmOnFormSubmit="false">
</ajaxToolkit:ConfirmButtonExtender>
<asp:Label ID="lblMessage" runat="server"></asp:Label><br />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
code behind
protected void btnConfirm_Click(object sender, EventArgs e)
{
lblMessage.Text = "You clicked the <b>OK</b> button of AJAX confirm";
}
But the confirm wondow is not coming. It is just performing the onclick action. Need help to fix this problem
You need to use ToolkitScriptManager instead of ScriptManager.
<ajaxToolkit:ToolkitScriptManager ID="ToolKitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
Hope it will help you
I have a user control in a master page with two drop down lists. When the user selects an item out of either ddl, I want to load a specific user control inside an update panel on the content page. I can't figure out how to get the user control to trigger the update panel. Any suggestions are very much appreciated.
Master
<%# Register src="toolbar.ascx" tagname="toolbar" tagprefix="uc1" %>
<head id="Head1" runat="server">
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
</div>
<uc1:toolbar ID="toolbar1" runat="server" />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
User Control
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="toolbar.ascx.cs" Inherits="Blah.toolbar" %>
<asp:DropDownList ID="ddlDesiredPage" runat="server" AutoPostBack="True"
EnableViewState="True"
onselectedindexchanged="goToSelectedPage">
<asp:ListItem Value="-">DDL 1</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlDesiredPageSP" runat="server" AutoPostBack="True"
EnableViewState="True"
onselectedindexchanged="goToSelectedPage">
<asp:ListItem Value="-">DDL 2</asp:ListItem>
</asp:DropDownList>
Content Page
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" onload="UpdatePanel1_Load">
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</ContentTemplate>
<Triggers>
?????????????????????????????????
</Triggers>
</asp:UpdatePanel>
</asp:Content>
If you want to update the panel via the User Control you've created, you could try setting the UpdatePanel's UpdateMode = Conditional. Then, in your User Control's click event (or whichever event), have something like this:
UpdatePanel mUpdatePanel = this.Page.Master.FindControl("upContent") as UpdatePanel;
if (mUpdatePanel != null)
{
mUpdatePanel.Update();
}
else
{
//update panel not found
}
UPDATE
Since you can't access your triggers declaratively, you could add them from the code-behind. On your content page, add something like this:
AsyncPostBackTrigger triggerUserControl = new AsyncPostBackTrigger();
DropDownList ucDDL = this.Page.Master.FindControl("ddlDesiredPage") as DropDownList;
triggerUserControl.ControlID = ucDDL.ID;
triggerUserControl.EventName = "Click";
UpdatePanel1.Triggers.Add(triggerUserControl);
Do the same for the other DropDownList. I haven't tried this, but it seems reasonable.
Try adding a postback trigger to your UpdatePanel:
<Triggers>
<asp:PostBackTrigger ControlID="ddl..." />
</Triggers>