为每条记录使用手风琴

Question

我正在将文件列表及其目录传递到我的 Razor 视图。我已经成功地将它们全部列出来以方便下载，但是现在我被要求以手风琴样式组织它们。

我正在尝试使用 JqueryUi 的手风琴，但是在使用 for each 填充链接时证明很难实现它。

这是我目前所拥有的：

@foreach (var fullPath in Model)
{
    var fileName = Path.GetFileName(fullPath);

    var parent = System.IO.Directory.GetParent(fullPath);
    string parentString = parent.ToString();

    var downloadPath = @Path.GetDirectoryName(fullPath) + "\" + @fileName;
    string yearOne = Server.MapPath("~/Pdfs/YearOne");
    string yearTwo = Server.MapPath("~/Pdfs/YearTwo");


    <div id="accordion">
        @*<h3>Year One</h3>*@
        @if (parentString == yearOne)
        {
            <div>
                <p>
                    <ul>
                        <li>@Html.ActionLink(fileName, "Download", new { path = downloadPath }) </li>
                    </ul>
                </p>
            </div>
        }

        @*<h3>Year Two</h3>*@
        @if (parentString == yearTwo)
        {
            <div>
                <p>
                    <ul>
                        <li>@Html.ActionLink(fileName, "Download", new { path = downloadPath }) </li>
                    </ul>
                </p>
            </div>
        }
    </div>
}

发生的事情是，它将第一条记录放在适当的手风琴部分，然后其余的就列在下面。谁能建议我如何在 for each 中实现此要求？

Answer 1

查找哪条路径适用于第一年和哪条路径适用于第二年的逻辑可以移至控制器中。对应的型号可以是：

public class AccordionModel
{
    public List<string> YearOne { get; set; }
    public List<string> YearTwo { get; set; }
}

视图可以更改为：

@model AccordionModel

@functions {
    string GetFileName(string path)
    {
        var fileName = Path.GetFileName(path);
        return fileName;
    }

    string GetDownloadPath(string path)
    {
        var fileName = Path.GetFileName(path);

        var parent = System.IO.Directory.GetParent(path);
        string parentString = parent.ToString();

        var downloadPath = Path.GetDirectoryName(path) + "\" + fileName;
        return downloadPath;
    }
}

<div id="accordion">
    @*<h3>Year One</h3>*@
        <div>
            <p>
                <ul>
                    @foreach(var path in Model.YearOne)
                    {
                        <li>@Html.ActionLink(GetFileName(path), "Download", new { path = GetDownloadPath(path) }) </li>
                    }
                </ul>
            </p>
        </div>

    @*<h3>Year Two</h3>*@
        <div>
            <p>
                <ul>
                    @foreach(var path in Model.YearTwo)
                    {
                        <li>@Html.ActionLink(GetFileName(path), "Download", new { path = GetDownloadPath(path) }) </li>
                    }
                </ul>
            </p>
        </div>
</div>

为每条记录使用手风琴

using an accordion for each record

asp.net-mvc

jquery-ui

accordion