使用自訂Razor語法來Disable網頁元素
前言
在View中經常會針對部分輸入框，依據邏輯的不同來設定Disable/Enable狀態，好讓使用者清楚地了解目前狀態是不允許更改部分資訊的。為實現此目的可能會在View中寫出以下判斷式，當IsEditable為true時可以針對UserId進行編輯，反之則加註上disabled屬性來取消此輸入框之編輯功能；但試想一下，如果很多欄位都需要判斷，是不是在View中就充斥著許多判斷式以及重複的代碼? 因此可使用以下所介紹的方式進行簡化。
{
// 可編輯 (Enable)
@Html.EditorFor(model => model.UserId)
}
else
{
// 不可編輯 (Disable)
@Html.EditorFor(model => model.UserId, new { htmlAttributes = new { disabled = "disabled" } })
}
實作方法
方法一 擴充HtmlString類別方法
由於@Html.EditorFor() 回傳的是HtmlString類別，因此自行定義一個IsDisable的HtmlString擴充方法，主要功能就是在產出的Html中加註disabled屬性來使該元素失效，請參考以下代碼。
{
public static MvcHtmlString IsDisable(this MvcHtmlString htmlString, bool isDisable)
{
if (isDisable)
{
var html = htmlString.ToString();
var disabled = " disabled=\"disabled\" ";
html = html.Insert(html.IndexOf(">", StringComparison.Ordinal), disabled);
return new MvcHtmlString(html);
}
return htmlString;
}
}
使用方式如下，是不是清爽多了
@Html.EditorFor(model => model.UserId).IsDisable(!Model.IsEditable)
方法二 擴充HtmlHelper類別方法
當需要對Button設定Disable/Enable條件時，由於HtmlHelper並沒有提供產出Button的方法，因此自然就無法使用上述方式來處理；此時就可以使用最簡單且靈活的方式來擴充一個HtmlHelper方法，主要功能就是依據傳入的條件來產出disabled = 'disabled'字串，方法如下。
{
public static string IsDisabled(this HtmlHelper helper, bool isDisabled)
{
// 是否傳出 disabled = 'disabled' 字串
return isDisabled ? "disabled = 'disabled'" : string.Empty;
}
}
使用方式如下
<input type="button" value="Edit" @Html.IsDisabled(!Model.IsEditable)>希望此篇文章可以幫助到需要的人
若內容有誤或有其他建議請不吝留言給筆者喔 !
