Portfolio


Tuesday, May 3, 2011

ASP.Net 3.5 PostBackUrl and JavaScript Validation

Hey folks,
After lots and lots of search and headache.. I've found solution of this stupid problem.. :)

Actually the problem was I had two asp.net pages and I wanted to pass data of page A to page B.. I wanted to validate textbox values using JavaScript..

So what does PostBaclUrl porperty acutally do?
Well PostBaclUrl is client side cross page post back.. Which means that data never goes on server. It basically uses javascript DoPostBackWithOptions to copy contents of one page to another page.

Problem 1 : What kind of cross-page posting to use?
Well Im using here Public Property values as its easier and gives cleaner code.
In Page A create Public Property values also known as Using Virtual Path





For source Page ; create properties

 public string new_username  
{  
get { return txtNewUserName.Text; }  
}  
public string new_password  
{  
get { return txtUserPassword.Text; }  
}  


In Destination Page insert the following lines
<%@ PreviousPageType VirtualPath="YOURSOURCEPAGE" %>

Now on page load event

  protected void Page_Load(object sender, EventArgs e)  
{  
if (PreviousPage != null && PreviousPage.IsCrossPagePostBack)  
{  
txtNewUserName.Text = PreviousPage.new_username;  
txtDateofBirth.Text = PreviousPage.date_of_birth;  
}  
}  


The PreviousPage.IsCrossPagePostBack determines wether a data is posted from virtual path page..

Now lets go back to source page again.. Lets see the button code

 <asp:Button ID="cmdRegister" CssClass="btn" runat="server" ValidationGroup="Register" OnClientClick="if(!validate_form()) return false;" PostBackUrl="SOURCEPAGE" Text="Register" />  


Notice PostBackUrl property. This is your destination page..

And thats it.. That'll post your all form data from one page to another page.. :)

BUT what if im using client side validation using javascript..? If i use OnClientClick="validate_form()" in my button; PostBackUrl will never ever work as it'll going to return a false value..

That was the problem i've been facing for hours and hours.. But you know what.. Its solution is quite simple :) See the following code lines

OnClientClick="if(!validate_form()) return false;"

This will return false only if form is not validated else it's going to return nothing which is why PostBackUrl event will be fired..

Right here I cant do it details of what happens inside the code but some other day i will ... :)

So Here's the complete code for your reference...

Code for Source Page (Page A)

Java Script :

 function validate_form()  
{  
var first_name = document.getElementById("txtFirstName");  
var is_error = false;  
if(first_name.value.length == 0)  
{  
first_name_error = document.getElementById("first_name_error");  
show_error(first_name,first_name_error,"Please Provide First Name");  
is_error = true;  
}  
var first_name = document.getElementById("txtLastName");  
if(first_name.value.length == 0)  
{  
show_error(first_name,"last_name_error","Please Provide Last Name");  
is_error = true;  
}  
if(is_error == true)  
return false;  
else if(is_error == false)    
return true;  
}  
function show_error(text_box, error_font, error_text)  
{  
text_box.style.border = "solid 1px #E77776";  
text_box.style.background = "#F8DBDB";  
error_font.innerHTML = error_text;   
}  



HTML :

 <table>  
<tr><td class="style10">User Name:</td>  
<td valign="middle"><asp:TextBox CssClass="TextBoxFont" Width="180px" ID="txtNewUserName" runat="server"></asp:TextBox>  
<br /><font class="error_font" id="user_name_error"></font>  
</td></tr>  
<tr><td class="style10">Password:</td><td valign="middle"><asp:TextBox Width="180px" CssClass="TextBoxFont" ID="txtUserPassword" TextMode="Password" runat="server"></asp:TextBox>  
<br /><font class="error_font" id="password_error"></font>  
</td></tr>  
<tr><td colspan="2"valign="middle" align="right">  
<asp:Button ID="cmdRegister" CssClass="btn" runat="server" ValidationGroup="Register" OnClientClick="if(!validate_form()) return false;" PostBackUrl="~/account/register.aspx" Text="Register" />  
</td></tr>  
</table>  


aspx.cs :

 public string new_username  
{  
get { return txtNewUserName.Text; }  
}  
public string new_password  
{  
get { return txtUserPassword.Text; }  
}  


_______________________________________________________________________

Source for Destination Page (Page B)

HTML :

<%@ PreviousPageType VirtualPath="~/account/default.aspx" %>


aspx.cs :

  protected void Page_Load(object sender, EventArgs e)  
{  
if (PreviousPage != null && PreviousPage.IsCrossPagePostBack)  
{  
txtNewUserName.Text = PreviousPage.new_username;  
txtDateofBirth.Text = PreviousPage.date_of_birth;  
}  
}  


__________________________________________________________________________

All suggestions and comments are welcome... :)

Jazak Allah..

No comments:

Post a Comment