ASP.net Page Loading popup - c#

I was wondering if it is possible to have a modalpopup show up on page load, saying that the page is loading. I have a page that gets a lot of data from an external source which means it takes a bit before any of the controls are actually filled.
I would like to have a popup or something similar that tells the user the page is loading.
I tried this:
<ajax:ModalPopupExtender ID="mpeLoader" runat="server" TargetControlID="btnLoader"
PopupControlID="pnlLoading" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlLoading" runat="server" Width="100px" Style="display: none;">
<div class="detailspopup">
<table>
<tr>
<td><asp:Image ID="imgLoader" runat="server" ImageUrl="~/App_Themes/Main/img/loading.gif" /></td>
</tr>
<tr>
<td>Loading...</td>
</tr>
</table>
</div>
</asp:Panel>
with a dummy button btnLoader to allow me to access the show and hide from code behind. I've been toying with the .show method in the page lifecycle but I can't seem to find a way to have the poopup show when the page is loading (and disappear when loading is done). This would also be needed upon filtering the data, thus getting new data based on filter data.

Hard to say what the best solution is without more information, but one possible way to go is to make the first page just act as a "loader" containing the dialog and some javascript that will load the actual page with ajax.
Like I wrote before it depends very much on what you are trying to accomplish :-) !
But one way to do it with jQuery, if the page you are trying to load is very simple like a list without any state / postback controls is to create a "Loader"-page like the code belov and use the UrlToLoad query param for what page to load dynamically.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$("form").load("<%= this.Request["UrlToLoad"] %> form");
});
</script>
</head>
<body>
<form runat="server">
Loading...
</form>
</body>

Have you considered using jQuery? There are some excellent modal dialog plugins available. I've used Eric Martin's SimpleModal extensively in the past, and have been very happy with it. It has hooks for callbacks both before and after displaying the dialog, so you could perform any checks you need to using functions.
Using the jQuery route - you could have a div that surrounds all the content that is still loading, and have is dimmed out/disabled with a modal dialog showing your 'page loading' message. Then you could make use of the $document.ready() functionality in jQuery to determine when the page is done loading. At this point, you could remove the dialog and fade the page in.

What I did is make a PreLoader.aspx page that will "hold" untill the page we want is loaded:
<script type="text/javascript" language="javascript">
window.onload=function()
{
$get("ctl00_ContentPlaceHolder1_btnNav",document).click();
setTimeout('document.images["Loader"].src="App_Themes/Main/img/loading.gif"', 200);
}
</script>
the button actually makes the transfer
<asp:Label ID="lblLoading" runat="server" Text="Loading the requested page. Please wait ..." />
<asp:Button ID="btnNav" Style="display: none;" runat="server" OnClick="NavTo" />
protected void NavTo(object sender, EventArgs e)
{
Response.Redirect(Request.QueryString["url"].ToString());
}
I like this as it can be reused for every heavy data page ...

Related

Using Modal Popup for Displaying aspx page inside another aspx page

I have the below code which I am using to open a aspx page inside a modal popup but the issue is as soon as I load the host page of the modal popup it is redirecting to the one which is inside the iFrame.
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" Style="display: none">
<iframe style="width: 350px; height: 300px;" id="irm1" src="PayrollScope.aspx?id=49437" runat="server"></iframe>
<br />
<asp:Button ID="Button2" runat="server" Text="Close" />
</asp:Panel>
So the sequence is
MainPage.aspx -> Click PopUp -> Load PayrollScope.aspx inside the modal
But as soon as I hit the MainPage.aspx it is redirecting to PayrollScope.aspx. I tried to use jQuery modal popup also but the same issue is happening. Can someone please tell me why it's redirecting.
Thanks
If you use jQuery dialog to load that other page?
Well, it will display, but THEN if any code in the page has a post back, then yes, it will re-direct to that page.(jQuery dialog simply pulls the whole other page right into that div and "merges" it into your current page's dom. So, you can display the page, and no re-direct will occur. However, any server side button event code (button press, or even say a after update event of editing a text box (on changed) will cause a post back. And any post-back WILL thus cause the page to re-direct (after all any code behind event does send the WHOLE page back and the URL to IIS. So, it much depends on if you JUST displaying that page, or if you want/need/have user interaction on the 2nd page loaded as a dialog.
So, dump the ajax popup and controls reverence to the id of the popup. (don't try jQuery an the ajaxtool kit to "both" try and pop up a control/div - they tend to not play nice with each other.
I do suggest using jQuery.
This would work (but with above post back issues in mind).
<body>
<form id="form1" runat="server">
<br />
<asp:Button ID="Button1" runat="server" Text="Show page as dialog" OnClientClick="showpage1();return false"/>
<div id="poppage" runat="server" style="display:none">
</div>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
function showpage1() {
var mydiv = $('#poppage');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '50%',
position: { my: 'top', at: 'top+150' }
});
mydiv.load('MyOtherPage.aspx');
// Open the dialog
mydiv.dialog('open');
}
So, above will LOAD the other page (into that div), thus pop up the 2nd page when you click on the above button. (and note the return=false). If you have any postback on the page, then everything will quite much blow out the dialog. (and this also means the 2nd page we display (load) as per above.
However, if you need interaction on that 2nd page? (have to click on buttons etc.).
Then the idea of a iframe is a VERY good idea.
So, you have same as before, but we now don't "load" the page using jQuery.ui, but JUST display (and thus pop up) the div with a iframe you placed inside.
So,the div becomes this:
<div id="poppage" runat="server" style="display:none">
<iframe src="MyOtherPage.aspx" class="auto-style1"></iframe>
</div>
and the js code becomes this:
function showpage1() {
var mydiv = $('#poppage');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '50%',
position: { my: 'top', at: 'top+150' }
});
// Open the dialog
mydiv.dialog('open');
}
So, now the above will just display that other page in the div, and since it is a iFrame, then you can interact - and post backs in that iframe should work just fine.
So, remove the ajax panel stuff - give jQuery.ui a try. I used the ajaxtool kit stuff, but for displaying another whole page in a dialog, then i found jQuery.ui seems to work a lot better

Using ASP.NET to Hide an HTML Div

