locked
Dynamically Add class / design part to the div RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    In edit mode, my razor creates controls like below.

    @for (int i = 0; i < Model.vendorsModels.Count; i++)
                                            {
                                              
                                                <div>
                                                    <div class="col-sm-10 col-xs-10">
                                                        <div class="col-sm-3 col-xs-3">
                                                            @Html.Hidden("vendor_id", Model.vendorsModels[i].vendor_id, new { @name = "vendor_id" })
                                                            <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">
                                                                Consultant
                                                            </label>
                                                            @Html.TextBox("name", Model.vendorsModels[i].name, new { @name = "name", @class = "form-control" })
                                                        </div>
                                                        <div class="col-sm-3 col-xs-3">
                                                            <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">
                                                                Email
                                                            </label>
                                                            @Html.TextBox("email", Model.vendorsModels[i].email, new { @name = "email", @class = "form-control" })
                                                        </div>
                                                        <div class="col-sm-3 col-xs-3">
                                                            <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">
                                                                Phone
                                                            </label>
                                                            @Html.TextBox("phone", Model.vendorsModels[i].phone, new { @name = "phone", @class = "form-control" })
                                                        </div>
    
                                                        <div class="col-sm-2 col-xs-2" style="padding: 27px;">
                                                            <input type="button" value="-" onclick="RemoveTextBoxDirect(this)">
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-10 col-xs-10">
                                                        <div class="col-sm-9 col-xs-9">
                                                            <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">
                                                                Address
                                                            </label>
                                                            @Html.TextBox("Addrss", Model.con_direct_address, new { @name = "address", @class = "form-control" })
                                                        </div>
                                                    </div>
                                                  
    
                                                </div>
    
                                            }
                                            <div id="TextBoxContainerDirect">
    
    
                                            </div>
    
                                        </div>

    After creating those control I am creating some new controls with the same design patterns like below using jquery.

     <script type="text/javascript">
            function GetDynamicTextBoxDirect(value) {
                var div = $("<div />");
    
                var txtBoxvendoreId = $("<input />").attr("type", "hidden").attr("name", "vendor_id");
                var textBoxName = $("<input />").attr("type", "text").attr("name", "name");
                var textBoxEmail = $("<input />").attr("type", "text").attr("name", "email");
                var textBoxPhone = $("<input />").attr("type", "text").attr("name", "phone");
                var textBoxAddress = $("<input />").attr("type", "text").attr("name", "address");
    
                txtBoxvendoreId.val(value);
                div.append(txtBoxvendoreId);
    
                textBoxName.val(value);
                div.append(textBoxName);
    
                textBoxEmail.val(value);
                div.append(textBoxEmail);
    
                textBoxPhone.val(value);
                div.append(textBoxPhone);
    
                textBoxAddress.val(value);
                div.append(textBoxAddress);
    
                var button = $("<input />").attr("type", "button").attr("value", "Remove");
                button.attr("onclick", "RemoveTextBoxDirect(this)");
                div.append(button);
    
                return div;
            }
            function AddTextBoxDirect() {
                var div = GetDynamicTextBoxDirect("");
                $("#TextBoxContainerDirect").append(div);
            }
    
            function RemoveTextBoxDirect(button) {
                $(button).parent().parent().parent().remove();
            }
    
            $(function () {
                var values = eval('@Html.Raw(ViewBag.Values)');
                if (values != null) {
                    $("#TextBoxContainerDirect").html("");
                    $(values).each(function () {
                        $("#TextBoxContainerDirect").append(GetDynamicTextBoxDirect(this));
                    });
                }
            });
        </script>

    Controls are creating fine. No issue. But I need to add design dynamically also. For now my view is like below.

    1

    Please suggest

    Wednesday, April 8, 2020 8:11 AM

