How to Load Dynamic HTML content in Page using MVC

In this article, we’ll learn how we can load dynamic HTML content in page form using MVC.

Prerequisites:

1. Prior knowledge of MVC.
2. Prior knowledge of JavaScript.
3. Visual studio 2017.

#4 Steps Guide: How to load dynamic HTML content using MVC?

Step 1: Create a New MVC Project

• Start up Visual studio.
• Choose ASP.NET Web Application (C#).
• After that you will have to Select MVC.

Step 2: Add a New Controller

• Add New controller with MVC5 Controller – Empty

• Assign name of that controller – DynamicElementsLoadController
• Click on add, it will create a new controller as well as View like below

Step 3: Create code for adding div & event

• Add form div including one textbox one checkbox one drop-down along with Add-Row & Submit button.

<div>
        <a href="#" style="margin-top:29px;margin-left:15px;"
           class="btn btn-info add-row" role="button"> <i class="fa fa-plus"></i> Add Row</a>
    </div>
    <div id="firstDriver_initialForm">
        <form method="post" id="frmElements" class="form-group">
            @Html.HiddenFor(model => model.IncrementValue)
            <div class="container">
                <div class="dynamic-rows">
                    <div class="row" id="template" data-order="0">
                        <div class="row filter">
                            <div class="col-md-3">
                                <label class="bold">Enter Name:</label>
                                @Html.TextBoxFor(model => model.lstTemplateModels.Name, new { @class = "form-control demo", placeholder = "Enter Name" })
                            </div>
                            <div class="col-md-3">
                                <label class="bold">Remember Me:</label>
                                @Html.CheckBoxFor(model => model.lstTemplateModels.IsChecked, new { @class = "form-control form-check-input", @style = "margin-top:12px;height:20px;" })
                            </div>
                            <div class="col-md-3">
                                <label class="bold">DropDown:</label>
                                @Html.DropDownListFor(model => model.lstTemplateModels.DropDownValue, new List<SelectListItem>
                           {
                               new SelectListItem {Text="Single",Value="SINGLE"},
                               new SelectListItem {Text="Married",Value="MARRIED"}
                           }, "Select Status", new { @class = "form-control" })
                            </div>
                            <div class="col-md-3">
                                <button style="margin-top:31px;" type="submit" class="btn btn-danger delete-row" data-val="0"><i class="fa fa-trash"></i> Delete Row</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
<button style="margin-top:18px;margin-left:35px;" id="saveTemplate" type="submit" class="btn btn-success">Submit</button>

• GUI looks like below

Step 4: Add Simple JQuery for adding row dynamically

• Add below code:

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">


    var i = 0;
    $('.add-row').click(function () {
        i = i + 1;
        var _formTemp = $("#template").clone(true)
        var _targetForm = $(".dynamic-rows")
        _formTemp.attr("data-order", i);
        _targetForm.append(_formTemp)
        return false;
    });

• Here add-row button click event.
• On click of that button it clone that div html.
• And append it on dynamic rows class div output likes below.

That’s it. Over to You!

If you’re looking for Source Code, Check it out here GITHUB.

For any queries regarding the ASP.NET, you can ask our .NET developers via GITHUB. Stay Connected for article tutorials like this. Until then Happy Coding…

Related Tutorial Articles:

• Angular: Create Custom Dynamic Loader on HTML Element
• Angular IE Error: Uncaught (in promise) Loading chunk
• Angular: Load Dynamic Div HTML Content