Loading a dynamic list in an ASP.NET Core MVC View

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

Advertisements

2 comments

  1. santhosh · · Reply

    sorry unable to get the result

    1. Hi Santhosh, updated this to ASP.NET Core 2.1 with working version.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: