加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > asp.Net > 正文

将asp mvc3不显眼验证与jquery验证插件混合使用

发布时间:2020-12-16 03:20:44 所属栏目:asp.Net 来源:网络整理
导读:对于asp mvc3客户端验证,是否可以将默认的,开箱即用的不引人注目的样式与 jquery验证插件混合使用? 这是视图中的表单: @using (Html.BeginForm("","",FormMethod.Post,new { id = "newRatingForm" })){ @Html.ValidationSummary(true) fieldset legendRati
对于asp mvc3客户端验证,是否可以将默认的,开箱即用的不引人注目的样式与 jquery验证插件混合使用?

这是视图中的表单:

@using (Html.BeginForm("","",FormMethod.Post,new { id = "newRatingForm" }))
{   
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Rating</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Rate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Rate)
            @Html.ValidationMessageFor(model => model.Rate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

默认情况下,Unobtusive在模型属性上使用通常的验证属性.目标是用[fyneworks] [1] jquery星级评级插件替换表单中的’model.Rate’位,并使用jquery验证插件仅用于表单的那一部分:

<span>Your Rating:</span>
<div id="ratingStars">
    <input class="star {split:2}" type="radio" name="Rating" value="0.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="1.0"/>
    <input class="star {split:2}" type="radio" name="Rating" value="1.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="2.0"/>
    <input class="star {split:2}" type="radio" name="Rating" value="2.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="3.0"/>
    <input class="star {split:2}" type="radio" name="Rating" value="3.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="4.0"/>
    <input class="star {split:2}" type="radio" name="Rating" value="4.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="5.0"/>
</div>

我已经劫持了表单的提交操作并将表单值转换为Json以执行ajax请求:

$("#newRatingForm").submit(function (event) {
    event.preventDefault();

    if ($(this).valid()) {        
        newRatingSubmit();
    }    
}); 

function newRatingSubmit() {
    //jquery ajax request using form values converted to Json
}

单选按钮似乎打破了表单,劫持代码不再有效,即当我点击提交时,没有向服务器发出请求(在firebug控制台上观看),表单就消失了.再一次,它只是简单的mvc3形式一切正常.

我尝试为评级单选按钮添加jquery验证规则,但似乎没有任何区别:

$("#newRatingForm").validate({
    meta: "validate",errorLabelContainer: "#ErrorDiv",wrapper: "div",rules:
    {
        Rating: {
            required: true
        }
    },messages:
    {
        Rating: {
            required: 'A Rating required.'
        }
    },onfocusout: false,onkeyup: false,//handle validation ok,POST submit
    submitHandler: function (label) {
        newRatingSubmit();
    }
 });

作为替代方案,我可以使用jquery验证插件使用星级评级插件验证标准html表单,并使用上面的代码提交,但这似乎不是’asp.net mvc’.例如,我需要2组验证消息 – 1个用于服务器,使用验证属性,另一个用于客户端视图.

解决方法

jQuery.validator.addMethod("methodeName",function (value,element,params) {
        if (somthing) {
            return false;
        }
        return true;
    });

    jQuery.validator.unobtrusive.adapters.addBool("methodeName");

并在html中添加2个属性

dal-val = true和dal-val-methodeName =“errorMessage”

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读