Ajax返回Partial View丢失的Javascript [英] Ajax return Partial View lost Javascript

问题描述

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

I have a main view which has master layout contains all javascripts, ie jQuery DatePicker control, etc.

在此主视图中，我使用Ajax.BeginForm(.....)，其中包含部分视图.在我的控制器中，如果验证失败，它将返回该局部视图. (而且Ajax中的UpdateTargetId也已设置为包含该局部视图的部分的ID.)

Inside this main view, I use Ajax.BeginForm(.....) which contains a partial view. And in my controller, if validation fails it returns that partial view. (also the UpdateTargetId in Ajax has been set the Id of the section contains that partial view.)

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

My error bullets display correctly. However I found I seems to loose the javascript after that. For example my calender/date picker stops working and it comes a normal input box.

可能是什么原因?

非常感谢！

以下是代码:

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

My main view contains one Ajax form. And inside there are 2 partial views. The 2nd one has datepicker inputs.

@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包含在主文件中. (主视图具有此布局)

And JS is included in master file. (Main view has Layout for this)

<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>

控制器就是:验证失败时，返回部分视图("SharedPartialView")

The controller is just: when validation fails, return partial view ("SharedPartialView")

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

这些datepicker和水印jquery在最初加载页面时起作用....

These datepicker and watermark jquery do work when page initially loaded....

推荐答案

加载部分视图后，您是否再次运行javascript? -脚本块仅在页面加载时运行，因此母版页中的仅在加载母版时运行.进行Ajax调用时，您需要分别为部分视图运行任何JavaScript.

Are you running the javascript again, after you load the partial view? - A script-block is only run when the page loads, so the in your master page is only run when the master is loaded. When you do an ajax call, you need to run any javascript for the partial view seperately.

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

Put this code in your partial 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"字段中输入的所有数据.用于ex:$('input.partialView_Date)并在部分视图中调用输入字段:<input type="text" class="partialView_Date" />

Although - I suggest instead of using $('input.date'), give your input element a unique ID/class, otherwise you will reset any data a user may have entered in other 'input.date' fields on the page. Use for ex: $('input.partialView_Date) and call your input field in the partial view: <input type="text" class="partialView_Date" />

这篇关于Ajax返回Partial View丢失的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！