This example shows how to create a dynamic list in MVC application. An input event sends an ajax http Get to the controller, the data is created and sent back to the view. The input event uses the jquery.unobtrusive-ajax.js jQuery library to send the http Get to the server.

Code: https://github.com/damienbod/MvcDynamicDropdownList

History

2018-06-14 Updated to ASP.NET Core

The model class for the partial view contains a List of SelectedListItem objects.

using Microsoft.AspNetCore.Mvc.Rendering;
using System.Collections.Generic;

namespace MvcDynamicDropdownList.Models
{
    public class DdlItems
    {
        public List<SelectListItem> Items { get; set; }
    }
}

In the Action method DynamicDropDownList, we use the model class to return our data for the dynamic view. Here’s the Controller example for handling the ajax call.

using System.Collections.Generic;
using System.Diagnostics;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using MvcDynamicDropdownList.Models;

namespace MvcDynamicDropdownList.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult About()
        {
            ViewData["Message"] = "Your application description page.";

            return View();
        }

        public IActionResult Contact()
        {
            ViewData["Message"] = "Your contact page.";

            return View();
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [HttpPost]
        public ActionResult DynamicDropDownList()
        {
            var model = new DdlItems();
            model.Items = new List<SelectListItem>
            {
                new SelectListItem { Text = "H1", Value = "H1Value"},
                new SelectListItem { Text = "This is cool", Value = "cool"}
            };
            return View(model);
        }

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }
    }
}

The Index view will be loaded when the correct Url is called. The asp-controller supports ajax calls is used to load the data (async). The button or input control is inside this form.

@{
    ViewData["Title"] = "Home Page";
}

<div>
    <div>

        <form asp-controller="Home" asp-action="DynamicDropDownList" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#content">
            <input type="submit" value="getData" />
        </form>
        <div id="content"></div>

    </div>

</div>

The controller method returns the Partial view which will be loaded with each button event.

@model MvcDynamicDropdownList.Models.DdlItems

<div style="width: 200px;">
   @Html.ListBox("myId",  Model.Items )
</div>
  

Links:

https://stackoverflow.com/questions/35202804/submitting-a-razor-form-using-jquery-ajax-in-mvc6-using-the-built-in-functionali

http://www.asp.net/mvc/tutorials/javascript/working-with-the-dropdownlist-box-and-jquery/using-the-dropdownlist-helper-with-aspnet-mvc

http://api.jquery.com/

http://www.asp.net/mvc