Question

我有一个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>
}

重申一下，我有几个问题：

如何获取用户点击的列表项以填充HTML.Action中的相应过滤器？
HTML.Action是最好的吗？我应该使用其他东西吗？
如何仅刷新局部视图以使整个页面不刷新？

感谢您的帮助，我对此很陌生！

罗比

Answer 1

最简单的方法是使用一些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();
});

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

1 个答案: