AJAX與MVC4級聯

Question

我使用以下方法做Async回發使用AJAX。點擊submit可以正常工作。但我想知道，是否可以通過AJAX在控制器中調用各種ActionMethod。

我想實現類似級聯下拉菜單。如何通過AJAX調用不同的ActionMethod下拉值變化？

以下是在提交表單時只需撥打一個ActionMethod的代碼。

查看

@{ 
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" /> 
} 

控制器

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

Answer 1

回答你的第一個問題"is that possible to call various ActionMethods in a controller via AJAX"是一個很大的肯定。您可以通過Ajax從控制器調用任何操作方法，儘管生成的唯一結果取決於各種事情，例如發送視圖或部分視圖還是JSON結果。

你的下一個問題：

我將張貼一些代碼

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> 

這將顯示的國家列表下拉。一旦某個國家被選中它會使城市名單

Answer 2

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

查看

<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>