2013-05-07 224 views
3

我正在使用MVC結構。我必須創建一個可以通過下拉式過濾的報告。我是使用局部視圖來顯示報告的東西。 HEre是我想要實現的頁面的結構。 在頁面頂部,會有一些下拉列表。 下面這些將是報告的頁面。在MVC中渲染部分視圖

當用戶從下拉列表中更改選項時,報表將被過濾。

我有兩個問題 1.如何渲染局部頁面。 2.如何通過ajax/jquery刷新部分頁面。我想在客戶端做到這一點。

我已經在網上查了,我的渲染頁面,如在下面的代碼 VIEW

<h3>Report</h3> 
<div> 
    <table> 
     <tr> 
      <td>ServiceLine</td> 
      <td>@Html.DropDownList("ServiceLine", null, new {id="ServiceLine"}) </td> 
     </tr> 
    </table> 
</div> 
<div> 
    <h2>List</h2> 
    <div> 
     @Html.Partial("PartialView") 
    </div> 
</div> 

這是我有在控制器

public ActionResult PortfolioReport(char serviceLine) 
{ 
    //Department List 

    var serviceLines = Enum.GetValues(typeof(SogetiDepartments)).Cast<SogetiDepartments>().Select(v => new SelectListItem 
    { 
     Text = v.ToString(), 
     Value = ((char)v).ToString(), 
    }); 

    foreach (SelectListItem item in serviceLines) 
    { 
     if (Convert.ToChar(item.Value) == serviceLine) 
      item.Selected = true; 
    } 


    ViewBag.ServiceLine = serviceLines; 

    return View(); 
} 

任何形式的幫助表示讚賞。

回答

6

你必須使用jQuery來實現該功能

首先應用一些識別到你的數據容器

,然後使用jQuery

<script type="text/javascript"> 
$(function(){ 
    $("#ServiceLine").change(function{ 
    // get data from server using ajax 
    var url = 'YourPartialPageURL?'+serviceLine+="="+$(this).val(); 
    $('#reportContent').load(url); 
    }); 

}); 
</script> 

您的下拉更改事件編寫腳本注意:你應該使用return PartialView();從您的控制器操作 而不要使用@ Html.Partial並使用@ Html.Action來代替。 @ Html.Partial加載直接查看而不用去控制器操作。 它應該使用,如果你有數據要傳遞給你,或者你只是想加載頁面上的一些靜態內容

+0

嗨KD 到目前爲止它工作正常。 我現在還有一個問題。這是刷新。當我將參數作爲查詢字符串傳遞時,它可以發送給Controller嗎?因爲數據來自控制器,所以請撥打 。在局部視圖中,我只是渲染頁面。 – Developer 2013-05-07 11:15:04

+0

如果你在頁面加載時有數據爲什麼你傳遞一個查詢字符串呢?如果你有數據,然後通過Html.Partial()傳遞給你的視圖。如果你想在服務器上調用Controller Action,應該使用Html.Action – 2013-05-07 11:41:40

+0

感謝您的幫助K D.代碼工作正常現在。我將在稍後提供解決方案。你的想法奏效了。 [THUMBS UP] – Developer 2013-05-07 12:00:30