MVC loading a dynamic list in a 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

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

using System.Collections.Generic;
using System.Web.Mvc;

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.Web.Mvc;
using MvcDynamicDropdownList.Models;

namespace MvcDynamicDropdownList.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            
            return View();
        }

        public ActionResult DynamicDropDownList()
        {
            var model = new DdlItems();
            model.Items = new List<SelectListItem>
            {
                new SelectListItem {Selected = true, Text = "H1", Value = "H1Value"}
            };
            return View(model);
        }
    }
}

The Index view will be loaded when the correct Url is called. The Ajax.BefinForm is used to load the data (async). Our button or input control is inside this form.

@using System.Web.Mvc.Html
@model MvcDynamicDropdownList.Models.DdlItems

<!DOCTYPE html>

<html>
    <head>
        <title>title</title>
        <script src="~/Scripts/jquery-2.0.3.js"></script>
        <script src="~/Scripts/jquery.validate.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    </head>
    <body>
        <div>
            <div>
                @using (Ajax.BeginForm("DynamicDropDownList", "Home", new AjaxOptions { UpdateTargetId = "result" }))    
                {
                    <div id="result"></div>
                    <input type="submit" value="getData" />
                }
            </div>  
             
        </div>
        

    </body>
</html>

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

@using System.Web.Mvc.Html
@model MvcDynamicDropdownList.Models.DdlItems

<div>
   @Html.ListBox("myId",  Model.Items )
</div>

Links:

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

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: