如何使用ajax将列表传递给视图？答案

【问题标题】：How to pass a list to the view with ajax?如何使用ajax将列表传递给视图？
【发布时间】：2017-03-19 20:14:27
【问题描述】：

它没有显示任何东西。我想用 id 和 name 显示列表中的每个对象。

是否可以使用视图模型并通过 ajax 控制器将其传递给视图。所以在控制器中我返回一个包含我的对象列表的视图模型的视图。一个想用ajax的。我做错了什么？

我的模特

public class Clematis
{
    public int Id { get;}
    public string Name { get; }
    public int ZoneId { get; }
}

控制器

    public List<Clematis> GetClematis()
    {
        ClematisSelectionViewModel model = ClematisSelectionViewModel.Load(page);
        List<Clematis> clematisList = model.ClematisList;
        return clematisList;

    }

观点

<script type="text/javascript">
{
        $.ajax({
        type: "GET",
        url: '/Clematis/GetClematis',
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        beforeSend: function() {
            $("#div_Loader").show();
        },
        success: function (response) {
            $.each(response,
                function(i, val) {
                    $("#output").append(val.Id);
                });
        },
        complete: function() {
            $("#div_Loader").hide();
        }
    });
</script>
<div id="div_Loader" style="padding-left: 400px; top: 500px">
<img src="~/images/Loading.png" width="100px" height="100px" alt="loader" />
</div>
<div id="output">
</div>

【问题讨论】：

这看起来基本正确。我通常不输入 data type:"Json" 部分。这可能是返回未评估的 Json 字符串而不是 Json 表示的对象。尝试做一个 console.log(JSON.stringify(result));看看你得到了什么。
您指定 dataType: "json",，因此您的方法需要返回 json（例如，在 asp.net-mvc 中它将是 public ActionResult GetClematis() { .... return Json(clematisList, JsonRequestBehavior.AllowGet); }（并且您可以删除毫无意义的 contentType: "application/json; charset=utf-8", - 您制作 GET）

标签： javascript jquery ajax c#-4.0 model-view-controller

【解决方案1】：

找到了使用局部视图和 javascript 的解决方案。

$(document).ready(function () {
    $("#colorList").change(function () {
        var colorId = $("#colorList").val();
        $("#colorid").load('@(Url.Action("SetColor", "Flowers", null, "https"))?Id=' + colorId);//Request.Url.Scheme
    });
});

【讨论】：