Answers

  • User-474980206 posted

    How? As I creating controls dynamically. How I can set the position of div accordingly that here would be a div is being created.

    just recreate the makeup. for 

    <div>
      <div class="col-sm-10 col-xs-10">
      <div class="col-sm-3 col-xs-3">
         @Html.Hidden("vendor_id", Model.vendorsModels[i].vendor_id, new { @name = "vendor_id" })
         <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">
            Consultant
         </label>
         @Html.TextBox("name", Model.vendorsModels[i].name, new { @name = "name", @class = "form-control" })
       </div>
       ....
    </div>

    in jQuery its:

    var div = $('<div/>')
        .append($('<div class="col-sm-10 col-xs-10" />')
           .append($('<div class="col-sm-3 col-xs-3" />')
                    .append($('<input type="hidden" name="vendor_id" />'))
                    .append($('<label for="tor" class="col-sm-2 col-xs-2 control-label statictxt" style="clear: both; text-align: left;" />')
                           .append($('<span>Consultant</span>'))
                    )
                    .append($('<input type="text" name="name" class = "form-control" />'))
            )
        );

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 8, 2020 7:57 PM
  • User1052662409 posted

    in jQuery its:

    Thank you Bruce for your solution.

    I also prepared for a solution. I created the whole dom in once. See below. And it works fine for me.

    <script type="text/javascript">
            function GetDynamicTextBoxDirect(value) {
                var div = $("<div />");
    
                var txtBoxvendoreId = "<input type='hidden' name='vendor_id' value=''/>";
                var textBoxName = "<input type='text' name='name' class='form-control' value='' />";
                var textBoxEmail = "<input type='text' name='email' class='form-control' value='' />";
                var textBoxPhone = "<input type='text' name='phone' class='form-control' value='' />";
                var textBoxAddress = "<input type='text' name='address' class='form-control' value='' />";
                var button = "<input type='button' name='-' onclick='RemoveTextBoxDirect(this)' value='-' />";
    
                var dom = '   <div class="col-sm-10 col-xs-10">  ' +
                          '        <div class="col-sm-3 col-xs-3">  ' +
                                        txtBoxvendoreId +
                          '            <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">  ' +
                          '                Consultant  ' +
                          '            </label>  ' +
                                        textBoxName +
                          '            <name>  ' +
                          '        </div>  ' +
                          '        <div class="col-sm-3 col-xs-3">  ' +
                          '            <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">  ' +
                          '                Email  ' +
                          '            </label>  ' +
                                        textBoxEmail +
                          '        </div>  ' +
                          '        <div class="col-sm-3 col-xs-3">  ' +
                          '            <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">  ' +
                          '                Phone  ' +
                          '            </label>  ' +
                                        textBoxPhone +
                          '        </div>  ' +
                          '        <div class="col-sm-2 col-xs-2" style="padding: 27px;">  ' +
                                        button +
                          '        </div>  ' +
                          '    </div>  ' +
                          '    <div class="col-sm-10 col-xs-10">  ' +
                          '        <div class="col-sm-9 col-xs-9">  ' +
                          '            <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">  ' +
                          '                Address  ' +
                          '            </label>  ' +
                                        textBoxAddress +
                          '        </div>  ' +
                          '   </div>  ';
                
                div.append(dom);
    
                return div;
            }
            function AddTextBoxDirect() {
                var div = GetDynamicTextBoxDirect("");
                $("#TextBoxContainerDirect").append(div);
            }
    
            function RemoveTextBoxDirect(button) {
                $(button).parent().parent().parent().remove();
            }
    
            $(function () {
                var values = eval('@Html.Raw(ViewBag.Values)');
                if (values != null) {
                    $("#TextBoxContainerDirect").html("");
                    $(values).each(function () {
                        $("#TextBoxContainerDirect").append(GetDynamicTextBoxDirect(this));
                    });
                }
            });
        </script>

    Thanks

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 9, 2020 4:58 AM

