如何依照欄位style的值長出不一樣的樣式

asp.net c# asp.net mvc @html.raw

anniecat 2019-09-03 14:55:03 ‧ 974 瀏覽

分享至

目前在寫MVC的View，假設我有一個陣列，依照欄位style的值，長出不一樣的樣式，目前整理出以下不同:

row.Style="subTitle1" -->
style='width:15%;border-right:none;'

row.Style="subTitle2" -->
style='width:15%;border-right:none;font-weight:bold;'

row.Style="title" -->
style='width:15%;border-right:none;font-weight:bold;background:#E5E5E5;'

以下為基本樣式:

<div class='div_table'>
    <div class='div_tr'>
        <div class='div_td' style='width:15%;border-right:none;'>
            @(row.Item1)
        </div>
        <div class='div_td' style='width:70%;'>
            @(row.Item2)
        </div>
        <div class='div_td' style='width:15%;border-left:none;'>
            @(row.Item3)
        </div>
    </div>
</div>

嘗試以下撰寫:

<div class='div_td' @Html.Raw(row.Style=="title"? "style='width:15%;border-right:none;font-weight:bold;background:#E5E5E5;'":
row.Style=="subTitle1"? "style='width:15%;border-right:none;'":
"style='width:15%;border-right:none;font-weight:bold;'")>

請問有更好的寫法嗎?

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

player iT邦大師 1 級 ‧ 2019-09-03 15:03:38 檢舉

就CSS應用吧? 改class就好了, 幹嘛改style
你是不是誤會了什麼? class明明可以串接多個啊, 一般應用就夠了

anniecat iT邦新手 3 級 ‧ 2019-09-03 15:23:42 檢舉

Hi player，因為我的Style是動態的，所以目前嘗試這樣做，或許您說的這個方式是比較好的做法，但有點不清楚您說的串接多個的意思是什麼呢?

player iT邦大師 1 級 ‧ 2019-09-03 15:31:23 檢舉

https://pjchender.blogspot.com/2015/03/cssmultiple-selectorsspace.html

anniecat iT邦新手 3 級 ‧ 2019-09-03 15:44:24 檢舉

Hi player，瞭解了!謝謝您~

登入發表討論

直播研討會

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

直播中

2 個回答

YoChen

iT邦研究生 1 級 ‧ 2019-09-03 15:25:16

最佳解答

<div class='div_td' style='width:15%;border-right:none;@(row.Style == "title" ? "background:#E5E5E5;font-weight:bold;" : String.Empty)'></div>

回應 4
分享
檢舉

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

YoChen iT邦研究生 1 級 ‧ 2019-09-03 15:28:06 檢舉

記得在使用Html Helper時要用 @() 把邏輯框起來

YoChen iT邦研究生 1 級 ‧ 2019-09-03 15:30:45 檢舉

如果要用Html.Raw就會變成

<div class='div_td' style='width:15%;border-right:none;@(Html.Raw(row.Style == "title" ? "background:#E5E5E5;font-weight:bold;" : String.Empty))'></div>

YoChen iT邦研究生 1 級 ‧ 2019-09-03 15:38:13 檢舉

另外，因為您的Style眾多，建議您先建立一個css file，如下

.subTitle1 {
    /* Style寫在裡面 */
}
.subTitle2 {
    /* Style寫在裡面 */
}
.title {
    /* Style寫在裡面 */
}

然後在需要使用的地方

<div class='div_td @(row.Style)'></div>

別忘了在<head>裡面加入css的reference哦~

anniecat iT邦新手 3 級 ‧ 2019-09-03 15:46:05 檢舉

謝謝YoChen的幫忙~我學習您說的先建立一個css file，在依照變數指定樣式，感覺這樣比較好看，之後也比較好維護~

登入發表回應

小魚

iT邦大師 1 級 ‧ 2019-09-03 15:14:51

你沒說,
出現了什麼error呢?

回應 1
分享
檢舉

anniecat iT邦新手 3 級 ‧ 2019-09-03 15:24:54 檢舉

原本的error是html的tag的執行會不過，不過改掉寫法以後可以執行了，我有更新問題了~之後發問也會注意把error的部分放上問題中，謝謝!

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22201 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