3

MVC構造を使用しています。ドロップダウンでフィルタリングできるレポートを作成する必要があります。部分ビューを使用してレポートを表示するものです。HEreは私が達成したいページの構造です。ページの上部には、いくつかのドロップダウン リストがあります。これらの下に、レポートのページが表示されます。

ユーザーがドロップダウン リストからオプションを変更すると、レポートがフィルター処理されます。

2 つの質問があります。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();
}

どんな種類の助けも大歓迎です。

4

1 に答える 1

6

この機能を実現するには、jQuery を使用する必要があります

最初にデータコンテナに識別子を適用します

<div id="reportContent">
        @Html.Partial("PartialView")
</div>

そして、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 は、コントローラー アクションに移動せずにビューを直接読み込みます。渡されるデータがある場合、またはページに静的コンテンツをロードしたい場合に使用する必要があります

于 2013-05-07T10:15:27.837 に答える