刷新 ViewBag 中的数据答案

【问题标题】：Refreshing data in ViewBag刷新 ViewBag 中的数据
【发布时间】：2018-02-14 09:36:44
【问题描述】：

我有 2 个自定义单选按钮列表，我用循环填充：

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

【问题讨论】：

标签： jquery html json asp.net-mvc

【解决方案1】：

服务器端

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

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

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

客户端

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

结论

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

【讨论】：

【解决方案2】：

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

<ul id="subCat">

要将元素附加到 subCat 列表中，您应该这样做：

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

【讨论】：

嗯。我明白了。不确定这是否是我的错，但我尝试在控制器中制作代码字符串并将其作为带有所有标签的预制字符串返回给 js 函数。他们我只是这样做： $("#subCat").Append(data); ..这不起作用:(
如果记录了一些内容，请尝试检查您的数据值

【解决方案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);

感谢您的帮助！

【讨论】：