I am using ASP.NET for a web page in order to make some server calls that involve looking up user organization information. Based on that information, we need to either hide or display a div. In the header I have a C# function that definitely runs. I have tried the following lines to hide the div.
divID.Style.Add("display","none");
and
divID.Visible = false;
In the body, I am currently using an asp:Panel that runs at server and contains the id "divID". No matter what I do, I can't get the div to hide (without manually putting the styling in). I tried putting the scripts before and after the body, and it didn't make a difference. Any suggestions on the best way to do this would be appreciated.
EDIT:
Here is the C# initiating code.
<script runat="server" language="C#">
void getUserInfo(Object sender, EventArgs ev){
The rest of the C# code is irrelevant, but the relevant line shown above is definitely being run.
The HTML portion looks something like this.
<asp:Panel runat="server" id="divID" style="width:200px; height:130px; ">
<div style="text-align:center">Test Data</div>
</asp:Panel>
C# code is always compiled and run from the server-side, and so cannot impact the state of a page once rendered unless you use postbacks or callbacks. If you want to change the visible state of a control on the client-side, you will need to use Javascript on the client side (possibly triggered by a button click) to show and hide the control.
As an example, check out the solution at the link below.
https://forums.asp.net/t/1603211.aspx?Show+hide+div+on+button+click+without+postback
<script type="text/javascript">
function ToggleDiv(Flag) {
if (Flag == "first") {
document.getElementById('dvFirstDiv').style.display = 'block';
document.getElementById('dvSecondDiv').style.display = 'none';
}
else {
document.getElementById('dvFirstDiv').style.display = 'none';
document.getElementById('dvSecondDiv').style.display = 'block';
}
}
</script>
<asp:Button ID="btn" runat="server" Text="Show First Div"
OnClientClick="ToggleDiv('first');return false;" />
<asp:Button ID="Button1" runat="server" Text="Show Second Div"
OnClientClick="ToggleDiv('second');return false;" />
<br />
<div id="dvFirstDiv" style="display: none;">
First Div
</div>
<div id="dvSecondDiv" style="display: none;">
Second Div
</div>
In the header I have a C# function that definitely runs.
If you're talking about the HTML page header - no, it definitely not running. C# code is executed only server side.
Based on your post, I'm assuming we're talking WebForms here and yo have a script block in your aspx file. While this is fine, I recommend placing the server-side code into a code behind file.
So all you need to do is to add a handler for the PreRender phase of the page life cycle and place your logic for showing/hiding the div in there.
public void Page_Prerender(object sender, EventArgs e)
{
divID.Visible = false;
' OR
'divID.Style.Add("display","none");
}
Note that setting the Visible property of a WebForms control excludes the control from rendering to the page, whilst setting display: none renders it as HTML but it isn't displayed on the page.
Try in backcode: divID.Controls.clear();
This worked for me.

Adding OnClick event to ASP.NET control

i would like to create OnClick event for my panel. So far now the most of the google results look more or less like this: adding onclick event to aspnet label. Is there any way, to call codebehind function from javascript or panel attributes? Because I would like to Redirect user to a new page and before that save some information in ViewSTate or Sessionstate. Any suggestions?
In your java script method raise a __dopostback call to a Server side method.
<script type="text/javascript">
function YourFunction()
{
__doPostBack('btnTemp', '')
}
</script>
Where btnTemp is a server side button, so write a onClick event of this button on server side, where you can do the processing and then redirect to other page.
You can have a good understanding of dopostback at DoPostBack Understanding
My aspx page is like:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script type="text/javascript">
function CallMe() { __doPostBack('btnTemp', '') }
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="btnTemp" runat="server" Text="Test" onclick="btnTemp_Click" />
<div> <asp:Label ID="Label1" runat="server" Text="Label1"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></div>
</form>
</body>
And my Server Side code is as:
protected void Page_Load(object sender, EventArgs e)
{
Label1.Attributes.Add("onClick", "CallMe();");
}
protected void btnTemp_Click(object sender, EventArgs e)
{
}
Thats the code that I have written, I haven;t included the using statement, Page directive etc in above code.
There is a PostBackUrl property on a ASP.NET Button, you could render the button as normal then postback to a different page - this is where your OnClick method would need to be declared.
I would strongly recommend against posting back to the same page then doing a Response.Redirect(), consider the traffic. The browser requests the page, posts back then is sent a HttpRedirect and then navigates to the new page. With the method I have outlined above this is not required and the browser has to make one request less (meaning the message doesn't have to be sent or the page rebuilt on the server) and is a significant performance benefit.

When jGrowl is called, the thickbox stops working properly (using UpdatePanel)

I am calling a thickbox when a link is clicked:
<a href="createContact.aspx?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=400&width=550&modal=true"
title="Add a new Contact" class="thickbox">Add a new Contact</a>
And, when a server button is clicked I call this javascript function to show a jGrowl notification:
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), Guid.NewGuid().ToString(), "$(function(){$.jGrowl('No Contact found: " + searchContactText.Text + "');});", true);
Both works as expected except when the jGrowl is shown first than the thickbox. This will cause the thickbox not to work and the page will be shown as a normal web (as if the thickbox had been gone).
Does anyone know what is happening?
UPDATE: This is the a test page without Master Page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="RoutingPortal.Presentation.WebForm2" %>
<!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>
<script src="../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="../Scripts/thickbox.js" type="text/javascript"></script>
<script src="../Scripts/jquery.jgrowl.js" type="text/javascript"></script>
<link href="../Scripts/css/jquery.jgrowl.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="~/CSS/thickbox.css" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<a href="createContact.aspx?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=400&width=550&modal=true"
title="Add a new Contact" class="thickbox">Add a new Contact</a>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
This is the codebehind:
namespace RoutingPortal.Presentation
{
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(this.Page, typeof(Page), Guid.NewGuid().ToString(),
"$(function(){$.jGrowl('My Message');});", true);
}
}
}
I have just tested it without the UpdatePanel and it worked perfectly. So, it is definitely a problem with the UpdatePanel or the way that it is interacting with the jGrowl called from the codebehind.
I would massively appreciate your help guys.
UPDATE: I have even created a demo project where this problem can be easily identified. Wouldn't mind to send it to anyone willing to help me out with this. Thanks in advance guys!
UPDATE: I have also tried the solution given by #Rick, changing the way the jGrowl script is executed from codebehind:
ScriptManager.RegisterStartupScript(this.Page, typeof(Page), Guid.NewGuid().ToString(),
"$.jGrowl('My Message');", true);
However, the problem persist since the outcome is exactly the same. Any other ideas? I'd massively appreciate your help.
UPDATE: I have also tried this in IE8 and Chrome, facing the same problem. So, this is nothing to do with the browser. Just in case.
I believe your problem has nothing to do with jGrowl, and all to do with your use of an UpdatePanel.
When you use an UpdatePanel, it refreshes all the elements in the DOM that are contained in it. What this means is that the original <a> tag that was created in the page and that had its click event set to use thickbox no longer exists. After the UpdatePanel refreshes, you now have a NEW <a> tag that has the thickbox class, but has not been "initialized" (since thickbox sets the click handler during page load, which doesn't happen like normal during a partial postback). Hence, when you click on the link, it acts like a normal link.
There are several ways to fix this, depending on your situation.
Option 1: Based on your code pasted above, it does not look like anything actually changes related to the link during your postback handling. So maybe you could move your <div><a ...></a> </div> outside of the UpdatePanel, and leave only the button inside. This will keep your link as part of the page and it will still have its thickbox handler attached.
Option 2: If there's some reason you can't go with Option 1, then you can set some javascript to run during the load of your UpdatePanel to re-attach the click handler for your link. In the function that calls jGrowl, try adding tb_init('a.thickbox'); to your code.
Option 3: You could modify the thickbox.js file to use jQuery's live handler instead of the normal click handler. In the tb_init function, you would change it to be $(domChunk).live('click', function(){..}). I think this would work, though it's possible the update panel process might still foil it.
Hope this helps.
I don't understand the architecture of your page completely, but as #patmortech notes the UpdatePanel causes the DOM elements to be replaced completely on each async postback. You need to rebind any affected elements.
$(document).ready is not good enough when you're dealing with updatepanels. It will only be called on the first page load (not after an UpdatePanel refresh). The solution is to hook into ASP.NET's ajax architecture for your config code.
Whatever code you are using to configure the ThickBox and jGrowl links, add here:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
// page config code
});
This gets called at the end of the ASP.NET client lifecycle, so put your config code for anything within anUpdatePanel there. If you have multiple UpdatePanels, you can test which has been updated (google add_endRequest). However it's often easier just to use the client markup state to determine if you need to configure something or not, or just use config code that will not break things if run twice against the same markup.
Using jquery live is also an option, but it doesn't work for all situations.
protected void Button1_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this.Page, typeof(Page), Guid.NewGuid().ToString(),
"$.jGrowl('My Message');", true);
}

