asp.net mvc 通过 javascript 读取 ViewBag 通用列表

Question

我正在使用 asp.net mvc4，我如何从 ViewBag 读取数据，我的 ViewBag 是一个通用列表，我想从 javascript 访问数据（viewbag）。

我正在将一个通用列表从控制器传递到视图，这个列表可以帮助我在这里加载一个下拉列表。 除了加载下拉列表之外，我还需要访问一些通用列表数据，以便当下拉列表的值使用列表中的数据更新文本框时

Answer 1

从技术上讲，您的 ViewBag 是一个可以包含通用列表的字典。它仅在您的页面最初呈现时可用。因此，您不能直接从 JavaScript 访问它。但是您可以做的是从 ViewBag 中获取列表，在 Razor 中将其序列化为 JSON，然后在 JavaScript 中对其进行反序列化。

public ActionResult Index(){
    //make this whatever list you want
    ViewBag.MyList = new ArrayList();
}

这会将 ViewBag 字典中的键设置为您选择的列表。现在，我们需要序列化它，以便我们可以在 JavaScript 中访问它。

var jsonList = '@Html.Raw(Json.Convert(ViewBag.MyList))'
var jsList = JSON.parse(jsonList);

仅获取一个列表需要做很多工作，更不用说在 View 中为 Newtonsoft.Json 或您使用的任何序列化程序创建依赖关系，而且如果内存服务，它不是很有效。为什么不请求从 API 控制器获取您需要的数据，该控制器将为您处理序列化，从而加快初始页面加载速度？

编辑： 我想你要找的是this。您不需要使用 JavaScript 来实现您的要求。利用 MVC 的力量。

Answer 2

将数据从 ASP.NET 代码来回传递到 JS 层的最简单方法之一是序列化对象，然后将序列化作为 JS 对象呈现到视图中。这是一个例子：

// helper extension method
public static string ToJSON(this object o)
{
    var oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    return oSerializer.Serialize(o);
}

在您的控制器内部：

Viewbag.Foo = myObj.ToJSON();

然后，在您的视图中，您只需将序列化的 obj 吐出为文字 JavaScript：

var json = @Html.Raw(Viewbag.Foo); // mix of Razor and JS here! 

当你运行它时，如果你查看源代码，你会在视图的那个部分看到类似这样的东西：

var json = {"prop1":true, "arrayItems":[{ "prop1": "dog" }, { "prop": "car" }]}

Answer 3

免责声明

这是一个非常直接、简单且不优雅的解决方案。但是，它有效 =)

考虑这个类：

public class Something
{
    public int Id { get; set; }
    public string PropA { get; set; }
    public string PropB { get; set; }
}

你的操作上的这段代码：

List<Something> list = new List<Something>() { 
  new Something(){ Id = 1, PropA = "1-A", PropB = "1-B "}
  , new Something(){ Id = 2, PropA = "2-A", PropB = "2-B "}
};

ViewBag.Things = list;

最后是视图：

<select id="theSelect">
    @foreach (Something item in ViewBag.Things)
    { 
        <option value="@item.Id">@item.PropA</option>
    }
</select>
<input type="text" id="selectedPropB" readonly />
<div style="display: none;">
    @foreach (Something item in ViewBag.Things)
    { 
        <span id="propb-@item.Id">@item.PropB</span>
    }
</div>
<script type="text/javascript">
    $(function () {
        $('#theSelect').on('change', function () {
            var id = $(this).val();

            $('#selectedPropB').val($('#propb-'+id).html());
        });
    });
</script>

注意事项：

• 我宁愿使用 viewmodel 而不是 ViewBag，因为原因。无论如何，这取决于你
• 我相信如果您使用淘汰赛等，您会找到更好的解决方案。无论如何，正如我所说，这行得通

Answer 4

<script type="text/javascript">
     var jsList= @Html.Raw(Json.Encode(@ViewBag.GenericList));
</script>