Вернуть тег частичного просмотра модели, используя ajax / json

Question

Мне нужна помощь с отображением правильно отфильтрованных данных из базы данных. Если пользователь нажимает кнопку, появляется экран с частичным просмотром. Каждое частичное представление - это модель с собственными данными. Я использую ajax, чтобы сделать его более динамичным.

Контроллер:

    [HttpPost]
    public JsonResult Test2(int id)
    {
        List<Location> p = _context.Locations.Where(x => x.CategoryId.Equals(id)).ToList();
        return Json(p);
    }

Частичное представление:

<div class="sidebar_container" id="style-3">
    <div class="sidebar_list" id="locatieLijstAfter">

    </div>
</div>

Скрипт:

function yoo(id) {
    $.ajax({
        type: 'POST',
        url: '/Home/Test2',
        data: { 'id': id },
        success: function(result){
            var p = "";
            for (var i = 0; i < result.length; i++) {
                $('#locatieLijstAfter').html('< partial name="../Shared/_LocationItemPartial.cshtml" ' + 'model = "' + result[i] + '" /> ');
            }

        }

это то, что у меня сейчас, но это происходит когда я бегу введите описание изображения здесь

Answer 1

Тег <partial> - это конструкция Razor, которая обрабатывается на стороне сервера. Это не что-то, что JS или просто HTML поймет.

Чтобы логика c работала так, как вам требуется, вам нужно изменить действие, чтобы оно возвращало HTML из частичного просмотр вместо JSON.

Шаблон будет выглядеть примерно так, хотя, очевидно, я упрощаю его из-за отсутствия подробной детализации c на ваших моделях или ожидаемого HTML вывода.

[HttpPost]
public IActionResult Test2(int id)
{
    List<Location> p = _context.Locations.Where(x => x.CategoryId.Equals(id)).ToList();
    return View("PartialViewName", p);
}

@model List<Location>

@foreach(var item in Model) 
{
  <div class="sidebar_container">
    <div class="sidebar_list">@item.Foobar</div>
  </div>
}

function yoo(id) {
  $.ajax({
    type: 'POST',
    url: '/Home/Test2',
    data: { 'id': id },
    success: function(result) {
      $('#container').html(result);
    }
  });
}