PageRequestManager : Whats the difference between doPostBack and _doCallBack ?

I want some parts of my web page refresh after a focus or changed event being made on a TextBox. What I want to acheive is get back to the server to do some code. I check the PageRequestManager and saw to way to make a postback to the server. What I want to do is get back to the server like I put a submit button without the whole page refresh. Some advices on that would be really appreciate !

It's not overly clear what your trying to do. Are you currently using UpdatePanels? If not, look into them:

http://www.asp.net/ajax/documentation/live/overview/UpdatePanelOverview.aspx

http://www.asp.net/learn/ajax-videos/video-78.aspx

http://www.asp.net/learn/ajax-videos/video-159.aspx

I know it's not clear. I'm sorry. I'll try to explain more clearly.

On a client event like OnFocus or OnBlur or OnChange, I'll check some client state for the input (TextBox) and take decision if I need to get back to the server to refresh some part of my menu. I try to implement a sort of contextual menu. So, when some part (say inside panel1) got focus, I want to make an ajax request to add some stuff to the menu. When the panel lost focus, maybe I'll switch the visibiliy of some parts of the menu on the client side or got back to the server to do some job.

I'm building a sort of UIManager. This Manager need to check some client state(hidden field) and decide to get back to server if I doesn't have all the state it need to add some part of the menu for the contextual part.

So, I put the menu inside and UpdatePanel UpdateMode=Always. When a control (maybe TextBox, RadioButton or panel) got focus, maybe I need to get back to the server. I want to know if it's necessary to put the control inside and Update Panel or I can write some code to submit the form and use eventArgument to know what I have to do...

I hope is it a little be more clear. I appreciate a lot the time you take to help me !

Hi,

Thank you for your post!

Based on my understanding, you just want to refresh the updatepanel via javascript(e.g On a client event like OnFocus or OnBlur or OnChange).

Check out like this:

use __doPostBack to refresh the UpdatePanel

If you have further questions,let me know.

Best Regards,

Hi,

Thank you for this great anwser. It's really what I was searching.

I have another question. I need a way to pass parameter from the client to know what to do when the page refresh on the server. For example, when the TextChanged occured on the TextBox1, I want to update some parts of the menu. Is it a good approach to pass parameter on the EventArguments of the __doPostback ? And which format do you recommand I use ? Or can you recommand me another way of doing that ?

function TextChanged(){ __doPostBack('ClientAjaxComm','');}

Thanks!

Hi,

It is a good approach to pass parameter on the EventArguments of the __doPostback.

Or you can store something into something hiddenfield,and get them at the server side.

It is up to you to which approach you use.

Thanks!

Panel shows before Popup

Hi

I got a Button, a textbox a Panel in my page, when the page is loaded, the Panel will filled with pictures and link, then then the button is click, it will popup the panel as ModalPopup, when user clicked on the link accompanied with the picture, the code assigned will send to the textbox.

My problem is as the page is shows, I can see the picture populated inside the panel(which suppose to be invisible after using ModalPopupExtender), then it hidden again, but things works. Then I wanted to populate the code to my textbox using UpdatePanel, but it just cause the page to post back, here attached with my codes, hope will got a solution or a pointer from you guys, thanks.

