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.