返回 JSON 列表并在 MVC 4 视图页面上使用答案

【问题标题】：Return JSON List and use on MVC 4 View Page返回 JSON 列表并在 MVC 4 视图页面上使用
【发布时间】：2015-07-11 02:53:41
【问题描述】：

我使用 JSON 返回一个列表，但不确定如何在 MVC 4 视图页面上使用返回的列表。这可能吗？

查看页面

var subjectId = value;
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/JobProfiles/FindJobProfiles/" + subjectId,
        data: "{}",
        dataType: "json",
        success: function (data)
        {

        }
    });

控制器

[HttpPost]
        public ActionResult FindJobProfiles(int? subjectId)
        {
            if (subjectId.HasValue)
            {
                Subject subject = subjectRepository.Get(subjectId.Value);
                IList<JobProfile> jobProfiles = jobProfileRepository.GetBySubject(subject.Id, false, false);
                var jobProfileList = from c in jobProfiles select new { Id = c.Id, Title = c.Title };
                return new JsonResult { Data = jobProfileList.ToList() };
            }
            else
            {
                return null;
            }
        }

查看页面显示

foreach (JobProfile job in jobProfiles)
{
    <a href="/JobProfiles/View/@job.Id" title="@job.Title">@job.Title
}

返回正确的数据，但不知道如何访问视图页面上的列表并显示数据。

【问题讨论】：

你想如何显示它（在表格中？在下拉列表中？）。显示要为集合中的每个项目生成的 html。为什么这个方法是 POST - 它似乎是 GET？
添加了上面的代码。如果可能，希望在 div 标签中显示。

标签： asp.net ajax json asp.net-mvc asp.net-mvc-4

【解决方案1】：

在页面中添加一个 div 以显示结果或要显示它的 html 元素：

<div id="results" />

添加一个循环并附加结果的成功处理程序：

var subjectId = value;
$.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "/JobProfiles/FindJobProfiles/" + subjectId,
            data: "{}",
            dataType: "json",
            success: function(data) {

                $.each(data, function(index, item) {
                        $('#results').append('<a href"/JobProfiles/View/' + item.Id +  '" title="' + item.Title +'">' + item.Title + '</a>');
                        });    
                }

            });

【讨论】：

可以添加到div标签吗？
@Ros 是的，只需添加一个 div 并使用 append 方法。
@Ros 已按要求更新，对于未测试的任何拼写错误表示抱歉。
@mattytommo 我个人责怪你，我希望你从来没有让我卷入这件事。这很容易上瘾。 :)

【解决方案2】：

我假设，您想在列表中显示数据。为此，您需要在您的 html 页面中有带有一些 id 的 div，比如 target-div。使用 jquery，您可以在 target-div 中显示列表，如下所示。

success: function (data){
   var markup='<ul>';
   for (var i = 0; i < data.length; i++)
   {
       markup+='<li>'+ data[i].itemName +'<li>';
       //itemName is key here.
   }
   markup+='</ul>';
   $('#target-div').html(markup);//this will place the list in div.
}

【讨论】：