NuGet程式包-改良ASP.NET MVC驗證訊息顯示
ASP.NET MVC針對Create/Edit View提供了方便好用的Client端驗證機制, 但對我來說有一點"美中不足": 在專案中我常使用如下圖的"表格式欄位排版",預設驗證訊息會被接在欄位的正後方,多出的文字會增加<td>的寬度,即使換行顯示在下方也會增加<td>的高度,無論如何都會破壞原本的畫面配置。

在還沒改用ASP.NET MVC的年代,我習慣選用Position: Absolute的jQuery Inline Form Validation。由於訊息會浮現在欄位的右上角不佔用實體空間,可避免驗證訊息破壞原有排版的問題。

現在,是在ASP.NET MVC實現同樣的理念的時候了!
從Inline Form Validation Engine plugin中擷取部分程式, 我寫了一個可以支援ASP.NET MVC 3的改良版。使用方式很簡單: 引用jquery.validate.inline.js及validationEngine.jquery.css, 然後再加上一行指令: $(“form”).makeValidationInline(); 搞定收工。
<script src="@Url.Content("~/Scripts/jquery.validate.inline.js")"
type="text/javascript"></script>
<link href="@Url.Content("~/Content/validationEngine.jquery.css")"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("form").makeValidationInline();
});
</script>
在Create.cshtml動點小手腳後,可以看見驗證訊息已改出現在右上角,不再破壞原本的排版囉!

我已將這個小Plugin上傳到NuGet gallery,算是我第一枚公開發行的NuGet程式包,歡迎大家提供回饋囉~~