If you're delving into the world of ASP.NET and want to enhance user experience by seamlessly transitioning between pages, you've come to the right place. In this tutorial, we'll explore how to call one page from another in ASP.NET using the power of JQuery. But before we embark on this journey, let's quickly review some essential prerequisites and recommended readings.
Recommended Reading:
- E-Mail Validation by Using JQuery
- Show and Hide Div Tag Based on RadiobuttonList Click Using JQuery and JavaScript
CSS Code:
Let's begin with the CSS code for our first page. This code defines styles for a download button, a table, and a background, enhancing the overall aesthetics of your ASP.NET application.
<style type="text/css">
.download
{
background: #006699;
color: #ffffff;
padding: 10px;
width: 180px;
text-decoration:none;
}
.download:hover
{
background: #6699cc;
color: #ffffff;
padding: 10px;
width: 180px;
text-decoration:none;
}
#tablead
{
border-collapse:collapse;
border:1px solid #dddddd;
box-shadow: 10px 10px 5px #888888;
position:absolute;
z-index:1;
}
#tablead td
{
border:1px solid #dddddd;
}
.dad
{
margin:20px 0px 50px 100px;
background:#dddddd;
width:1100px;
height:600px;
opacity:0.5;
}
</style>
HTML Markup:
The HTML markup for the first page includes a simple form with textboxes for first and last names, and a button to submit the form.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Page1.aspx.cs" Inherits="WebApplication1.ASP.NET.Page1" %>
<!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>
<!--- ADD CSS and JQUERY Code -->
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>First Name : </td>
<td><asp:TextBox ID="txtfirstname" CssClass="textbox" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Last Name : </td>
<td><asp:TextBox ID="txtlastname" CssClass="textbox" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" align="center">
<asp:Button ID="btn_submit" CssClass="button" runat="server" Text="Submit" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
JQuery Code:
Now, let's add some JQuery magic to our first page. This script captures the values entered in the textboxes and redirects to Page2.aspx with the first name and last name as parameters.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btn_submit').click(function () {
var fname = $('#txtfirstname').val();
var lname = $('#txtlastname').val();
window.location = 'Page2.aspx?firstname=' + fname + '&lastname=' + lname;
return false;
});
});
</script>
HTML Markup:
Moving on to Page 2, the HTML markup includes labels to display the first name, last name, and the full name. These labels will be populated dynamically using JQuery.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Page2.aspx.cs" Inherits="WebApplication1.ASP.NET.Page1" %>
<!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">
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
First Name :
</td>
<td>
<asp:Label ID="lblfname" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
Last Name :
</td>
<td>
<asp:Label ID="lbllname" runat="server"></asp:Label>
</td>
</tr>
</table><br /><br />
Full Name : <asp:Label ID="lblfullname" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
JQuery Code:
Finally, the JQuery script for Page 2 extracts the parameters from the URL and populates the labels with the corresponding values.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var fname = GetURLValues('firstname');
var lname = GetURLValues('lastname');
$('#lblfname').html(fname);
$('#lbllname').html(lname);
$('#lblfullname').html(fname + "" + lname);
});
function GetURLValues(value) {
var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < url.length; i++) {
var geturlvalue = url[i].split('=');
if (geturlvalue[0] == value) {
return geturlvalue[1];
}
}
}
</script>
Conclusion
Congratulations! You've successfully implemented a seamless transition between ASP.NET pages using JQuery. By harnessing the power of client-side scripting, you've enhanced the user experience and created a dynamic
0 Comments