How to call one page to another page in asp.net by using JQuery


How to call one page to another page in asp.net by using Javascript

In these article we see how to call one page to another in asp.net by using JQuery How to call one page to another page by using JQuery. Before go through this tutorial i'm strongly recommended you to read my previous tutorials : E-Mail Validation by Using JQuery and another article is How to Show and Hide Div Tag based on RadiobuttonList Click Using JQuery.

CSS Code : Page 1

 <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 : Create Page 1

<%@ 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 : Page 1

<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 : Create Page 2

<%@ 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 : Page 2

<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>
0 Komentar untuk "How to call one page to another page in asp.net by using JQuery"

Back To Top