ASP.Net MVC - 部分刷新后客户端验证中断?

ASP.Net MVC - Client side validation breaks after a partial refresh?

提问人:aryaxt 提问时间:3/18/2013 最后编辑:aleationaryaxt 更新时间:4/24/2013 访问量:2215

问:

我有一个包含搜索栏的页面,默认情况下它显示下面的项目列表。 每个项目都包装在ajaxform中,以便用户可以更新数量。 客户端验证在页面加载时工作得很好,并且需要一定数量。

一旦用户单击搜索,并且部分结果被刷新,我的整个验证就会中断,并且不再显示验证摘要。

我试图通过调用刷新部分后重新添加验证,但它似乎没有做任何事情。$.validator.unobtrusive.parse($("#resultList"));

有什么解决办法吗?

主表单

<script>
function onSearchSucceeded() {
   $.validator.unobtrusive.parse($("#resultList"));
}

function onUpdateSucceeded() {
   $.validator.unobtrusive.parse($("#resultList"));
}

$(function () {

    $("#resultList :input[type=text]").blur(function () {
        $(this).closest("form").submit();
    });

)};

</script>


@using (Ajax.BeginForm("Search",
    null,
    new AjaxOptions
    {
        UpdateTargetId = "resultList",
        LoadingElementId = "searchLoader",
        OnSuccess = "onSearchSucceeded"
    },
    new
    {
        id = "searchForm"
    }
    ))
{
   @Html.TextBoxFor(m => m.query)
   <input type="submit" value="search" />
}


<div id="resultList">
   @Html.Partial("SearchResult", Model.Results)
</div>

部分

@foreach (var item in Model) {
    using (Ajax.BeginForm("UpdateItem",
        new AjaxOptions {
            UpdateTargetId = "resultList",
            OnSuccess = "onUpdateSucceeded"
        },
        null,
        new{
            id = "form-" + item.Id
        }
     )){
       @Html.TextBoxFor(m => item.Quantity)
       @Html.ValidationSummary()
       // This form gets submitted through javascript after a blur on quantity textfield
     }
}
jquery asp.net-mvc unobtrusive-ajax

评论


答:

2赞 Darin Dimitrov 3/18/2013 #1

和函数对我来说似乎是正确的。正是在这些函数中,您告诉 jQuery 不显眼的框架,新的 DOM 元素存在于结果 div 中,需要注册。onSearchSucceededonUpdateSucceeded

困扰我的是您代码中的以下注释:

// This form gets submitted through javascript after a blur on quantity textfield

不幸的是,您还没有确切地展示这是如何完成的,但以下代码对我来说效果很好:

$(document).on('blur', 'form[id^="form-"] input[name$="Quantity"]', function () {
    $(this).closest('form').submit();
});

评论

0赞 aryaxt 3/18/2013
感谢您的回答,我更新了我的问题并添加了提交表单的代码,我认为它没有问题
0赞 Darin Dimitrov 3/19/2013
嗯,实际上有一个问题。您没有以生动的方式订阅 .blur 事件,这意味着在第一次 AJAX 调用之后,您的 blur 事件将不再起作用。看看我的例子。我使用该方法来订阅它,这意味着即使该元素尚不存在或在 DOM 中更新,模糊事件也会自动附加到它。.on()
0赞 aryaxt 3/19/2013
这就是问题所在,谢谢,你能把它添加到你的答案中,以便我接受它吗?谢谢
0赞 Darin Dimitrov 3/19/2013
我已经在我的答案中展示了使用该方法注册事件的正确方法,并且认为它不需要更多的编辑。blur.on