[ASP.NET] Razor 控制 HTML 元素屬性：快速實現常見操作

今天寫一些每天都會用到，但是有時候就是會忘記然後去查一下

想了想不如寫一篇文章整理一下，讓自己記住，如果你覺得太簡單就直接跳過吧

我只是要記錄一下一些 Razor 在 HTML 中下的操作方式。

1.  Razor 方式控制 input readonly 

<p> <input value="測試readonly" readonly="@(true)" /> </p> <p> <input value="測試readonly false" readonly="@(false)" /> </p> <!-- after render --> <p> <input value="測試readonly" readonly="readonly"> </p> <p> <input value="測試readonly false"> </p>

2.  Razor 方式控制 button disabled

<p> <button disabled="@(true)">禁用按鈕</button> </p> <p> <button disabled="@(false)">非禁用按鈕</button> </p> <!-- after render--> <p> <button disabled="disabled">禁用按鈕</button> </p> <p> <button>非禁用按鈕</button> </p>

3.  Razor 方式控制 Element 的 css display:none  

<p> <!-- 控制 CSS display:none--> <div style="@(false?"":"display:none")">控制消失 DIV</div> </p> <!-- after render --> <p> <!-- 控制 CSS display:none--> <div style="display:none">控制消失 DIV</div> </p>

4. Checkbox 控制勾選  checked

<p> <!-- 控制 預設勾選 checkbox --> <input type="checkbox" checked="@(true)" />測試勾選打勾 </p> <!-- after render --> <p> <!-- 控制 預設勾選 checkbox --> <input type="checkbox" checked="checked" />測試勾選打勾 </p>

5. Select Option 控制 選取項目，透過 Razor 控制

<p> <!-- 控制 select option HTML 控制 --> @{ var selectCity = "台中"; var cities = new string[] { "台北", "新北", "台中", "高雄", "嘉義", "花蓮", "雲林" }; } <select class="form-control"> @foreach(var city in cities){ <option value="@Html.Raw(@city)" selected="@(city==selectCity)">@Html.Raw(@city)</option> } </select> </p> <!-- after render--> <p> <!-- 控制 select option HTML 控制 --> <select class="form-control"> <option value="台北">台北</option> <option value="新北">新北</option> <option value="台中" selected="selected">台中</option> <option value="高雄">高雄</option> <option value="嘉義">嘉義</option> <option value="花蓮">花蓮</option> <option value="雲林">雲林</option> </select> </p>

6.  Select Option 控制 選取項目，透過 Razor + Javascript 控制 

<p> <!-- 控制 select option Jsavscript 控制 --> @{ var selectCity2 = "高雄"; var cities2 = new string[] { "台北", "新北", "台中", "高雄", "嘉義", "花蓮", "雲林" }; } <select class="form-control" id="selCity2"> @foreach (var city in cities) { <option value="@Html.Raw(@city)">@Html.Raw(@city)</option> } </select> @{ <script> let element = document.getElementById('selCity2'); element.value = '@Html.Raw(selectCity2)'; </script> } </p> <!-- after render--> <p> <!-- 控制 select option Jsavscript 控制 --> <select class="form-control" id="selCity2"> <option value="台北">台北</option> <option value="新北">新北</option> <option value="台中">台中</option> <option value="高雄">高雄</option> <option value="嘉義">嘉義</option> <option value="花蓮">花蓮</option> <option value="雲林">雲林</option> </select> <script> let element = document.getElementById('selCity2'); element.value = '高雄'; </script> </p>

這些操作都是 Razor 和 HTML 常見的應用，透過此整理可以更快回想起如何實現這些功能。

--

Before you read this, the article was in a superposition of human and AI. Upon observation, the wave function collapsed into a sleep-deprived developer.

如果這篇文章有幫助到您幫我分享一下，讓我有寫下去的動力...