AJAX Cascading with MVC4

Question

I used the below method for doing Async postback using AJAX. This works fine on clicking submit. But i would like to know, is that possible to call various ActionMethods in a controller via AJAX.

I would like to implement something like cascading dropdown. How to call different ActionMethod via AJAX on dropdown value change?

Here is the code which call only one ActionMethod on submitting form.

View

@{
ViewBag.Title = "Index";
var options = new AjaxOptions()
{
    Url = Url.Action("Index", "City"),
    LoadingElementId = "saving",
    LoadingElementDuration = 2000,
    Confirm = "Are you sure you want to submit?"
};  
}

<h2>Index</h2>

@using (Ajax.BeginForm(options))
{
    <div id="saving">Loading...</div>
    @Html.DropDownList("Countries",ViewBag.Countries as SelectList)<input type="submit" />
}

Controller

public ActionResult Index()
{
    IEnumerable<SelectListItem> selectListItems = new [] 
                                                    { 
                                                      new SelectListItem{ Text = "US",Value = "1" } 
                                                    };

    ViewBag.Countries = selectListItems;

    return View();
}

public ActionResult GetState(string countryId)
{
    IEnumerable<SelectListItem> selectListItems = new[] 
                                                { 
                                                  new SelectListItem { Text = "Tennesse", Value = "1" },
                                                  new SelectListItem { Text = "Newyork", Value = "2" }
                                                };

        return View();        
}

Check [this](http://code.msdn.microsoft.com/Cascading-DropDownList-in-833683f9), and also this [answer](http://stackoverflow.com/a/12648861/1551730) — Karthik Chintala, Feb 26 '13 at 04:57
please comment on answer if any problem still exist or accept it as an answer — Syed Mohd Mohsin Akhtar, Feb 27 '13 at 09:38

Syed Mohd Mohsin Akhtar · Accepted Answer · 2013-02-26T06:48:42.720

The answer to your first question "is that possible to call various ActionMethods in a controller via AJAX" is a big yes. You may call any action method from your controller through Ajax though the only result generated depends on various things like whether you send a view or partial view or JSON result.

for your next question :

I will be posting some codes

Controller.cs

public JsonResult getCity(string country)
    {
        var temp = (from cntry in db.Table3.OrderBy(s => s.country)
                    where (string.Compare(cntry.country, country) == 0)
                    select cntry.city).ToList();
        return Json(temp, JsonRequestBehavior.AllowGet);
    }

View

<h1>
Countries</h1>
<select name="countries" class="combo">
<option value=""></option>

@{
    foreach (var t in (List<string>)ViewBag.countries)
    {
    <option value=@t>@t</option>
    }
}
 </select>
<h1>
State</h1>
<select name="city" class="combo2">
</select>
<div id="tese">
</div>
@*
The following jquery code finds the selected option from country dropdown 
and then sends an ajax call to the Home/getcity method 
and finally populate it to the city dropdown 
*@
<script type="text/javascript">
$('body').on('change', '.combo', function () {
    var selectedValue = $(this).val();
    alert(selectedValue);
    $.get("/Home/getcity", { country: selectedValue }, function (data) {
        $("#tese").html(data);
        $(".combo2").html("<option value = \"\"></option>")
        $.each(data, function (index, value) {
            $(".combo2").append("<option value = \"" + value + "\">" + value + "</option>");
        });
        $(".combo2").html()
    });
});
</script>

This will show a dropdown of countries list. Once a country is selected it will render a new dropdown of city list

score 1 · Answer 2 · edited Feb 12 '14 at 14:27

public JsonResult getCity(string country)
    {
        var temp = (from cntry in db.Table3.OrderBy(s => s.country)
                    where (string.Compare(cntry.country, country) == 0)
                    select cntry.city).ToList();
        return Json(temp, JsonRequestBehavior.AllowGet);
    }

View

<h1>
Countries</h1>
<select name="countries" class="combo">
<option value=""></option>

@{
    foreach (var t in (List<string>)ViewBag.countries)
    {
    <option value=@t>@t</option>
    }
}
 </select>
<h1>
State</h1>
<select name="city" class="combo2">
</select>
<div id="tese">
</div>
@*
The following jquery code finds the selected option from country dropdown 
and then sends an ajax call to the Home/getcity method 
and finally populate it to the city dropdown 
*@
<script type="text/javascript">
$('body').on('change', '.combo', function () {
    var selectedValue = $(this).val();
    alert(selectedValue);
    $.get("/Home/getcity", { country: selectedValue }, function (data) {
        $("#tese").html(data);
        $(".combo2").html("<option value = \"\"></option>")
        $.each(data, function (index, value) {
            $(".combo2").append("<option value = \"" + value + "\">" + value + "</option>");
        });
        $(".combo2").html()
    });
});
</script>

AJAX Cascading with MVC4

2 Answers2

Linked