find and solve ||
Please wait.....

Add More Dynamically in ASP.NET Core

Add More Dynamically  in ASP.NET Core

Adding a Add More Property to the AddMoreViewModel Model

Open the Models/AddMoreViewModel.cs file and add a Add More property:

using System.Collections.Generic;
namespace AddMoreExample.Models
    public class AddMoreViewModel
        public string FirstName { get; set; }
         public string LastName getset; }
        public List<AddMoreViewModel> AddMoreList { get; set; }

Open the Controller/HomeCntroller.cs file and add  property:

using Microsoft.AspNetCore.Mvc;
using AddMoreExample.Models;
namespace AddMoreExample.Controllers
    public class HomeController : Controller
        public ActionResult MainView()
            return View(); //this is main page.We will display  "_AddMorePartialView" partial page on this main page
        public ActionResult AddMorePartialView()
           //this  action page is support cal the partial page.
          //We will call this action by view page.This Action is return partial page
            AddMoreViewModel model = new AddMoreViewModel();
            return PartialView("_AddMorePartialView", model);
             //^this is actual partical page we have 
             //create on this page in Home Controller as given below image
        public ActionResult PostAddMore(AddMoreViewModel model)
          //Here,Post addmore value from view page and get multiple values from view page
            return View();

After that  create class HtmlHelper.cs use for "BeginCollectionItemCore" as above image highlight 
BeginCollectionItemCore Must important for add more. Create New Class HtmlHelper.cs and past this code as given below

using System;
using  System.Collections.Generic;
using  Microsoft.AspNetCore.Mvc.ViewFeatures;
using  System.IO;
using  Microsoft.AspNetCore.Http;
using  Microsoft.Extensions.Primitives;
using  Microsoft.AspNetCore.Mvc.Rendering;
namespace HtmlHelpers.BeginCollectionItemCore
    public static class HtmlPrefixScopeExtensions
        private const string IdsToReuseKey = "__htmlPrefixScopeExtensions_IdsToReuse_";
        public static IDisposable BeginCollectionItem(this IHtmlHelper html, string collectionName)
            return BeginCollectionItem(html, collectionName, html.ViewContext.Writer);
        public static IDisposable BeginCollectionItem(this IHtmlHelper html, string collectionName, TextWriter writer)
            if (html.ViewData["ContainerPrefix"] != null)
                collectionName = string.Concat(html.ViewData["ContainerPrefix"], ".", collectionName);
            var idsToReuse = GetIdsToReuse(html.ViewContext.HttpContext, collectionName);
            var itemIndex = idsToReuse.Count > 0 ? idsToReuse.Dequeue() : Guid.NewGuid().ToString();
            string htmlFieldPrefix = $"{collectionName}[{itemIndex}]";
            html.ViewData["ContainerPrefix"] = htmlFieldPrefix;
             * html.Name(); has been removed
             * because of incorrect naming of collection items
             * e.g.
             * let collectionName = "Collection"
             * the first item's name was Collection[0].Collection[<GUID>]
             * instead of Collection[<GUID>]
            string indexInputName = $"{collectionName}.index";
            // autocomplete="off" is needed to work around a very annoying Chrome behaviour
            // whereby it reuses old values after the user clicks "Back", which causes the
            // xyz.index and xyz[...] values to get out of sync.
            writer.WriteLine($@"<input type=""hidden"" name=""{indexInputName}"" autocomplete=""off"" value=""{html.Encode(itemIndex)}"" />");
            return BeginHtmlFieldPrefixScope(html, htmlFieldPrefix);
        public static IDisposable BeginHtmlFieldPrefixScope(this IHtmlHelper html, string htmlFieldPrefix)
            return new HtmlFieldPrefixScope(html.ViewData.TemplateInfo, htmlFieldPrefix);
        private static Queue<string> GetIdsToReuse(HttpContext httpContext, string collectionName)
            // We need to use the same sequence of IDs following a server-side validation failure,
            // otherwise the framework won't render the validation error messages next to each item.
            var key = IdsToReuseKey + collectionName;
            var queue = (Queue<string>)httpContext.Items[key];
            if (queue == null)
                httpContext.Items[key] = queue = new Queue<string>();
                if (httpContext.Request.Method == "POST" && httpContext.Request.HasFormContentType)
                    StringValues previouslyUsedIds = httpContext.Request.Form[collectionName + ".index"];
                    if (!string.IsNullOrEmpty(previouslyUsedIds))
                        foreach (var previouslyUsedId in previouslyUsedIds)
            return queue;
        internal class HtmlFieldPrefixScope : IDisposable
            internal readonly TemplateInfo TemplateInfo;
            internal readonly string PreviousHtmlFieldPrefix;
            public HtmlFieldPrefixScope(TemplateInfo templateInfo, string htmlFieldPrefix)
                TemplateInfo = templateInfo;
                PreviousHtmlFieldPrefix = TemplateInfo.HtmlFieldPrefix;
                TemplateInfo.HtmlFieldPrefix = htmlFieldPrefix;
            public void Dispose()
                TemplateInfo.HtmlFieldPrefix = PreviousHtmlFieldPrefix;
  • First,Want to create partial page  "_AddMorePartialView " 
  • Open partial page "_AddMorePatialView" and past this code on this page as given below

