Click here to Skip to main content
15,892,005 members
Articles / Web Development / ASP.NET
Tip/Trick

Create dynamic controls from code-behind and validate them through JavaScript

Rate me:
Please Sign up or sign in to vote.
4.00/5 (2 votes)
29 May 2013CPOL 23.3K   4  
Dynamically creating controls and validating using JavaScript.

Introduction

This article explains how to create dynamic controls from code-behind and validate them through JavaScript.

Using the code

On page load the controls will be loaded dynamically from code-behind. On submit click event, validation is performed using JavaScript.

In case of failure, error messages are displayed. In case of success, submit click event is performed.

ASPX code:

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="DynamicControls.aspx.cs"
    Inherits="Practice.Aspx.DynamicControls" %>
 
<!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>
    <style type="text/css">
        .red
        {
            color: Red;
        }
    </style>
    <script type="text/javascript">
        function fnValidate() {
            var txt = document.getElementById("txtSample");
            var drpGender = document.getElementById("drpGender");
            var x = document.getElementById('ErrorMessage');
            x.innerHTML = "";
            if (drpGender.value == "Select") {
                x.innerHTML = "Please Select Gender<br>";
            }
            if (txt.value == "") {
                x.innerHTML += "Enter Name in Textbox";
            }
            if (x.innerHTML != "") {
                return false;
            }
 
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="ErrorMessage" runat="server" class="red">
    </div>
    <div id="GenerateControls" runat="server">
    </div>
    <div id="SubmitButton" runat="server">
    </div>
    </form>
</body>
</html>

Code-behind:

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace Practice.Aspx
{
    public partial class DynamicControls : System.Web.UI.Page
    {
 
        protected void Page_Load(object sender, EventArgs e)
        {
            TextBox txtSample = new TextBox();
            txtSample.ID = "txtSample";
            GenerateControls.Controls.Add(txtSample);
            GenerateControls.Controls.Add(new LiteralControl("<br />"));
            DropDownList drp = new DropDownList();
            drp.ID = "drpGender";
            drp.Items.Add("Select");
            drp.Items.Add("Male");
            drp.Items.Add("Female");
            GenerateControls.Controls.Add(drp);
            Button submit = new Button();
            submit.ID = "btnSubmit";
            submit.Text = "Submit";
            submit.Click += new EventHandler(btnSubmit_Click);
            SubmitButton.Controls.Add(submit);
            SubmitButton.Attributes.Add("onclick", 
                      "javascript:return fnValidate()");
 
        }
 
        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            TextBox txtSample = (TextBox)GenerateControls.FindControl("txtSample");
            DropDownList drpGender = 
                  (DropDownList)GenerateControls.FindControl("drpGender");
            String[] str = new String[10];
            str[0] = txtSample.Text;
            str[1] = drpGender.SelectedItem.Text;
        }
    }
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --