how to bind dropdown using ajax in mvc from database

What is Ajax

Ajax stands from Asynchronous JavaScript XML. Using AJAX we can create partial request. To work with AJAX using JQuery first we need to add the script file. As we know JQuery is JavaScript library. So first we need to add the JQuery files.

First add the MVC application using basic template as we need script folder.

Note: - you can also manually add script folder in your MVC application.

		
		
		Figure 1

Now add model for following Table

		
		
		Figure 2

student.cs

Now first create model for this table

		
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Linq.Mapping;

namespace MvcApplication1.Models
{
    [Table(Name = "student")]
    public class student
    {
        [Column(IsPrimaryKey = true)]
        public int stu_id { get; set; }
        [Column]
        public string stu_name { get; set; }
        [Column]
        public int stu_age { get; set; }
        [Column]
        public string course { get; set; }
        [Column]
        public int fees { get; set; }

    }
}

Note: - as I am using LINQ to SQL so kindly first add LINQ to SQL Classes

Now add controller and add view for Index action.

First add your select tag to create dropdownlist in html.

		
		<select id="op1">

		</select>

Now add your script file in head tag which is already added in your script folder. You can see your script folder in your solution explorer

		
		
		Figure 3

Now add your jQuery reference on the top as we know that to use jQuery we need to add the library on the top.

		
		<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <script src="~/Scripts/jquery-1.7.1.min.js"></script>

</head>

Now create Index action which initiate the index page and another action named ShowData which returns the records in JSON format. This action selects student name and student id from database to bind dropdownlist.

Home Controller

		
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.Linq;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
       
        public ActionResult Index()
        {
          
            return View();
         
        }
        public ActionResult ShowData()
        {
            DataContext dc = new DataContext("Data Source=isha;Initial Catalog=scaffolding;User ID=isha123;Password=techaltum");
             List<student> lst = dc.GetTable<student>().ToList();
            return Json(lst,JsonRequestBehavior.AllowGet);

        }

    }
}

Now add your jquery which calls this action Index in the following manner:-

		
		<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <script src="~/Scripts/jquery-1.7.1.min.js"></script>

    <script>
        $(document).ready(
            function () {
                $(window).load(function () {
                      $.ajax({
                          url: "/home/ShowData",
                        type: "Get",
                        success: function (data) {

                            for (var i = 0; i < data.length; i++) {
                                var opt = new Option(data[i].stu_name, data[i].stu_id);
                                $('#op1').append(opt);

                            }

                        }

                    });

                });

        });
    </script>

</head>

In ajax call first we need to pass the url in which I simply pass the controller name and actin name which returns the JSON data. In type I pass whether it is Get request or Post request. If you get data successfully then it will be loaded in data variable. Then you can bind it with the select list which we already added.

Index.cshtml

Following is the complete code of Index.cshtml

		
		
		@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <script src="~/Scripts/jquery-1.7.1.min.js"></script>

    <script>
        $(document).ready(
            function () {
                $(window).load(function () {
                      $.ajax({
                          url: "/home/ShowData",
                        type: "Get",
                        success: function (data) {

                            for (var i = 0; i < data.length; i++) {
                                var opt = new Option(data[i].stu_name, data[i].stu_id);
                                $('#op1').append(opt);

                            }

                        }

                    });

                });
        });
    </script>

</head>
<body>
     <select id="op1"></select>
</body>
</html>

Now execute this code and you will get following result

		
		
		jquery with asp.net (Figure 4)

Email Address

For any query you can send mail at info@techaltum.com
Thanks