Question

我在视图中有两个自定义单选按钮列表，我用循环填充：

<div class="mutliSelectCat">
    <ul>
        @foreach (var cat in Model.Categories)
        {
            <li>
                <label><input name="Category" type="radio" id=catid value=@cat.Name /> @cat.Name</label>
            </li>
        }
    </ul>
</div>

<div class="mutliSelectSub">
    <ul>
        @foreach (var subCat in ViewBag.subs)
        {
            <li>
                <label><input name="subCategory" type="radio" id=subcatid value=@subCat.Name /> @subCat.Name</label>
            </li>
        }
    </ul>
</div>

因此，当我在第一个列表中选择一个选项时，我想更新第二个列表：

$('.mutliSelectCat input').on('click', function () {
    var title = $(this).val();
    $.get("/Review/GetSubCategories", { catname: title }, function (data) {
    });


public ActionResult GetSubCategories(string catname)
{
    ViewBag.subs = //getting data from db and sorting it
    return Json(new { result = ViewBag.subs}, JsonRequestBehavior.AllowGet);
}

问题是：如何更新子类别列表？我可以以某种方式更新视图上的viewbag数据，或者我需要刷新“multiselectsub”div？

Answer 1

服务器端

使用局部视图。每次更改内容时都会提交数据，重新生成视图，并将其替换为您需要的内容。

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))

https://stackoverflow.com/a/5410121/706363

客户端

使用jquery通过过滤或对端点执行ajax调用来操作目标列表。您必须手动编写所有javascript和端点来处理

<强>结论

我会说坚持使用服务器端（使用Razor Helpers），因为它更容易使用，并为您完成所有繁重的工作。您不必编写任何JS，后端使用部分视图，并且执行速度与编写自己的javascript一样快，减去了维护JS逻辑的所有复杂性。

Answer 2

您应该在第二个列表中添加ID，如：

<ul id="subCat">

要将元素附加到subCat列表，您应该执行以下操作：

$("#subCat").append('<li>' + yourValue + '</li>');

Answer 3

购买@Carlos Martins的方式几乎是正确的。所以我就是这样解决的：

查看：这是唯一被更改的内容：<ul id="subCat">

JS：

 $('.mutliSelectCat input').on('click', function () {
        var title = $(this).val();
        $.get("/Review/GetSubCategories", { catname: title }, function (data) {
            $("#subCat").html(data.result);
        });

控制器部分：

string responce = "";
//subs is a list of subcategories, which was filled from db
foreach (var sub in subs)
{
     responce += String.Format("<li><label><input name=\"subCategory\" type=\"radio\" id=\"{0}\" value=\"{1}\" />{1}</label></li>", sub.SubCategoryId, sub.Name);
    }
return Json(new { result = responce}, JsonRequestBehavior.AllowGet);

感谢您的帮助！

在ViewBag中刷新数据

3 个答案: