mvc ajax刷新div方法控制器json

时间:2014-09-11 10:20:42

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

我在控制器中有一个方法,它返回带有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上的foreach.Utenti:

 $.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>

但是不行。如何才能刷新内部事件和外部事件&#34;?谁可以帮助我?

1 个答案:

答案 0 :(得分: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);
}