1

Asyncを使用してポストバックを実行するには、以下の方法を使用しAJAXました。これは、をクリックすると正常に機能しsubmitます。しかし、私が知りたいActionMethodのは、を介してコントローラー内のさまざまなsを呼び出すことが可能かどうかAJAXです。

カスケードドロップダウンのようなものを実装したいと思います。ドロップダウン値の変更ActionMethodを介して別の呼び出しを行う方法は？AJAX

ActionMethodこれは、フォームの送信時に1つだけを呼び出すコードです。

意見

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

2 に答える 2

2

最初の質問への答え"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>

これにより、国リストのドロップダウンが表示されます。国が選択されると、都市リストの新しいドロップダウンがレンダリングされます

于 2013-02-26T05:08:58.090 に答える
1 
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>
于 2014-02-12T14:01:51.723 に答える