User Control:

A user control is a kind of composite control that works much like an ASP.NET Web page—you can add existing Web server controls and markup to a user control, and define properties and methods for the control. You can then embed them in ASP.NET Web pages, where they act as a unit.

Here in this example, you can see how to use date picker user control in web page.

For that, create a user control and add CSS and JS files whatever you required for date picker.

  1. <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DatePicker.ascx.cs" Inherits="CodeSamples.DatePicker" %>
  2. <link href="css/Jquery-ui.css" rel="stylesheet" />
  3. <script src="js/jquery-1.10.2.js"></script>
  4. <script src="js/jquery-ui.js"></script>
  5. Here take one textbox and bind date picker by using JavaScript.
  7. <script type="text/javascript">
  8. $(function () {
  9. $("#datepicker").datepicker();
  10. });
  11. </script>
  12. Date:
  13. <input type="text" id="datepicker">
Now user control is completed with date picker. Now you can this user control wherever you want in web pages with taking this user control as reference.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Sample.aspx.cs" Inherits="CodeSamples.Sample" %><%@ Register Src="~/DatePicker.ascx" TagPrefix="uc1" TagName="DatePicker" %>
  2. <!DOCTYPE html>
  3. <html
  4. xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title></title>
  7. </head>
  8. <body>
  9. <form id="form1" runat="server">
  10. <div>
  11. <uc1:DatePicker runat="server" id="DatePicker" />
  12. </div>
  13. </form>
  14. </body>
  15. </html>
Then the output will be as follows:


Figure 1: Calendar

Like this you can easily work with user controls and your work also very simple.