Add Dynamic Controls From Code Behind and Validate Controls at Client Side.

In this article I will show how to create and add dynamic control from code behind page and how to validate them at client side using JavaScript.

 

Source page:

<%@ Page Title=”Add Dynamic Controls” Language=”C#” MasterPageFile=”~/Site.master”
    AutoEventWireup=”true” CodeFile=”Add_Dynamic_Controls.aspx.cs” Inherits=”Add_Dynamic_Controls” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”Server”>
    <title>Add Dynamic Controls</title>
    <style type=”text/css”>
        .error
        {
            font-weight: bold;
            font-size: large;
            background-color: Red;
            color: White;
            height: 70px;
            width: 100%;
            float: left;
            display: none;
            vertical-align: middle;
        }
        .errorImg
        {
            float: left;
            height: 60px;
            width: 60px;
            padding: 5px 30px 10px 10px;
        }
        .control
        {
            width: 300px;
            padding: 5px;
            border: 1px solid #DDDDDD;
            border-radius: 5px;
            outline: none;
            box-shadow: 0px 0px 7px #61C5FA;
            border-color: #61C5FA;
            margin-bottom: 15px;
        }
        .label
        {
            width: 150px;
            float: left;
        }
        .button
        {
            cursor: pointer;
            padding: 0.5em 2em 0.55em;
            margin-left: 150px;
            margin-top: 20px;
        }
    </style>
    <script type=”text/javascript”>
        function ValidateControls() {
            var fname = document.getElementById(‘MainContent_txtFname’);
            var lname = document.getElementById(‘MainContent_txtLname’);
            var sex = document.getElementById(‘MainContent_ddlGender’).selectedIndex;
            var address = document.getElementById(‘MainContent_txtAddress’);

            if (fname == ” || lname == ” || sex == 0 || address == ”) {
                document.getElementById(‘<%= divError.ClientID %>’).style.display = ‘block’;
                return false;
            }
            document.getElementById(‘<%= divError.ClientID %>’).style.display = ‘none’;
            return true;
        }
    </script>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”Server”>
    <div id=”divError” runat=”server” style=””>
        <img alt=”Error” src=”Images/error.png” />Please
            fill all the fields</span>
    </div>
   

15px;”>


    </div>
    <div id=”divDynamicControl” runat=”server”>
    </div>
</asp:Content>

 

 

 

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Add_Dynamic_Controls : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            AddControls();
        }
    }

    private void AddControls()
    {
        // Labels for left hand side
        Label lblFname = new Label();
        lblFname.Text = “First Name”;
        lblFname.ID = “lblFname”;
        lblFname.CssClass = “label”;

        Label lblLname = new Label();
        lblLname.Text = “Last Name”;
        lblLname.ID = “lblLname”;
        lblLname.CssClass = “label”;

        Label lblGender = new Label();
        lblGender.Text = “Gender”;
        lblGender.ID = “lblGender”;
        lblGender.CssClass = “label”;

        Label lblAddress = new Label();
        lblAddress.Text = “Address”;
        lblAddress.ID = “lblAddress”;
        lblAddress.CssClass = “label”;

        // Text boxes for right hand side
        TextBox txtFname = new TextBox();
        txtFname.ID = “txtFname”;
        txtFname.MaxLength = 50;
        txtFname.CssClass = “control”;

        TextBox txtLname = new TextBox();
        txtLname.ID = “txtLname”;
        txtLname.MaxLength = 50;
        txtLname.CssClass = “control”;

        DropDownList ddlGender = new DropDownList();
        ddlGender.ID = “ddlGender”;
        ListItem[] sex = new ListItem[3] { new ListItem(“select”, “0”), new ListItem(“Male”, “1”), new ListItem(“Female”, “2”) };
        ddlGender.Items.AddRange(sex);
        ddlGender.CssClass = “control”;

        TextBox txtAddress = new TextBox();
        txtAddress.ID = “txtAddress”;
        txtAddress.CssClass = “control”;
        txtAddress.TextMode = TextBoxMode.MultiLine;
        txtAddress.Height = 100;

        // Button to save and validate data
        Button btnSave = new Button();
        btnSave.ID = “btnSave”;
        btnSave.Text = “Save”;
        btnSave.Click += new EventHandler(btnSave_Click);
        btnSave.Attributes.Add(“onclick”, “return ValidateControls();”);
        btnSave.CssClass = “button”;

        // Add Controls To Page
        divDynamicControl.Controls.Add(lblFname);
        divDynamicControl.Controls.Add(txtFname);

        // For New Line
        divDynamicControl.Controls.Add(new LiteralControl(”
“));

        divDynamicControl.Controls.Add(lblLname);
        divDynamicControl.Controls.Add(txtLname);

        // For New Line
        divDynamicControl.Controls.Add(new LiteralControl(”
“));

        divDynamicControl.Controls.Add(lblGender);
        divDynamicControl.Controls.Add(ddlGender);

        // For New Line
        divDynamicControl.Controls.Add(new LiteralControl(”
“));

        divDynamicControl.Controls.Add(lblAddress);
        divDynamicControl.Controls.Add(txtAddress);

        // For New Line
        divDynamicControl.Controls.Add(new LiteralControl(”
“));

        divDynamicControl.Controls.Add(btnSave);
    }

    protected void btnSave_Click(object o, EventArgs e)
    {
        string Fname = ((TextBox)divDynamicControl.FindControl(“txtFname”)).Text;
        string Lname = ((TextBox)divDynamicControl.FindControl(“txtLname”)).Text;
        string Gender = ((DropDownList)divDynamicControl.FindControl(“ddlGender”)).SelectedValue;
        string Address = ((TextBox)divDynamicControl.FindControl(“txtAddress”)).Text;
    }
}

1

 

Advertisements

2 thoughts on “Add Dynamic Controls From Code Behind and Validate Controls at Client Side.

  1. I was quite pleased to acquire this web-site.I wanted to thanks for your time for this amazing read!! I unquestionably enjoying just about every little bit of it and I’ve you bookmarked to take a look at new stuff you blog post.

  2. Pingback: yoga pants

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s