Imports System.Data.sqlclientPartialClass _DefaultInherits System.Web.UI.PageDim conAs New SqlConnection("server=localhost;database=wardrobe;integrated security=true;")Dim comAs New SqlCommand()Dim drAs SqlDataReaderPrivate Sub linkClick(ByVal senderAs Object,ByVal eAs System.EventArgs)Dim idsAs LinkButton =CType(sender, LinkButton) TextBox1.Text = ids.IDEnd Sub Protected Sub Page_Load(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.LoadDim imgAs ImageDim lnkAs LinkButtonDim tablesAs New TableDim rowsAs TableRowDim colsAs TableCellDim colAs Integer = 1 com.Connection = con com.CommandText ="Select * From tblCollar"Try con.Open() dr = com.ExecuteReader rows =New TableRow() tables.CellSpacing = 10While dr.ReadIf col = 3Then col = 0 img =New Image() img.ID ="Img" & dr("code").ToString img.ImageUrl = dr("Picture").ToString img.Width = 100 img.Height = 100 img.ImageAlign = ImageAlign.TextTop lnk =New LinkButton lnk.Text ="[Select]" lnk.ID = dr("Code").ToString lnk.PostBackUrl ="default.aspx"AddHandler lnk.Click,AddressOf linkClick cols =New TableCell() cols.Controls.Add(img) cols.Controls.Add(lnk) rows.Cells.Add(cols) tables.Rows.Add(rows) rows =New TableRow()Else img =New Image() img.ID ="Img" & dr("code").ToString img.ImageUrl = dr("Picture").ToString img.Width = 100 img.Height = 100 img.ImageAlign = ImageAlign.TextTop lnk =New LinkButton lnk.Text ="[Select]" lnk.ID = dr("Code").ToString lnk.PostBackUrl ="default.aspx"AddHandler lnk.Click,AddressOf linkClick cols =New TableCell() cols.Controls.Add(img) cols.Controls.Add(lnk) rows.Cells.Add(cols)End If col += 1End While Panel1.Controls.Add(tables)Catch exAs ExceptionFinally con.Close()End Try End SubEnd Class 

Histephensaw,

It is not recommended to add the line number to your source code.Would you modify it and share your Aspx source code here?

Hi,

I had uploaded my project files and SQL Server 2005 backup files, please help me check my problem, thanks.

http://stephensaw.googlepages.com/BuildingModule.zip

Hi stephensaw,

I've got everything ready. But I'm not sure about what you really what to do now? Do you what to post a asynchronous Request to the server?

If yes, here is the sample:

<%@. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> if (window.screen) { this.moveTo(0, 0); this.resizeTo(screen.availWidth,screen.availHeight) } </script></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="updateCollar" runat="server"> <ContentTemplate> Please select a collar design form our gallery:  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <asp:TextBox ID="txtCode" runat="server" ReadOnly="True"></asp:TextBox> <asp:Button ID="btnBrowse" runat="server" Text="Browse" OnClick="btnBrowse_Click" /> <div style="display: none"> <asp:Button ID="btnPopTrigger" runat="server" Text="Button" /> </div> <cc1:ModalPopupExtender ID="PopupCollar" runat="server" BackgroundCssClass="ModalPopupBackground" PopupControlID="pnlPopup" TargetControlID="btnPopTrigger"> </cc1:ModalPopupExtender> <asp:Panel ID="pnlPopup" runat="server" Height="500px" Width="630px" BackColor="White"> </asp:Panel>   </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnBrowse" /> </Triggers> </asp:UpdatePanel>    <br /> </form> <script type="text/javascript" language="javascript"> var btnID = ""; Sys.WebForms.PageRequestManager.getInstance().add_beginRequest( function(sender,args){ btnID = args._postBackElement.id; } ); Sys.WebForms.PageRequestManager.getInstance().add_endRequest( function(sender, args){ if(btnID =="<%=btnBrowse.ClientID%>"){ $get("<%= btnPopTrigger.ClientID%>").click(); } } ); </script></body></html>

C# code modified.

Protected Sub btnBrowse_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Label1.Text = "updatepanel updated"
End Sub

Hope it helps.If I misunderstood you, please let me know.

Thanks Jonathan for your effort to help me. Actually my update panel and all the stuff works well. Here I will explain more.

I got a button, a panel, a text box. When the page is load, I will runtime looping create image button which I retrieve detail from database, I will runtime create another panel and table, which then everything will be populated to my present panel. This will will popup when clicked the button. The problem was, at my page load, I can see the panel during the population of my controls. The problem 'shows' too fast, couldn't have it capture to picture, below is the video I captured.

http://stephensaw.googlepages.com/ModalPopup.zip

Hi stephensaw,

Based on your description, I thinkmake your pnlPopup hide as default.

 <asp:Panel ID="pnlPopup" runat="server" Height="500px" Width="630px" BackColor="White"style="display:none"> </asp:Panel>

Hope it helps.

Hi stepensaw,

I have done some modifications based on your source code. And now we can select images without any postback and the implements moved to client side. Hope it will benefit our numbers.

Aspx:

<%@. Page Language="VB" AutoEventWireup="true" CodeFile="Default2.aspx.vb" Inherits="_Default2" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> if (window.screen) { this.moveTo(0, 0); this.resizeTo(screen.availWidth,screen.availHeight) } </script></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="updateCollar" runat="server"> <ContentTemplate> Please select a collar design form our gallery:  <asp:TextBox ID="txtCode" runat="server"></asp:TextBox> <asp:Button ID="btnBrowse" runat="server" Text="Browse"/> <cc1:ModalPopupExtender ID="PopupCollar" runat="server" BackgroundCssClass="ModalPopupBackground" PopupControlID="pnlPopup" TargetControlID="btnBrowse"> </cc1:ModalPopupExtender> <asp:Panel ID="pnlPopup" runat="server" Height="500px" Width="630px" BackColor="white" style="display:none"> </asp:Panel>   </ContentTemplate> </asp:UpdatePanel>    <br /> </form> <script type="text/javascript" language="javascript"> function onSelectImage(imageID){ try{ $get("<%= txtCode.ClientID%>").value = imageID; $find("<%=PopupCollar.ClientID%>").hide(); return false } catch(e){ return false; } } </script></body></html>

VB.Net Code:

Imports System.Data.SqlClientImports System.Web.Services.webserviceImports System.DeploymentPartialClass _Default2Inherits System.Web.UI.Page'ConstantConst NUMPERCOLAs Integer = 4'Global VarDim conAs New SqlConnection("Server=localhost;Database=Wardrobe;Integrated Security=True")Dim comAs New SqlCommand()Dim drAs SqlDataReaderDim dsAs New Data.DataSetDim daAs New SqlDataAdapterDim dataRowsAs Data.DataRow()'Global ObjectDim imgButtonAs ImageButtonDim pnlAs PanelDim btnAs ButtonProtected Sub Page_Init(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.Init com.Connection = con com.CommandText ="Select * From Collar" da.SelectCommand = comTry con.Open() da.Fill(ds,"Collar") dataRows = ds.Tables("Collar").Select()Catch exAs ExceptionFinally con.Close()End Try End Sub Private Sub populatePopupBox()Dim colCountAs Integer = 1Dim dataRowAs Data.DataRowDim tblAs New TableDim rowAs TableRowDim colAs TableCell'Generate Panel to populate with ImageButton pnl =New Panel pnl.ID ="pnlContent" pnl.BackColor = Drawing.Color.FromArgb(20, 49, 51, 163) pnl.Height =CType(pnlPopup.Height.Value - 20, Unit) pnl.Width = pnlPopup.Width pnl.HorizontalAlign = HorizontalAlign.Center pnl.ScrollBars = ScrollBars.Vertical'Prepare table structure tbl.ID ="tblCollar" tbl.Width =CType(pnl.Width.Value - 100, Unit) tbl.CellSpacing = 5 tbl.CellPadding = 5 row =New TableRowFor Each dataRowIn dataRowsIf colCount > NUMPERCOLThen tbl.Rows.Add(row) row =New TableRow colCount = 1End If col =New TableCell col.HorizontalAlign = HorizontalAlign.Center col.VerticalAlign = VerticalAlign.Middle col.Attributes.Add("onmouseover","this.style.backgroundColor='#E9ECEF';") col.Attributes.Add("onmouseout", "this.style.backgroundColor='';")If txtCode.Text = dataRow("col_Code").ToStringThen col.BackColor = Drawing.Color.FromArgb(100, 233, 236, 239)End If imgButton =New ImageButton imgButton.ID = dataRow("col_Code").ToString imgButton.ImageUrl ="collar/" & dataRow("col_Picture").ToString imgButton.Width = 100 imgButton.Height = 100 imgButton.OnClientClick ="return onSelectImage('" + dataRow("col_Code").ToString + "');" col.Controls.Add(imgButton) row.Cells.Add(col) colCount += 1 Next tbl.Rows.Add(row) pnl.Controls.Add(tbl) btn = New Button btn.ID = "btnCancel" btn.Text = "Cancel" PopupCollar.CancelControlID = btn.ID pnlPopup.Controls.Add(pnl) pnlPopup.Controls.Add(btn)End Sub Protected Sub Page_Load(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.LoadIf Not IsPostBackThen populatePopupBox()End If End SubEnd Class

Hope it helps.

parseLocale ignores negative currency format

I have some JScript that is utilized by a custom TextBox control that does various validation and format functions on the client side. In particular, when the control receives focus I left-justify the value in the textbox and format it without currency and grouping characters. Just the raw number. Then when the control loses focus (blur), I re-format the contents based on a property that indicates which formatting to use. This custom TextBox accepts only numeric input. In the case of a curreny input (DisplayFormat = "C") and a negative number, the number is formatted using the current culture's CurrencyNegativePattern of CultureInfo.NumberFormat. AJAX handles all of this for me since I call the Number.localeFormat function. The problem is that when the TextBox receives focus, I try to strip all formatting to get the raw number but for a negative currency value AJAX'sparseLocale function does not recognize the parantheses that are added to the number when it is formatted bylocaleFormat. Example: -1000 is formatted as ($1,000.00) with a format string of "C2" but when you pass this toparseLocale you get "1000.00". Shouldn'tparseLocale recognize the negative patterns its counterpartlocaleFormat adds to the value?

function numberEditorFocus(src)
{
src.style.textAlign ='left';
var displayFormat ="D";
if (src.value !="")
{
var val = Number.parseLocale(stripCurrency(src.value));
alert(val);
if (isNaN(val) ==false)
{
var newValue = val.localeFormat(displayFormat);
src.value = newValue;
}
src.select();
}
}

Sounds like it may be a bug, take a look in the source code for the AJAX Framework or theissues list

-Damien

Nothing in the bug list. It's obvious from the source code in the AJAX library that the parseLocale (and subsequently the parse) function does not consider the negative currency pattern. It only accounts for the preceding +/- sign. So, is this a bug or is there some reason it was designed with way? AJAX team?

Number.parseLocale = function Number$parseLocale(value) { /// <param name="value" type="String"></param> /// <returns type="Number"></returns> var e = Function._validateParams(arguments, [ {name: "value", type: String} ]); if (e) throw e; return Number._parse(value, Sys.CultureInfo.CurrentCulture);}Number.parseInvariant = function Number$parseInvariant(value) { /// <param name="value" type="String"></param> /// <returns type="Number"></returns> var e = Function._validateParams(arguments, [ {name: "value", type: String} ]); if (e) throw e; return Number._parse(value, Sys.CultureInfo.InvariantCulture);}Number._parse = function Number$_parse(value, cultureInfo) { var valueStr = value.trim(); if (valueStr.match(/infinity/i) !== null) { return parseFloat(valueStr); } if (valueStr.match(/^0x[a-f0-9]+$/i) !== null) { return parseInt(valueStr); } var numFormat = cultureInfo.numberFormat; var decSeparator = numFormat.NumberDecimalSeparator; var grpSeparator = numFormat.NumberGroupSeparator; var numberFormatRegex = new RegExp("^[+-]?[\\d\\" + grpSeparator + "]*\\" + decSeparator + "?\\d*([eE][+-]?\\d+)?$"); if (!valueStr.match(numberFormatRegex)) { return Number.NaN; } valueStr = valueStr.split(grpSeparator).join(""); valueStr = valueStr.replace(decSeparator, "."); return parseFloat(valueStr);}

I'd modify the source and recompile for now so that it works for you, and I would log this as a bug...

-Damien