All replies

  • User-474980206 posted

    In razor code you include <div>’s and labels with classes. These are not included in JavaScript version, so they look different.

    Wednesday, April 8, 2020 2:37 PM
  • User1052662409 posted

    In razor code you include <div>’s and labels with classes

    How? As I creating controls dynamically. How I can set the position of div accordingly that here would be a div is being created.

    I request you to please suggest.

    Wednesday, April 8, 2020 3:04 PM
  • User475983607 posted

    How? As I creating controls dynamically. How I can set the position of div accordingly that here would be a div is being created.

    I request you to please suggest.

    It's pretty simple.  The JavaScript function does not generate the same markup as the View.  You can see the different by using standard debugging tools.  Right click in the browser and select "View page source".  The differences in the markup will be very clear.  Change the JavaScript function so it renders HTML identical to the view markup. 

    Wednesday, April 8, 2020 3:28 PM
  • User-474980206 posted

    How? As I creating controls dynamically. How I can set the position of div accordingly that here would be a div is being created.

    just recreate the makeup. for 

    <div>
      <div class="col-sm-10 col-xs-10">
      <div class="col-sm-3 col-xs-3">
         @Html.Hidden("vendor_id", Model.vendorsModels[i].vendor_id, new { @name = "vendor_id" })
         <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">
            Consultant
         </label>
         @Html.TextBox("name", Model.vendorsModels[i].name, new { @name = "name", @class = "form-control" })
       </div>
       ....
    </div>

    in jQuery its:

    var div = $('<div/>')
        .append($('<div class="col-sm-10 col-xs-10" />')
           .append($('<div class="col-sm-3 col-xs-3" />')
                    .append($('<input type="hidden" name="vendor_id" />'))
                    .append($('<label for="tor" class="col-sm-2 col-xs-2 control-label statictxt" style="clear: both; text-align: left;" />')
                           .append($('<span>Consultant</span>'))
                    )
                    .append($('<input type="text" name="name" class = "form-control" />'))
            )
        );

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 8, 2020 7:57 PM
  • User1052662409 posted

    in jQuery its:

    Thank you Bruce for your solution.

    I also prepared for a solution. I created the whole dom in once. See below. And it works fine for me.

    <script type="text/javascript">
            function GetDynamicTextBoxDirect(value) {
                var div = $("<div />");
    
                var txtBoxvendoreId = "<input type='hidden' name='vendor_id' value=''/>";
                var textBoxName = "<input type='text' name='name' class='form-control' value='' />";
                var textBoxEmail = "<input type='text' name='email' class='form-control' value='' />";
                var textBoxPhone = "<input type='text' name='phone' class='form-control' value='' />";
                var textBoxAddress = "<input type='text' name='address' class='form-control' value='' />";
                var button = "<input type='button' name='-' onclick='RemoveTextBoxDirect(this)' value='-' />";
    
                var dom = '   <div class="col-sm-10 col-xs-10">  ' +
                          '        <div class="col-sm-3 col-xs-3">  ' +
                                        txtBoxvendoreId +
                          '            <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">  ' +
                          '                Consultant  ' +
                          '            </label>  ' +
                                        textBoxName +
                          '            <name>  ' +
                          '        </div>  ' +
                          '        <div class="col-sm-3 col-xs-3">  ' +
                          '            <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">  ' +
                          '                Email  ' +
                          '            </label>  ' +
                                        textBoxEmail +
                          '        </div>  ' +
                          '        <div class="col-sm-3 col-xs-3">  ' +
                          '            <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">  ' +
                          '                Phone  ' +
                          '            </label>  ' +
                                        textBoxPhone +
                          '        </div>  ' +
                          '        <div class="col-sm-2 col-xs-2" style="padding: 27px;">  ' +
                                        button +
                          '        </div>  ' +
                          '    </div>  ' +
                          '    <div class="col-sm-10 col-xs-10">  ' +
                          '        <div class="col-sm-9 col-xs-9">  ' +
                          '            <label for="tor" class="col-sm-2 col-xs-2 control-label  statictxt" style="clear: both; text-align: left;">  ' +
                          '                Address  ' +
                          '            </label>  ' +
                                        textBoxAddress +
                          '        </div>  ' +
                          '   </div>  ';
                
                div.append(dom);
    
                return div;
            }
            function AddTextBoxDirect() {
                var div = GetDynamicTextBoxDirect("");
                $("#TextBoxContainerDirect").append(div);
            }
    
            function RemoveTextBoxDirect(button) {
                $(button).parent().parent().parent().remove();
            }
    
            $(function () {
                var values = eval('@Html.Raw(ViewBag.Values)');
                if (values != null) {
                    $("#TextBoxContainerDirect").html("");
                    $(values).each(function () {
                        $("#TextBoxContainerDirect").append(GetDynamicTextBoxDirect(this));
                    });
                }
            });
        </script>

    Thanks

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 9, 2020 4:58 AM