ASP.NET Core MVC 點擊標籤跳轉焦點至輸入視窗 (asp-for)

平時在撰寫 HTML 時,如果有標籤(Label)和相對應的輸入框(input),我們會在 label 上附加 for 這個 HTML 屬性,點擊 label 就會自動將焦點移動到 input 上,不過如果是直接綁定 model,似乎會出現編輯器的警告訊息...

假設我們有下面的 ViewModel:
    
public class MyViewModel
{
    public string Name { get; set; }
    public string Email { get; set; }
}
    

在 cshtml 的頁面上面綁定 MyViewModel,並建立標籤和輸入視窗
    
@model WebApplicationAspAppendVersionTest.Controllers.HomeController.MyViewModel

<form asp-action="Index" method="post">
	<div>
		<label>姓名:</label>
		<input asp-for="Name"/>
	</div>
	<div>
		<label>電子郵件:</label>
		<input asp-for="Email"/>
	</div>
	<button type="submit">送出</button>
</form>
    

其中我們在 input 中附加 asp-for 這個 html 標籤,將其資料綁定在 model 上的同名屬性中,input 的資料就會自動進入到 model 的 Name 和 Email 內。

只是目前有個小小的使用者體驗的問題,當使用者點選「姓名:」或是「電子郵件:」這兩個 lable 時,並不會自動將焦點跳至 input 。

依照我們以前撰寫 HTML 的經驗,可以直接在 lable 附加 for 屬性,就可以達成我們想要的效果。
    
<form asp-action="Index" method="post">
	<div>
		<label for="Name">姓名:</label>
		<input asp-for="Name"/>
	</div>
	<div>
		<label for="Email">電子郵件:</label>
		<input asp-for="Email"/>
	</div>
	<button type="submit">送出</button>
</form>
    

不過,有又有個小小的問題,上面的寫法在某些 IDE 中(如 Rider)會彈出下面的警告訊息:
    
Cannot resolve id 'Name'
Cannot resolve id 'Email'
    

那,在 Razor 語法中最正確的寫法是什麼呢? 一樣是使用 asp-for
    
<form asp-action="Index" method="post">
	<div>
		<label asp-for="Name">姓名:</label>
		<input asp-for="Name"/>
	</div>
	<div>
		<label asp-for="Email">電子郵件:</label>
		<input asp-for="Email"/>
	</div>
	<button type="submit">送出</button>
</form>
    

就可以完美的達成需求了。

留言