mvc ajax刷新div方法控制器json

Question

我在控制器中有一个方法，它返回一个带有 Json 的 ViewBag。

 public JsonResult FilterCheck(int id, int[] mycheck, string idprot)
    {
    ViewBag.Utenti = this.GetDbContext().utente.Include(s => s.cod_servizio_utente).Where(x => x.cod_servizio_utente.Select(l => l.id).Contains(5)).ToList();

return Json(ViewBag.Utenti, JsonRequestBehavior.AllowGet);

    }

在视图中我有这个脚本函数 ajax，如果这个函数“成功”，我会刷新一个 div，其中包含 viebag.Utenti 上的 foreach：

 $.ajax({ 
                type: "POST",
                url: "@Url.Action("FilterCheck","Operatore")",
                datatype: "json",
                traditional: true,
                data: { 'mycheck': mycheck, 'idprot': idprot, 'id': '@Model.id' },
                success: function(data) {
                    var html = $(data).filter('#external-events').html();
                    $('#external-events').html(data);
                }
            });

<div id='external-events'>

              @foreach (HAnnoZero.Repositories.utente item in ViewBag.Utenti)
        {
            <div class='col-lg-3'><div class='external-event'>@item.id- @item.cognome @item.nome</div></div>    
        }    </div>

但不工作。如何刷新foreach里面的div id“外部事件”？谁能帮帮我？

Answer 1

首先你不需要将集合分配给 ViewBag

public ActionResult FilterCheck(int id, int[] mycheck, string idprot)
{
  var data = this.GetDbContext().utente.Include(......
  // Build anonymous object collection to avoid circular reference errors
  var response = data.Select(d => new
  {
    id = d.id,
    cognome = d.cognome
    // other properties as required
  });
  return Json(response);
}

其次，您返回的是 JSON，而不是 html，因此在您的成功函数中，您需要遍历属性并构建您的 html（不确定您的属性是什么，因此根据需要进行调整）

success: function(data) {
  $('#external-events').empty(); // clear existing items
  $.each(data, function(index, item) {
    var div = $('<div><div>'); // Create new element
    div.text(item.id + ' ' + item.cognome); // Set inner text
    $('#external-events').append(div); // add the new element
  });
}

另一种方法是让 action 方法返回一个包含 html 的局部视图，然后使用

success: function(data) {
  $('#external-events').html(data);
}