如何根据用户单击的列表项呈现部分视图?

时间:2013-06-10 11:55:47

标签: asp.net asp.net-mvc razor

我有一个HomePageViewModel,它采用各种模型并在主页上显示摘要视图。

我想根据下拉列表的结果过滤Announcements模型,我将其呈现为无序列表。这是我第一次使用部分视图或类似的东西,并在一些阅读后决定这样做一个HTML.Action调用,它从Announcement Controller调用DisplayAnnouncements。

但是,我不确定如何将列表中单击的参数(下例中的“#”)的参数传递给我的HTML.Action方法。

这是主页视图:

<ul class="dropdown-menu">
    <li><a href="#">All</a></li>
    <li><a href="#">Legal</a></li>
    <li><a href="#">Accounting</a></li>
</ul>
@Html.Action("DisplayAnnouncments", "Announcement", new { filter = "All" })

这是我的公告控制员:

    public ActionResult DisplayAnnouncments(string filter)
    {

        return PartialView("_Announcements", 
            (from a in db.Announcements
             where a.Type == filter
             select a).Take(4));
    }

我的_Annoucments局部视图:

<table class="table" style="table-layout: fixed">

@foreach (var item in Model)
{
    <tr>
        <td style="vertical-align: top; width: 70px">
            @item.AnnouncmentDate.ToShortDateString()
        </td>
        <td>
            <strong>@item.Title</strong><br />
            @item.Announcment
        </td>
    </tr>
}

重申一下,我有几个问题:

  1. 如何获取用户点击的列表项以填充HTML.Action中的相应过滤器?
  2. HTML.Action是最好的吗?我应该使用其他东西吗?
  3. 如何仅刷新局部视图以使整个页面不刷新?
  4. 感谢您的帮助,我对此很陌生!

    罗比

1 个答案:

答案 0 :(得分:0)

最简单的方法是使用一些javascript来复制部分视图隐藏字段中的下拉选定值,然后模拟部分视图(隐藏)提交按钮之一的点击。

局部视图:

<table class="table" style="table-layout: fixed">

<input type="hidden" id="MyHiddenInput" name="selectedValue" />
@foreach (var item in Model)
{
    <tr>
        <td style="vertical-align: top; width: 70px">
            @item.AnnouncmentDate.ToShortDateString()
        </td>
        <td>
            <strong>@item.Title</strong><br />
            @item.Announcment
        </td>
    </tr>
}
<div style="display: none;"><input type="submit" id="myHiddenButton" /></div>

家长观点:

<ul class="dropdown-menu">
    <li><a href="#" data-hval="all">All</a></li>
    <li><a href="#" data-hval="legal">Legal</a></li>
    <li><a href="#" data-hval="accounting">Accounting</a></li>
</ul>

和一些jQuery:

$("dropdown-menu > LI > A").live("click", function() {
    $("#MyHiddenInput").val($(this).data("hval"));
    $("#myHiddenButton").click();
});