ASP.NET MVC 如何在View廻圈裡生成Collapse內容？

collapse asp.net mvc

leo226 2019-09-17 16:40:27 ‧ 1425 瀏覽

分享至

請教各位先進，我想做Bootstrap 折疊（Collapse）插件的效果，參考如下：
Collapse
從資料庫撈出了List N 筆資料，在View中跑了foreach

@foreach (var item in Model.PaperEditorDataList)
{
    int count = 0;
    <button type="button" class="btn btn-primary" data-toggle="collapse"
            data-target="#demo">
        折疊按鈕1
    </button>

    <div id="demo" class="collapse">
    內容1
    </div>
    count++;
}

請問我該如何動態的產生出不同的data-target="#demo"呢？
預期產生出的HTML如下：

<button type="button" class="btn btn-primary" data-toggle="collapse"
        data-target="#demo1">
    折疊按鈕1
</button>
<div id="demo1" class="collapse">
內容1
</div>

<button type="button" class="btn btn-primary" data-toggle="collapse"
        data-target="#demo2">
    折疊按鈕2
</button>
<div id="demo2" class="collapse">
內容2
</div>

<button type="button" class="btn btn-primary" data-toggle="collapse"
        data-target="#demo3">
    折疊按鈕3
</button>
<div id="demo3" class="collapse">
內容2
</div>

看更多先前的討論...收起先前的討論...

fillano iT邦超人 1 級 ‧ 2019-09-17 17:16:48 檢舉

...那你怎麼取得item裡面的東西？只是改用count，方法是一樣的。

leo226 iT邦新手 4 級 ‧ 2019-09-17 17:47:46 檢舉

因為我不知道該如何把count加入到<div id="demo" class="collapse">裡？
例如何動態的把它變成<div id="demo1" class="collapse">

fillano iT邦超人 1 級 ‧ 2019-09-18 09:21:05 檢舉

https://docs.microsoft.com/zh-tw/aspnet/web-pages/overview/getting-started/introducing-razor-syntax-c

這實在太基本了，請你多少先看一下參考資料。

leo226 iT邦新手 4 級 ‧ 2019-09-18 09:35:40 檢舉

感謝大師解惑，我知道該如何加字串進去，但不知道該如何加入到HTML TAG的屬性裡，所以上來請教，感謝指教～

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

YoChen

iT邦研究生 1 級 ‧ 2019-09-17 19:34:36

最佳解答

用 @() 將變數插入

@{
    int count = 0;

    foreach (var item in Model.PaperEditorDataList)
    {
        <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo@(count)">
            // ...
        </button>

        <div id="demo@(count)" class="collapse">
            // ...
        </div>

        count++;
    }
}

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

YoChen iT邦研究生 1 級 ‧ 2019-09-17 19:45:40 檢舉

不過你的情況用For是不是更簡潔一點~XDD

@for (int i = 0; i < Model.PaperEditorDataList.Count - 1; i++)
{
    <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo@(i)">
        // ...
    </button>

    <div id="demo@(i)" class="collapse">
        // ...
    </div>
}