News
IBM to offer mobile security as a service IBM will start delivering mobile security-as-a-service (MaaS) through its own cloud infrastructure in India, a move that is expected to better address in-country data requirements... IBM Spectrum Computing: IBM has enlarged its portfolio of software-defined infrastructure solutions with cognitive features for workload management.  * LiFi internet technology has been introduced, the new type of wireless internet connection that gives 100 times faster than traditional WiFi -- Invented by Professor Harald Haas from the University of Edinburgh. * Sci. Rachid Yazami has developed a smart chip that charges smartphones in less than 10 minutes. BenQ has launched BlueCore projector - Consumer electronics major BenQ has launched its first BlueCore laser light source projector. For those unaware, devices with BlueCore laser technology have a high contrast output of 80000:1 with an extended lamp life and efficiency. *** 
  Dec 14 2014 8:25AM     Micheal
  0 Comments    2959 Views  
Here Micheal provided a short tutorial with example, how to create web user control in ASP.Net C#/VB.
What is User Control ?
  1. User controls are reusable controls that can be defined once and used whenever we need them, in any of the .aspx pages of our application.
  2. We do have skins,themes and css to give a standard look to our website.
  3. User controls help to achieve that as well because since we define them once and use many times, thus making sure we do not have same controls on pages looking differently.
  4. When we make changes to a user control all these changes will be reflected to all instances of the control.
Description
Here, We have implemented UserControl for Search box. This Search box can be used whenever we need in pages.
Steps
Step 1: Open Visual Studio and Create ASP.Net Web Application.
Step 2: For Creating a Web User Control, Create a Folder Called "Controls".
Step 3: Right click the created folder and Select Add New Item.. option from the list
Step 4: The image shows below Web User Control to Select in Add New Item Popup Window
The image given below shows, After adding the Web User Control to the project.
User Control Design
HTML

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Search.ascx.cs" Inherits="TestApplication.Controls.Search" %>

<asp:TextBox ID="txtSearch" runat="server" CssClass="txtbox" placeholder="Search Here...">
</asp:TextBox>
<asp:Button ID="btnSearch" CssClass="Sbutton" runat="server" Text="Search" />

CSS

.Sbutton
    {
        padding: 6px 10px;
        background: #B4D7FA;
        border: 1px solid #6a6f95;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
        -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
        box-shadow: 0 0 4px rgba(0,0,0, .75);
        color: rgb(8, 8, 8);
        font-weight: bold;
        margin-top: 14px;
    }

    .Sbutton:hover
    {
         /*make the background a little darker*/ 
         /*reduce the drop shadow size to give a pushed button effect*/
        background-color: #6cafe0; 
        -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
        -moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
        box-shadow: 0 0 1px rgba(0,0,0, .75);
        color: White;
        font-weight: bold;
    }

    .txtbox
    {
        border: solid 1px #6cafe0;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        box-shadow: 0 0 1px rgba(0,0,0, .75);
        width: 220px;
        height: 25px;
        font-family: verdana,arial,sans-serif;
        font-size: 11px;
        margin-left: 20px;
        margin-right: 6px;
    }

Page Design
With the Help of this page directive, we can add user control to the page.

<%@ Register Src="~/Controls/Search.ascx" TagPrefix="ucSearch" TagName="Search" %>

HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="worddoc.aspx.cs" Inherits="TestApplication.worddoc" %>

<%@ Register Src="~/Controls/Search.ascx" TagPrefix="ucSearch" TagName="Search" %>

<!!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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ucSearch:Search ID="search" runat="server" />
    </div>
    </form>
</body>
</html>

Finally user control is added to the page, we can use the control with the tag <ucSearch>
Result
I hope this page will helps to create web user control in ASP.Net application. Thanks.
BackToTop
Comments



 
Search
Recent Posts
Create Amazon ElasticCache Using Memcached in CSharp
Oct 29 2018 12:09PM Posted By Amose
Get Google Map Lat Lng (Geo Point) By Pincode in C#
Oct 28 2018 12:09PM Posted By Pranav
Google URL Shortener in C#
Oct 20 2018 12:09PM Posted By Sanjay
Bind Gridview from CSV file in Asp.Net C#
Oct 5 2018 12:09PM Posted By Michael
Call WebService method from jQuery in every 1 minute
Sep 26 2018 12:09PM Posted By John
Gridview custom CSS in ASP.Net
Sep 14 2018 12:09PM Posted By Micheal Ryan
Read excel file and bind to Gridview in C#
Sep 10 2018 12:09PM Posted By Micheal
Tags
Follow us on Facebook
Follow us on Google +
Recent post in your Email inbox.
Enter your email address: