locked
Create dynamic html elements in webforms from code behind RRS feed

  • Question

  • User-534047397 posted

    Hi,

    What is the best approach to create the dynamic HTML elements ( Not an ASP controls ) including css class. Please let me know i there any best way to do.

    As of now this is my approach. ,

    1. Loading the data from database to Datatable
    2. After that converting datatable to json using Newtosnsoft
    3. And then , In aspx file, using ajax to get json from aspx.cs file
    4. converting json to an array

     using loop of the array generating html elements ie. (

    var htmlelement = '';
    for (var i = 0; i < arr.length; i++) {
        htmlelement = htmlelement +'<li><label for="chk' + i + '" class="sidebar-label"><input type="checkbox" id="chk' + i + '" class="side-checkbox" value=""/>option 1</label></li>';
    }
    Tuesday, July 17, 2018 5:21 AM

Answers

  • User-369506445 posted

    hi

    I suggest create a Class below like :

     public class Elements
        {
            public string Id { get; set; }
            public string Text { get; set; }
            public string CssClass { get; set; }
            public string ElementType { get; set; }
    
        }

    and when you load your data from database fill this class and send it to your view

    I create an Example that shows how to you pass your dynamic elements to your view with <g class="gr_ gr_15 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="15" data-gr-id="15">Ajax ,</g> for text I fill the elements hard code in the function, but you can fetch it from <g class="gr_ gr_12 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="12" data-gr-id="12">database</g> the

    I recommend try my code in a new project and after getting it, then change to your need and add or remove the properties to the Elements class 

    Code behind

    public partial class WebForm1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
      
            [WebMethod]
          
            public static string GetElements()
            {
                List<Elements> list=new List<Elements>()
                {
                    new Elements()// create text box
                    {
                        Id = "txt",
                        Text = "",
                        CssClass = "textInput",
                        ElementType = "text"
                    },
                    new Elements()// create label
                    {
                        Id = "lbl",
                        Text = "enter your name :",
                        CssClass = "lblInput",
                        ElementType = "label"
                    }
                };
                return JsonConvert.SerializeObject(list);
    
            }
             
        }
        public class Elements
        {
            public string Id { get; set; }
            public string Text { get; set; }
            public string CssClass { get; set; }
            public string ElementType { get; set; }
    
        }

    in <g class="gr_ gr_26 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="26" data-gr-id="26">html</g>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <style>
            .lblInput {
                color: red;
            }
            .textInput {
                background-color: yellow;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
        <script>
            $(document).ready(function (e) {
                $("#btn").on('click',(function(e) {
                    e.preventDefault();
                    $.ajax({
                        url: 'webform1.aspx/GetElements', // remove the ..
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            var data = response.d;
                            //we need to parse it to JSON 
                            data = $.parseJSON(data);
                            var htmlelement = '<li>';
                            $.each( data, function( key, value ) {
     
                                switch (value.ElementType) {
                                    case "label":
                                        htmlelement += "<label  class='" + value.CssClass + "'  id='"+value.Id+"' >"+value.Text+"</label>";
                                        break;
                                    case "text":
                                        htmlelement += "<input type='text'  class='" + value.CssClass + "' value='" + value.Text + "' id='"+value.Id+"' />";
                                        break;
                                default:
                                }
                            });
                            htmlelement += "</li>";
                            $("#result").html(htmlelement);
                        }           
                    });
                }));
            });
             
        </script>
    </head>
    <body>
    <form id="uploadForm">
        <input type="button" value="get elementd" id="btn"/>
        <ul>
            <div id="result"></div>
        </ul>
    </form>
    </body>
    </html>

    result

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 17, 2018 6:01 AM