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, the following JQuery code executes

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>

JQuery

$(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);
       }
    });
}

});

Controller

public class testAjaxController : Controller
{

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

        return View(test);
    }
}

However, when I put a breakpoint on the SomePartialView method within the testAjax Controller it never gets hit.

Can anyone perhaps suggest why this is?

Any help would be greatly appreciated.

Thanks.

UPDATE

I added the errorData line to my Ajax call like so, but that doesn’t seem to give me anything either

$(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);
       },
       error: function (errorData) { $('#someDivToLoadContentTo').html(errorData); }
    });
}

});

Answer 1

Folks the problem was with the following line

url: '@Url.Action("SomePartialView","testAjax")'

This was creating an incorrect URL, therefore, the action never got called. I changed to the following line which then corrected the problem

url: '/testAjax/SomePartialView/' + dropDownValue