Click here to Skip to main content
11,645,087 members (67,722 online)
Click here to Skip to main content

Tagged as

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

, 29 May 2013 CPOL 13.4K 5
Rate this:
Please Sign up or sign in to vote.
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:

<%@ 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:

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)

Share

About the Author

No Biography provided

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150731.1 | Last Updated 29 May 2013
Article Copyright 2013 by nandakishoreroyal
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid