Tuesday, March 17, 2015

Bind data to dropdownlist on change parent dropdown event using jquery Ajax in MVC Razorview.

There is various way to bind dropdownlist in MVC using Razorview. but if you want to bind dropdownlist according to change event of another dropdownlist selected item change event then you can do this through jquery .ajax method and through JsonResult as given below.

Create Model in your MVC Project.

   public class ProductModel
    {
        public string Category { get; set; }
        public string Products { get; set; }

    }

Create Simple RazorView for binding Dropdownlist.

add model reference on top of this view
@model sampleApplication.Models.ProductModel

and add html helper dropdown list

@Html.DropDownListFor(m => m.Category, new SelectList(ProjectUtils.GetCategories(), "Id", "Name"), "--Categories--")
@Html.DropDownListFor(m => m.Products, new SelectList(ProjectUtils.GetProducts(), "Id", "Name"), "--Products--")

Create JQuery function for selected category dropdown to get productlist of that category.


Create Controller and add below functions for fetch data from database according to pass category id.


This is the complete process for binding dropdownlist on selection change event.I hope you like this post i would like to give your feedback or comment.

No comments:

Post a Comment