使用Ajax将数据从控制器传递到视图以筛选结果

Question

我试图根据下拉选定值筛选我的结果。所有过滤和一切工作，我只是努力让我的看法更新与结果。我要离开了一些支架和其他不相关的代码下面是我：

public ViewResult Index() 
{  
    -- this effectively returns all Invoices no matter what date -- 
    var data = new UserBAL().GetInvoice(date); 
    return View(data);     
} 

我jQuery和Ajax是：

$(document).ready(function() { 
    $("[name='DDLItems']").change(function() { 
     var selection = $("[name='DDLItems']").val(); 
     var dataToSend = { 
      //variable to hold selection? 
      idDate: selection 
     }; 

     $.ajax({ 
      type: "POST", 
      url: "Invoice/FilterInvoice", 
      data: dataToSend, 
      success: function (data) { 
       $("#Index").html(data);      
      } 

[HttpPost]      // Selected DDL value 
public ActionResult FilterInvoice(int idDate) 
{  
    switch (idDate) 
    { 
     case 0: 
      date = DateTime.Parse("01-01-1754"); 
      break; 

     case 3: 
      date = DateTime.Now.AddMonths(-12); 
      break; 
    } 
    //var data is returning my expected results 
    var data = new UserBAL().GetInvoice(date); 

    // I know this isn't right and needs to be changed 
    return View(data); 

我阿贾克斯成功函数没有做任何事情无论是所以我猜这需要一些调整。以下是我如何使用表格标签显示表格。请记住我留下了一些代码了，但一切都重要的是在这里，唯一的问题是不用翻译我的过滤结果返回给视图，

@foreach (var item in Model) { 
    <tr><td> 
    @Html.DisplayFor(modelItem => item.Invoice_Number)   
    @Html.DisplayFor(modelItem => item.Amt_Total) 
</td> 

Answer 1

如果有其他人遇到此问题，以下是答案。这就是我最终做的事情，行传递给我传递给函数的URL的日期参数。让Ajax调用内部的Grid填充也看起来像是一个问题，所以我必须把它拿出来。

public JsonResult JqGrid(int idDate) 
    { 
     switch (idDate) 

     #region switch date 
      --Switch Statement-- 
     #endregion 
     var invoices = new UserBAL().GetInvoice(date); 

     return Json(invoices, JsonRequestBehavior.AllowGet); 
    } 

    [HttpPost] // pretty much does nothing, used as a middle man for ajax call 
    public JsonResult JqGridz(int idDate) 
    { 
     switch (idDate) 
     #region switch date 

      --Switch Statement-- 
     #endregion 

     var invoices = new UserBAL().GetInvoice(date); 

     return Json(invoices, JsonRequestBehavior.AllowGet); 
    } 

是的这两个函数看起来很冗余，它们是。我不知道为什么我的帖子不会更新数据，但我每次都需要重新加载网格，当我这样做时，它会调用第一个函数。所以，后jqGridz有点儿只是一个中间人。

下面是我用

var dropdown 
var Url = '/Invoice/JqGrid/?idDate=0' 
     $(document).ready(function() { 

$("#jqgrid").jqGrid({ 
    url: Url, 
    datatype: 'json', 
    mtype: 'GET', //insert data from the data object we created above 
    width: 500, 
    colNames: ['ID','Invoice #', 'Total Amount', 'Amount Due', 'Amount Paid', 'Due Date'], //define column names 
    colModel: [ 
    { name: 'InvoiceID', index: 'Invoice_Number', key: true, hidden: true, width: 50, align: 'left' }, 
    { name: 'Invoice_Number', index: 'Invoice_Number', width: 50, align: 'left'}, 
    { name: 'Amt_Total', index: 'Amt_Total', width: 50, align: 'left' }, 
    { name: 'Amt_Due', index: 'Amt_Due', width: 50, align: 'left' }, 
    { name: 'Amt_Paid', index: 'Amt_Paid', width: 50, align: 'left' }, 
    { name: 'Due_Date', index: 'Due_Date', formatter: "date", formatoptions: { "srcformat": "Y-m-d", newformat: "m/d/Y" }, width: 50, align: 'left' }, 

    ],      
    pager: jQuery('#pager'), 
    sortname: 'Invoice_Number', 
    viewrecords: false, 
    editable: true, 
    sortorder: "asc", 
    caption: "Invoices",  
}); 
$("[name='DDLItems']").change(function() { 
    var selection = $(this).val(); 
    dropdown = { 
     //holds selected value 
     idDate: selection 
    }; 

    $.ajax({ 

     type: "POST", 
     url: "Invoice/JqGridz", 
     data: dropdown, 
     async: false, 
     cache: false, 
     success: function (data) {   
      $("#jqgrid").setGridParam({ url: Url + selection})    
      $("#jqgrid").trigger('reloadGrid'); 
     } 
    })  

    }) 
}); 

Answer 2

通过查看你可以返回局部视图为字符串，然后在阿贾克斯使用jQuery的成功，你可以更新的结果：

控制器逻辑：

[HttpPost] 
public JsonResult FilterInvoice(int idDate) 
{  
..... 
return Json((RenderRazorViewToString("YourViewName", data)), JsonRequestBehavior.AllowGet); 
} 


    [NonAction] 
    public string RenderRazorViewToString(string viewName, object model) 
    { 
     ViewData.Model = model; 
     using (var sw = new StringWriter()) 
     { 
      var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName); 
      var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw); 
      viewResult.View.Render(viewContext, sw); 
      viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View); 
      return sw.GetStringBuilder().ToString(); 
     } 
    } 

Ajax调用：

$.ajax({ 
    //........ 
    success: function (result) { 
     $("#Index").replaceWith(result); 
    } 
});