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