Question

美好的一天，

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

target branch

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]);
                }

为了澄清，这是为获得结果而执行的代码

    [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
    }

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

   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;
    }

我对视图所做的唯一更改就是修改来自ajax的URL

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，我的程序正在点击mvc控制器，当我渲染数据时，我得到了这个在我看来这个

这是从视图中检查，我使用了console.log（data [i]）; 如您所见，它显示为：system generic list（projectname）dto.hskdto

发生了什么事？我怎么能避免这个问题？我只是想显示数据库数据。

Answer 1

您需要更改mvc控制器以返回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.Action("ConseguirCursosProfesor", "ProfesorCurso")',

由于您可能不希望用户通过地址栏导航到该方法，因此您可以考虑按照this answer中的说明添加[AjaxOnly]属性。

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

<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);
        })
    }
})

mvc视图，ajax没有显示正确的数据

1 个答案: