【MVC】Client Side Validate in Partial View with unobtrusive

MVC中很好用的一種驗證方式就是在model寫attribute

[Required(ErrorMessage="展覽名稱為必填")]
[MaxLength(50)]
public string ExhibitionName { get; set; }

接著在View中用HtmlHelp方式建立Textbox

@Html.TextBoxFor(m => m.ExhibitionName)
@Html.ValidationMessageFor(m => m.ExhibitionName)

MVC就會很貼心的把你的Client端驗證做好了。

但今天遇到的問題是，用同樣的方法寫在Partial View裡面卻沒有用
狀況如下：
在_layout Page中一樣載入了必備的MVC4提供的Jquery驗證檔案

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

網站頁面長成這樣

[](http://4.bp.blogspot.com/-WiQ8PRLsFG0/UX4vwwOgvvI/AAAAAAAACq8/ifNZBq9JUEs/s1600/1.png)

當按下紅色框框內的功能列表，用Ajax的方式return Partial View放到藍色框框中。 [](http://1.bp.blogspot.com/-h-0y5VY6FgE/UX4wNNMxGiI/AAAAAAAACrE/IzSGeMXQhQo/s1600/1.png) 但用Ajax載入的Partial View用上述的方式就不會自動驗證了，研判應該是動態產生的DOM元件沒有跟JQuery繫結到，這跟以前Asp.Net的UpdatePanel有異曲同工之妙。

所以在Partial View中的Script block中加入這行 註:#ajaxForm為Partial View中Form ID

$('body').on("click", '.addNewExihition', function () {
        $.validator.unobtrusive.parse('.ajaxForm');
    });

這樣JQuery的驗證就又重新繫結上了，讚!!