Articles Videos Audios Images Contact RSS
AppsDiaries SomePersonalExperiences

Articles by tag

ASP.Net
Boolean
Cascading
Compress
Controller
CSS
Deploy
GZIP
int
JavaScript
jQuery
Model
MVC
Problem
Publish
Razor
Review
Route
String
View
Website

Cascading Dropdown with MVC 3 Razor and jQuery

- -

Summary

In AjaxExtention toolkit there's a useful extender named <b>CascadingDropDown</b>, it extends selected Dropdowns controles to Cascading, so I will do this with MVC and jQuery.

Content

Couple of days ago somebody asked me how do you create Cascading Dropdown in MVC, I answered him but I know there are many people want to know how they can do this. This is my solution for Cascading Dropdown in ASP.Net MVC.

First of, I created an empty MVC 3 Razor project. To do this open Visual Studio and from File menu click New and Project.

new project

Select Web and then select ASP.Net MVC 3 Web Application, choose a name for project at the buttom of page click OK.


new mvc project

In opened window select Empty and choose Razor view engine, OK.

empty mvc razor project

In Solution Explorer delete _ViewStart.cshtml from Views directory.

delete viewstart

Now create a new Controller. Right click on Controller directory (in Solution Explorer) and click on Add -> New Controller.

add controller


Set the controller's name as HomeController and click Add.


name the controller



Inside of HomeController is an action named as Index. This is the default page of website. Leave it alone for now ;). Create a new Action and call it GetVersions. The idea is users choose an OS and jQuery provides a new dropdown (in Html and MVC: select) and shows the versions of selected OS, so GetVersions action calculates selected item and generates a Select control and returns it to page. GetVersion needs an argument which I called it OS as type of int.

action

Right click on GetVersion and choose Add View.

add view

In opend window check Create as a partial view and click Add.

add parial view

Now we have an empty page, so we should do some work. At the first define what type of data should be the Model of this View. I have an array of strings and this is my View's Model. Do it this way:

Enter " @model string[] " at the top of page:

model

Now I will create a Select control (Dropdown in ASP.Net) and fill it with Model's items. I do this like this:

select

Ok, so far so good, now I have to calculate passed value into GetVersios. In this sample, I will show three OSs and give them diffrent codes. First one is Windows with code 0, second one is Linux with code 1 and last one is Mac OS X with code 2.
I will get the selected value and return relevant versions. (In this case I will return values from a static array, but you can get your data from a database or something).

GetVersions codes
(All versions are found at Wikipedia)


Now we need to test our Action but to do a test we need a page to test GetVersions, right click on Index Action and click Add View (just like GetVersions). In opend window click on "..." button and choose "_Layout.cshtml" from "~/Views/Shared" directory and click Add.

add index view

In opend window (Index.cshtml) create tow Select control and fill them just like the picture:

index view

now we need to write some scripts. Look at this script that I have added :

jquery script

Now I should describe this script. Briefly, when ValueChange event of first Select raised, this script will pass the selected value of Select to the GetVersions action and replace the second Select with result of GetVersions action.
.change calls the inside function when the value of the jquery selector changed, in this case, our jquery selector selects the first Select object, named OS. When the value changed, it will check if the value is not -1 do some Ajax work.
.ajax is Ajax functoin of jquery, this this a brief decription about this ajax function:

  1. url - address of web page or service

  2. type - type of request: GET, POST, PUT or DELETE

  3. date - the parameters of the web page or service, parameters should be define like this: {name1:value1, name2:value2,...}

  4. success - if the process finished successful, jquery will call this function

  5. error - if the process finished with errors, jquery will call this function



Now second Select control (name as Version) will be replaced with response of GetVersions.

the result of this code would be this:

result


Download this project


If you found this post useful, buy me a beer by clicking on ads.

Comments

blog comments powered by class="logo-disqus">Disqus