返回JSON列表并在MVC 4 View页面上使用

时间:2015-05-01 08:57:40

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

我使用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
}

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

2 个答案:

答案 0 :(得分:2)

在页面中添加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>');
                        });    
                }

            });

答案 1 :(得分:0)

我假设你要在列表中显示数据。 为此,你需要在你的html页面中使用一些id说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.
}