MVC - html.dropdownlist - calling javascript or controller/method directly?

Question

In my MVC application, I have a html.dropdownlist in my view. On selection changed - I want the value to be passed on to a method (that returns something like a list or a JsonResult) in the controller.

Q1: How do I do this?

 <%=Html.DropDownList("title", Model.Titleitems, "" )%>

Q2: Is this a good practice (having controller/method name in the view directly) or should I write a JavaScript function and call the appropriate controller/method from inside that JavaScript function? In that case, how can I write a Onchange or OnSelectionChanged event for the above html.dropdownlist control?

EDIT:

par1 is the dropdownlist selected value I want to pass to this controller/method..

       public ActionResult GetMethod(string Par1)
        {
            //My code here 

            return Json(varValue, JsonRequestBehavior.AllowGet); 
        }

Now I have the dropdownlist on change taking me to a JavaScript function (as per marteljn suggestion) and in the JavaScript function, I have .ajax call specifying URL and type etc. that takes me to the controller/method code; but still not able to figure out how to pass the selected value to the controller?

Solution 1

Q2 is the answer to Q1. There are no events when using MVC like there are in web forms, so you will write some JavaScript to make a request back to the server.
There are (at least) two ways to go about it:

1. Inline Event Handler (not recommended)

   <%=Html.DropDownList("title", Model.Titleitems, new{@onchange = "YourJsFuncHere()"} )%>

2. The JQuery way,

   $("#title").bind("change",function(){
        //Your Code  
        //Use .on instead of bind if you are using JQuery 1.7.x or higher   
        //http://api.jquery.com/on/ 
   });
   

Edit - The AJAX Code

$.ajax({
  "url": "/Controller/Action/" + $("#title").val(),
  "type": "get",
  "dataType" : "json",
  "success": function(data){
    //Your code here
    //data should be your json result
  }
});

Change GetMethod(string Par1) to GetMethod(string id) or change your default route to reflect the Par1 parameter.

Also, if its not hitting your break point its possible that 1) the AJAX request is not being initied (use firebug to see if it is) 2) Your routes are not configured properly (Look in Global.asax.cs, if you haven't moved the routing somewhere else.

Solution 2

$(function(){
  $("#title").change(function(){
   var selectedVal=$(this).val();
   $.getJSON("UserController/YourAction",{ id: selectedVal} , function(result ){
       //Now you can access the jSon data here in the result variable
   });

 });

});

Assuming you have an Action method called YourAction in your UserController which returns JSON

public ActionResult YourAction(int id)
{
  //TO DO : get data from wherever you want. 

   var result=new { Success="True", Message="Some Info"};
   return Json(result, JsonRequestBehavior.AllowGet); 

}