ASP.Net MVC 3 Drop Down List

Question

I am developing an ASP.Net MVC 3 Web Application. One of my Razor Views contains a few Textboxes and a Drop Down List. When the User selects an option from the Drop Down List, I need a Partial View, or something like this, to appear below the Drop Down List preferable without a post back.

The thing is, it isn't as easy as a simply JQuery Hide and Show for the Partial View, when the User selects an option from the Drop Down List, I need their option to be sent to a method in the Controller, perform some logic based on this option, and then return some data to the Partial View.

I haven't really got much experience with AJAX, but I get the feeling this is the technology I need to use in order to fulfil my problem.

Has anyone ever had to code anything similar to what I have described above? And if so, is AJAX what I need to use?

Also, if anyone knows of any tutorials or code snipets I could look at to help, that would be greatly appreciated.

Thanks.

UPDATE

I have followed Ryan's answer, but unfortunately I am still having some problems. I have created the following JavaScript file which is then referenced in my View

$(document).ready(function () {

$("#myDDL").change(ChangeEventOfDDL);

function ChangeEventOfDDL(){
var dropDownValue = $('#myDDL').val();
//alert(dropDownValue);
$.ajax({ type: "GET",
       url: '@Url.Action("SomePartialView","testAjax")',
       data: {
           id: dropDownValue
       },
       success: function(data) {
             $('#someDivToLoadContentTo').html(data);
       }
    });
}

});

View

    <select id="myDDL">
    <option></option>
    <option value="1">F1</option>
    <option value="2">F2</option>
    <option value="3">ST1</option>
    <option value="4">ST2</option>
    </select>


<div id="someDivToLoadContentTo">

</div>

My Controller then looks like this

public class testAjaxController : Controller
{
    //
    // GET: /testAjax/

    LocumEntities context = new LocumEntities();

    public ActionResult SomePartialView(int id)
    {
        var test = "Hello World";

        return View(test);
    }
}

However, my method 'SomePartialView' never gets hit. Does anyone know why?

Thanks.

Answer 1

Yes Ajax would be the easiest thing to use here. There are plenty of good Ajax tutorials around, just remember that what Ajax does is effectively a background POST, so you can do everything you would normally do with MVC, except within an existing page.

The way I would get this to work would be to have your code something like this:

public class SomeController{
    public ActionResult SomePartialView(){
         // Do some logic
         return View("SomePartial");
    }
}

Your Ajax would be something like:

function ChangeEventOfDDL(){
    $.ajax({
           url: '@Url.Action("SomePartialView","Some")',
           success: function(data) {
                 $('#someDivToLoadContentTo').html(data);
           }
    });
}

I hope that helps at least a little bit.

Crucially with Ajax, you can add a data object to the function, which is passed as a querystring. This means you can send values from your page quite easily with ajax. Working with the above example, the Javascript would be:

function ChangeEventOfDDL(){
    var dropDownValue = $('#ddl').val();
    $.ajax({
           url: '@Url.Action("SomePartialView","Some")',
           data: {
               id: dropDownValue
           }
           success: function(data) {
                 $('#someDivToLoadContentTo').html(data);
           }
    });
}

The Id value is linked with the parameters of the method in your MVC class:

public class SomeController{
    public ActionResult SomePartialView(int id){
         // Do some logic 
         var model = MakeModelWithSupplierId(id);
         return View("SomePartial",model);
    }
}

And there you have an interactive partial view that has been populated with the value from your drop down.

Answer 2

Since a controller can also return a partial view, you can do the following:

$('#idofyourdropdown').change(function () {
 var theValue = $(this).val();

  $.post('@Url.Action("Action","Controller")', {nameOfParameter: theValue, function(data) {
     $('#divWhereYouWantToAttachData').html(data);
  });
});

On the change event of your dropdown, send the selected value to your desired controller action, which will pass it to the partial view and return the rendered html. The html is received in the data var and can be attached to the dom, wherever you want it (see jQuery documentation for this).

Answer 3

This is a common use case.

What you need to do is

• create a controller method that can take the parameters you need (read about MVC model binding before you do so)
• write javascript that will harvest the data you want from your form and make a call to your new controller method and render the results below

In jQuery it goes something like this:

$("#yourDIV").load('/area/controller/method', { property1: 'asasd', property2: 'asdasdadfa'})

The second parameter of this call should be prepared based on the data you harvest from your form. (if you don't know how, then learn javascript)