@model AddMoreExample.Models.AddMoreViewModel
    Layout = null;
} @using HtmlHelpers.BeginCollectionItemCore;
@{     //BeginCollectionItemCore already created in HtmlHelper.cs class }
@using (Html.BeginCollectionItem("AddMoreList")) {     <!-------"AddMoreList"----- this is AddMoreViewModel List Object wich is define ViewModel file -->     <div id="removeAddMoreDiv" class="col-xs-12 col-sm-12 form-group">         <div class="row">             <div class="col-md-4">                 <input asp-for="FirstName" placeholder="First Name" class="form-control" />             </div>             <div class="col-md-4">                 <input asp-for="LastName" placeholder="First Name" class="form-control" />             </div>             <div class="col-md-4">                 <button type="button" class="btn btn-danger btn-sm removeDiv">                     Remove                 </button>             </div>             <div class="clearfix"></div>         </div>     </div> } <script>     $(".removeDiv").click(function () {         $(this).parents("#removeAddMoreDiv").remove();     }); </script>
Call partial page "_AddMorePatialView" from main page .So create first MainView page.
Open your Home Controller and Create new Page "MainView.cshtml".
Open your MainView.cshtml View page and past this code as given below .

<style>     .form-group-material { 
        position: relative;         margin-bottom: 0px !important;     } </style> <script src="~/lib/jquery/dist/jquery.min.js"></script> <section class="forms">     <div class="container-fluid">         <div class="row">             <div class="col-lg-12">                 <div class="card">                     <div class="card-body">                         <form asp-action="PostAddMore" class="text-left form-validate">                             <div asp-validation-summary="ModelOnly" class="text-danger"></div>                             <br />                             <div class="col-sm-12">                                 @Html.Partial("_AddMorePartialView")                             </div>                             <div id="addAddMoreDiv"></div>                             <a id="add_row" class="btn btn-primary float-right"> Add Row</a>                             <br />                             <br />                             <input type="submit" class="btn btn-primary float-left" value="Save" />                         </form>                     </div>                 </div>             </div>         </div>     </div> </section> @section Scripts {     <script>       $('#add_row').on('click', function () {         $.ajax({             url: '@Url.Action("AddMorePartialView", "Home")',             type: 'GET',             data: {             },             success: function (result) {                 $('#addAddMoreDiv').append(result);             },             error: function () {             }         });     });     </script> } @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

Related information

Sundar  Neupane

Sundar Neupane

I like working on projects with a team that cares about creating beautiful and usable interfaces.

If felt valuable to you, feel free to share it.


Avatar for Rahul   Sharma
Rahul Sharma 3

Thank you so much.I have done my project by your blog.

Avatar for Sundar   Neupane
Rahul Sharma 2

It's my pleasure

Report Response