ajax 的 mvc 视图未显示正确的数据

Question

美好的一天，

我正在重构遗留项目中的代码。我之前的视图是从 api 控制器渲染数据：

   ///just a portion of code, the important thing here is that I am using
//a foreach to add new data to the view.
 $.ajax({
            url: "/Api/ProfesorCurso/ConseguirCursosProfesor",
            type: "Get",
            success: function (data) {
                for (var i = 0; i < data.length - 1; i++) {
                    $('<div class="col-lg-4 col-md-6 col-sm-12"><div class="thumbnail">' +
            '<a href="/ProfesorCurso/Editar/' + data[i].Id + '" class="btn btn-primary btn-sm">Editar</a><h3 class="centrar">' + data[i].Titulo + '</h3><a href="ProfesorModulo/index?CursoId=' + data[i].Id + '">' +
            '<img src="' + data[i].ImagenUrl + '"/></a><p>' + data[i].Descripcion + '</p></div>'
                    ).appendTo("#cursosdisponibles");
                    console.log(data[i]);
                }

Api 控制器正在执行此操作

    [HttpGet]

    public IHttpActionResult GetCursoProfesor(string ProfesorId = null)
    {
        ProfesorId = User.Identity.GetUserId();
        var result = _profesorCursoClass.GetCursoProfessor(ProfesorId);
        if (result == null) return BadRequest();
        return Ok(result); //IENumerable of myDto
    }

为清楚起见，这是为获取结果而执行的代码

   public IEnumerable<HskDto> GetHskProfessor(string ProfesorId)
    {
        if (string.IsNullOrEmpty(ProfesorId)) return null;
        var CursoProfesor = _dbContext.NivelHsk.Include(c => c.User).Where(c => c.UserId == ProfesorId);
        if (CursoProfesor == null) return null;
        var HskDto = CursoProfesor.ToList().Select(Mapper.Map<NivelHsk, HskDto>).ToList();
        if (!HskDto.Any()) return null;
        return HskDto;
    }

现在我所做的重构是避免使用 api，并开始使用 mvc 控制器

private ProfesorHsk _profesorHsk;
    public ProfesorCursoController()
    {
        _profesorHsk = new ProfesorHsk();
    }
//more code....
//...
   [HttpGet]
    public IEnumerable<HskDto> ConseguirCursosProfesor(string ProfesorId = null)
    {
        ProfesorId = User.Identity.GetUserId();
        var result = _profesorHsk.GetHskProfessor(ProfesorId);          
        return result;
    }

我对视图所做的唯一更改只是将 url 从 ajax

修改为

url: "/ProfesorCurso/ConseguirCursosProfesor",

有了这个 url，我的程序正在使用 mvc 控制器，当我渲染数据时我得到了这个在我看来

这是从视图上检查的，我用的是console.log(data[i]); 如您所见，它显示为：system generic list (projectname) dto.hskdto

这是怎么回事？我怎样才能避免这个问题？我只想显示数据库数据。

Answer 1

您需要将 mvc 控制器更改为 return a JsonResult

[HttpGet]
public JsonResult ConseguirCursosProfesor(string ProfesorId = null)
{
    ProfesorId = User.Identity.GetUserId();
    var result = _profesorHsk.GetHskProfessor(ProfesorId);          
    return Json(result, JsonRequestBehavior.AllowGet);
}

Json() 方法将您的数据序列化为 json。另请注意，您需要 JsonRequestBehavior.AllowGet 参数，因为您正在进行 GET。

还建议您使用@Url.Action()生成url

url: '@Url.Action("ConseguirCursosProfesor", "ProfesorCurso")',

由于您可能不希望用户通过地址栏导航到该方法，您可以考虑添加 [AjaxOnly] 属性，如 this answer.

中所述

此外，您构建 html 的代码很脆弱，难以阅读和调试 - 并且您显示的内容无效，因为您缺少结束 </div> 标记。考虑使用创建一个可以被克隆、添加到 DOM 和更新的 'template'。模板将是

<div id="template" style="display:none;">
    <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="thumbnail">
            <a href="" class="btn btn-primary btn-sm editar">Editar</a>
            <h3 class="centrar"></h3>
            <a class="index" href="">
                <img class="image" src="" /> //data[i].ImagenUrl
            </a>
            <p class="description">data[i].Descripcion</p>
        </div>
    </div> // you are missing this in your code
</div>

脚本将是

var parent = $('#cursosdisponibles');
var editarUrl = '@Url.Action("Editar", "ProfesorCurso");
var indexUrl = '@Url.Action("Index", "ProfesorCurso");
$.ajax({
    ....
    success: function (data) {
        $.each(data, function(index, item) {
            var html = $('#template').html();
            var clone = $(html).appendTo(parent);
            clone.find('.editar').attr('href', editarUrl + '/' + item.Id);
            clone.find('.centrar').text(item.Titulo);
            clone.find('.index').attr('href', indexUrl + '?CursoId' + item.Id);
            clone.find('.image').attr('src', item.ImagenUrl);
            clone.find('.description').text(item.Descripcion);
        })
    }
})

ajax 的 mvc 视图未显示正确的数据

mvc view with ajax not showing correct data

asp.net-mvc

asp.net-ajax

entity-framework-6