Click here to Skip to main content
12,064,870 members (40,833 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

15.1K views
5 bookmarked
Posted

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

, 29 May 2013 CPOL
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
Web03 | 2.8.160204.4 | Last Updated 29 May 2013
Article Copyright 2013 by nandakishoreroyal
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid