iT邦幫忙

0

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

請教各位先進,我想做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邦新手 5 級 ‧ 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邦新手 5 級 ‧ 2019-09-18 09:35:40 檢舉
感謝大師解惑,我知道該如何加字串進去,但不知道該如何加入到HTML TAG的屬性裡,所以上來請教,感謝指教~

1 個回答

3
YoChen
iT邦新手 1 級 ‧ 2019-09-17 19:34:36
最佳解答

用 @() 將變數插入

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

    <div id="demo@(count)" class="collapse">
        // ...
    </div>
    
    count++;
}
看更多先前的回應...收起先前的回應...
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>
}
leo226 iT邦新手 5 級 ‧ 2019-09-18 09:33:53 檢舉

感謝,原來是這樣的寫法,己成功~
用for確實更簡潔一點,其實有點搞不懂for跟foreach的實用情境,兩個得出的結果都一樣,所以不知道什麼情況下用for,什麼情況下用foreach,感謝YoChen大師解惑~

YoChen iT邦新手 1 級 ‧ 2019-09-18 10:32:51 檢舉

您可以判斷

這個collection會不會用到index?

會的話用for,不會的話用foreach

要不要修改collection內的值?

要的話只能用for

是不是要追求極致效能?

是的話用for,不是的話用foreach

您可能會想問,既然foreach這麼差,為什麼還要用呢~XDD
因為foreach有個很重要的地方,就是他具備非常好的可讀性,這可以讓後續維護省去很多不必要的時間。

leo226 iT邦新手 5 級 ‧ 2019-09-18 18:58:56 檢舉

了解,多上了一課,感謝指教~

我要發表回答

立即登入回答