Creating a Web User Control in ASP.NET

Introduction

Well, it seems as if I am staying on the topic of User Controls and Components...today is no exception. Today I will show you how to create a User Control in your ASP.NET Web Application.

Let's jump straight into the project.

Open Visual Studio and create a new ASP.NET Web Form application. You may name it anything you like. Do not worry too much about how the page looks; well, you may delete some of the content items, but I haven't because today we will explorer a web user control.

Once you are satisfied with your web form, add a user control to the project by clicking Project, Add New Item and selecting Web User Control from the displayed box as shown in Figure 1.

Add User Control
Figure 1 - Add User Control

The empty user control will be displayed. Add an HTML Table to the form. The table has two columns and three rows. Once the table has been designed, design your user control as shown in Figure 2.

User Control
Figure 2 - User Control

Now, it wouldn't be a decent article if there isn't a little in it, now will it? Instead of just having a user control with these objects on let us add some validation as well. Open Notepad and enter the following:

function Valid() {

var Name, Surname, Age;

 

Name = document.getElementById("txtName").value;

Surname = document.getElementById("txtSurname").value;

Age = document.getElementById("txtAge").value;



if (Name == '' && Surname == '' && Age == '') {

    alert("Enter All Fields");

    return false;

}

if (Name == '') {

    alert("Please Enter Name");

    return false;

}

if (Surname == '') {

   alert("Please Select surname");

   return false;

}

if (Age == '')

{

     alert("Please Enter Age");

     return false;

}


 }

  return true;

}

This code is responsible for validating user input. It simply determines whether or not values have been entered into the associated textboxes. Save this file as Validate.js and add it to your Solution Explorer. Modify your User Control's code to include this JavaScript file:

<script src="Validate.js" type="text/JavaScript"></script>

This imports the functionalities of the Validate JavaScript file.

Now that the user control is set up, we should add it to the Webform.

Open Your Webform's VB code and add the following code:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        Me.Controls.Add(Me.LoadControl("PersonalInformation.ascx"))
    End Sub

Open the Code behind of the Webform and add the following on top:

<%@ Register Src="~/PersonalInformation.ascx" TagPrefix="WebUserControl" TagName="WebTag" %>

Lastly, add the next piece of code where you want the control to be displayed:

<WebUserControl:WebTag id="MyControl" runat="server"/>

Conclusion

There you go, now you have a decent user control that you can use to validate user input. Until next time, cheers!



Related Articles

Downloads

Comments

  • web Controls

    Posted by christopher on 03/19/2015 10:57pm

    Useful for beginners

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: May 18, 2015 @ 1:00 p.m. ET / 10:00 a.m. PT While the idea of using facial and or gesture recognitions to create a modern, intuitive game seems attractive, some developers may want to leverage Unity 3D as a way to accelerate their development. There are many different ways in which Intel and Unity Technologies have been working together to helps speed the develop of games with the Intel® RealSense™ SDK (Software Developer Kit), so come hear from a panel of experts on what we've done …

  • "Disaster Recovery" is really about business resiliency – how quickly can your business get back online from an unpredictable event like a major weather emergency or other unscheduled downtime? This ebook explores the costs of downtime for even the smallest business, as well as how hosted Microsoft SQL Server can deliver on your need for business continuity.

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date