Wednesday 7 August 2013

How to create and use User Control in asp.net - asp.net example || User Controls in ASP.NET

           Hi Friends, in this article I will explain about what is User control?  How to create and use User Control in asp.net. 
  • User controls (.ascx pages) allow you to save a part of an existing ASP.NET page and reuse it in many other ASP.NET pages ex:header , footers. 
  • A user control is almost identical to a normal .aspx page, with differences: the user control has the .ascx extension rather than .aspx, we cannot run the .ascx page individual and it may not have <HTML>, <Body>, or <Form> tags.

I explain this with small example.
First of all create one .ascx file.
Right click on project root folder ---Add new item --- select webusercontrol (.ascx) and name it as menu.ascx.

write the following code in menu.ascx page
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Menu.ascx.vb" Inherits="Menu" %>
<style type ="text/css" >
.menu ul{
    margin: 0; padding:0.5;
    float: left;}
.menu ul li{
    display: inline;}
.menu ul li a{
    float: left; text-decoration: none;
    color: white;
    font-size:10px;
    padding: 10px 10px;
    background-color: #a31515; }

.menu ul li a:visited{
    color: white;
font-weight:bold;}

.menu ul li a:hover, .menu ul li .current{
    color: #fff;
    }
     .hand1 {cursor:pointer;cursor:hand;}
    .add_now_text {font-weight:bold;padding-left:1px;background-

color:#fff;background-repeat: repeat-x;font-size:smaller;display:block;
      }
</style>
    <form id="form1" runat="server">
    <div>
    <div class="menu">
<ul>
<li><a href="http://aspdotnet-roja.blogspot.in/">Home </a></li>
<li><a href="http://aspdotnet-roja.blogspot.in/search/label/ASP.NET">ASP.NET </a></li>
<li><a href="http://aspdotnet-roja.blogspot.in/search/label/InterviewQuestions ">Interview Questions</a></li>
<li><a href="http://autolisp-kishore.blogspot.in">AutoCAD </a></li>
<li><a href="http://facebook.com/aspdotnetroja">Find me on Facebook</a></li>
<li><a href="http://www.twitter.com/aspdotnetroja">Find me on Twitter</a></li>
<li><a href="http://aspdotnet-roja.blogspot.in/2012/10/contact-us.html">Contact  me </a></li>
</ul></div></div></form>

And take one .aspx page and name it as login.aspx and write the following code.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="login.aspx.vb" Inherits="login" %>
<!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>User control Page</title>
</head>
<body>
    <form id="form1" action="login.aspx" >
        <br />
    <div>
        Username: <input type="text" name="usr_name"/><br />
        Email &nbsp; &nbsp;&nbsp; &nbsp;: <input type="text" name="usr_name"/>
        <br />
        <input type="submit" value="Submit "/>
        </div>        
    </form>
</body>
</html>
Save the page and run it will like below.

Add the .ascx page to Login.aspx page like below.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="login.aspx.vb" Inherits="login" %>
<%@ Register TagPrefix="head" TagName="menu" Src="~/Menu.ascx" %>
<!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>User control Page</title>
</head>
<body>
    <form id="form1" action="login.aspx" >
       <head:menu ID="menu" runat="server" />
        <br />
       <div>
        <br />
        <br />
        <br />
        <br />
        Username: <input type="text" name="usr_name"/><br />
        Email &nbsp; &nbsp;&nbsp; &nbsp;: <input type="text" name="usr_name"/>
        <br />
        <input type="submit" value="Submit "/>
        </div>        
    </form>
</body>
</html>

And run the page. The page will like below and see the difference; it shows the menu of .ascx page.



 I think you like my blog Aspdotnet-Roja why are waiting following me on facebook fan page Aspdotnet-roja

No comments:

Post a Comment

© 2012-2018 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.