MVC3客户端验证:如何防止页面重装?

时间:2011-10-04 19:33:40

标签: asp.net-mvc-3 client-side-validation

我的页面有表格:

    @using (Html.BeginForm("Create", "Theme", FormMethod.Post, new { id = "frm_post", enctype = "multipart/form-data" }))
    {    
        @Html.ValidationSummary(true)
        @Html.TextBoxFor(model => model.Name)
        @Html.ValidationMessageFor(m => m.Name)
        <input type="image" src="img.png"
 onclick="javascript:if(func()){document.getElementById('frm_post').submit();}else{return false;}"/>
    }

我将脚本包含在页面中:

<script src="@Url.Content("~/Scripts/jquery-1.5.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

我在web.config中有这样的字符串:

<appSettings>
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

我在模型名称中有[必需]。

但是当我将文本框名称留空并提交表单时,错误消息会显示几秒钟,然后页面重新加载。如何停止重新加载页面?

2 个答案:

答案 0 :(得分:1)

看起来您可能想要删除该内联onclick处理程序并考虑编写自定义验证程序。这个http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the-jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx是如何使用不显眼的验证在MVC3中编写一个的好例子。它适用于自定义日期选择器,但可以将相同的原则应用于自定义验证。

答案 1 :(得分:1)

O-o-ops ...我应该从我的按钮的onclick事件中删除form.submit()。 所以,如果我使用

<input type="image" src="img.png"
 onclick="javascript:if(!func()){return false;}"/>

它工作正常。