TextBox AutoPostBack pre-empts further events

In a simple ASP page, TextBox AutoPostBack events will prevent Button click events (except where button is tapped very quickly) and AutoPostBack events for other controls (like ListBox).
There's a similar question here, but I wasn't happy with being forced to use client side or AJAX solutions: Have to click button twice in asp.net (after autopostback textbox)
Example ASPX page:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="temp.aspx.cs" Inherits="temp" %>
<!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:TextBox ID="TextBox1" runat="server" AutoPostBack="True" OnTextChanged="PostBack"></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClick="PostBack" Text="Button" /><br />
<asp:ListBox ID="ListBox1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="PostBack">
<asp:ListItem>value1</asp:ListItem>
<asp:ListItem>value2</asp:ListItem>
</asp:ListBox><br />
<br />
Events Fired:<br />
<asp:TextBox ID="TextBox2" runat="server" Height="159px" TextMode="MultiLine" Width="338px"></asp:TextBox></div>
</form>
</body>
</html>
C# code behind:
public partial class temp : System.Web.UI.Page
{
protected void PostBack(object sender, System.EventArgs e)
{
this.TextBox2.Text += string.Format("PostBack for - {0}\n", ((System.Web.UI.Control)sender).ID);
}
}
I've been able to partially solve this problem for buttons by using mousedown instead of click events to submit the form (I also blocked extra AutoPostBack events client-side and handled any extra field changes during button click events server side)
However, this means my buttons aren't quite behaving in the standard (click on release) way.
Is there a better solution to this problem that doesn't require trying to do everything in javascript client-side? (I'm writing a lot of code that reads server data during these postbacks, so javascript isn't an ideal solution.)
I'm also trying to avoid switching to an AJAX library for these pages since every new library I add has to go through security auditing etc.
Note: I'm currently working with ASP.Net 2.0/VS 2005, but if this type of problem is fixed in a later release that would be a compelling argument to upgrade. (As far as I understand it, the same problem seems to happen in ASP.Net 4/VS 2010)
The reason to set AutoPostBack="true" on a field (or other input control) is because you want the page to postback when that control's data changes - without requiring that the user click a button. It sounds like that is exactly what is happening: when the field loses focus, the page does a postback.
Perhaps I'm misunderstanding the question? Can you provide some more information about how you need the page/form to behave?
Edit: more info, based on comment from OP.
I think I understand: the "normal" case is they select something from a DropDownList1, and you autopostback to set the values of DropDownList2, based on the selected item in DropDownList1. However, the user may not care about the second list; if they click "search", you want the button-click to essentially abort the autopostback (already in progress), and initiate a new postback.
Unfortunately, I don't think there's any functionality in any version of ASP.NET to "abort" a postback already in progress (not from the client-side code, anyway). Therefore, in order to implement the above behavior, you're going to have to do something outside the standard ASP.NET postback behavior. Here's a few ideas, though by no means is it an exhaustive list:
Use AJAX and JS to retrieve the contents of DropDownList2. If the user clicks search while that ajax call is in progress, the page should postback right away.
Store all possible DropDownList2 data in JSON format in your page; use purely client-side JS to populate List2 when List1 changes. Again, if the user clicks "search", the page will postback right away. Depending on how big the pool of possible List2 entries is, this may bloat the page size too much to be workable.
Use client-side JS to disable your search button when List1 changes selection. The user won't be able to click "search" until the autopostback (to fill List2) completes.
Hope this helps!
To make the client side be more interactive and reduce sending all that viewstate and redrawing the page, I add a little jquery into the mix. It makes things like what you are proposing possible. jquery even ships with the asp.net MVC framework so there is no shame in using it with asp.net.
Here is a simple example that uses jquery that demonstrates what I think you want.
First, in the aspx file, add in a reference to the jquery library. I use the
Google content delivery network so you don't even have add this file to your VS project.
Then take the auto postback references out of all your server controls except the button. I left that one to continue doing a postback because I suspect at some point you want a regular post back, all the other controls use ajax to get your server side response.
I started by using your example page with these modifications:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="temp.aspx.cs" Inherits="temp" %>
<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
// Establish where the output goes.
var outputObject = $("#<%=TextBox2.ClientID %>");
// create a function to do an ajax postback
function doAjaxPostback(sender, value) {
$.ajax({
type: "POST",
url: "temp2.aspx",
data: "id=" + sender.attr("id") + "&value=" + value,
success: function (data) { outputObject.append("<br />" + data) }
});
}
// Use jquery to wire up the event handler. We use the ClientID property in case these
// elements get embeded in some other server control container later.
$("#<%=TextBox1.ClientID %>").keyup(function (event) { doAjaxPostback($(this), $(this).val()); });
$("#<%=TextBox1.ClientID %>").change(function (event) { doAjaxPostback($(this), $(this).val()); });
$("#<%=ListBox1.ClientID %>").change(function (event) { doAjaxPostback($(this), $(this).val()); });
// Use a plain html button tag for ajax only. The server control button gets rendered as
// a submit button which requires it to be handled a little differently.
$("#PlainButton").click(function (event) { doAjaxPostback($(this), $(this).attr("value")); event.preventDefault(); });
});
</script>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClick="PostBack" Text="Button" /><br />
<button id="PlainButton" value="Plain Old Button">Ajax Only, No postback</button>
<br />
<asp:ListBox ID="ListBox1" runat="server" >
<asp:ListItem>value1</asp:ListItem>
<asp:ListItem>value2</asp:ListItem>
</asp:ListBox>
<br />
<br />
Events Fired:<br />
<asp:TextBox ID="TextBox2" runat="server" Height="159px" TextMode="MultiLine" Width="438px"></asp:TextBox>
</div>
</form>
</body>
</html>
Then for the code behind I just made a tiny change so we can report when we get a regular postback versus the ajax kind:
protected void PostBack(object sender, System.EventArgs e)
{
this.TextBox2.Text += "\n\nGot an asp.net postback\n\n"
+ string.Format("PostBack for - {0}\n", ((System.Web.UI.Control)sender).ID);
}
Okay, so I was trying not to get too fancy but I wanted to demonstrate how easy this is so I made a second page, temp2.aspx but left the aspx file alone as i only needed what is in the code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class temp2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string id = string.Empty;
string value = string.Empty;
Response.Clear();
if (Request.Form == null || Request.Form.Count < 1)
{
Response.Write("I got nothin'");
Response.Flush();
Response.End();
return;
}
id = Request.Form["id"];
value = Request.Form["value"];
Response.Write(string.Format("\nevent from: {0}; value={1}",id,value));
Response.Flush();
Response.End();
}
}
}
Notice that what I did was clear, write, flush and end the response so only the text we want is sent back to the caller. We could have done some fancy stuff in the page_load of the original temp page to check if it is a call from the ajax function that will not clear or flush the response if the incoming Request.Form does not contain a certain field, etc. But by doing it as a separate page, I hoped to simplify the code. This also opens up possibilities.
Say you have a country drop down that has Canada and USA in it and when it changes, you want to sent back data to populate a State/Province dropdown with the appropriate values. By putting the lookup code on its own page the way I did with temp2.aspx, you can then call it from all the pages in your app that have a need for such a service.
Good luck, let me know if you have any trouble understanding my code.

Categories

Resources