javascript - Ajax 返回局部 View 丢失的 Javascript

Question

我有一个主视图，其主布局包含所有 javascript，即 jQuery DatePicker 控件等。

在这个主视图中，我使用了包含部分 View 的 Ajax.BeginForm(.....)。在我的 Controller 中，如果验证失败，它会返回该部分 View 。 (Ajax 中的 UpdateTargetId 也已设置为包含该部分 View 的部分的 ID。)

我的错误项目符号显示正确。但是我发现在那之后我似乎失去了javascript。例如，我的日历/日期选择器停止工作，出现一个正常的输入框。

可能是什么原因？

非常感谢!!

代码如下:

我的主视图包含一个 Ajax 表单。里面有 2 个局部 View 。第二个有日期选择器输入。

@using (Ajax.BeginForm("ActionXXX", "ControllerYYY", new AjaxOptions
{
    HttpMethod = "POST",
    UpdateTargetId = "main"        
}))
{
     <section id="main" class="....." data-section="....." data-step="">  

            @Html.Partial("ValidationSummary") 

            @Html.Partial("SharedPartialView", Model, new ViewDataDictionary {.....})          

     </section> 

}

并且 JS 包含在主文件中。 (主视图为此有布局)

<script type="text/javascript">   

    $('input.date').watermark('dd/mm/yyyy');

    $('input.date').datepicker({
        dateFormat: "dd/mm/yy",
        maxDate: 0, 
        onClose: function () { $(this).valid(); } 
    });    

    $('input.time').watermark('hh:mm');
    $('input.time').timeEntry();

</script>

Controller 只是:当验证失败时，返回部分 View (“SharedPartialView”)

if (Request.IsAjaxRequest())
    return PartialView("SharedPartialView", ciShareModel); //model

这些日期选择器和水印 jquery 在页面初始加载时起作用....

Answer 1

加载局部 View 后，您是否再次运行 javascript？ - 脚本 block 仅在页面加载时运行，因此母版页中的 仅在母版加载时运行。当您执行 ajax 调用时，您需要单独为局部 View 运行任何 javascript。

将此代码放在您的局部 View 中:

<script type="text/javascript">
    $(document).ready(function() {
        $('input.date').datepicker({
            dateFormat: "dd/mm/yy",
            maxDate: 0, 
            onClose: function () { $(this).valid(); } 
        });
    }); 
</script>

虽然 - 我建议不要使用 $('input.date') ，为您的输入元素提供唯一的 ID/类，否则您将重置用户可能在页面上其他“input.date”字段中输入的任何数据。用于例如:$('input.partialView_Date)并在局部 View 中调用您的输入字段:<input type="text" class="partialView_Date" />