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

2024-10-17

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

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

我只是要記錄一下一些 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 常見的應用，透過此整理可以更快回想起如何實現這些功能。

當麻許的超技八