为什么在呈现的局部视图上的脚本引用不起作用，我使用 ajax 来呈现局部视图，我的日期时间选择器不起作用

Question

我的控制器上有这个动作

public ActionResult Absent()
    {
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.Cache.SetExpires(DateTime.UtcNow.AddHours(-1));
        Response.Cache.SetNoStore();
        return PartialView();
    }

我有这个 javascript 来调用上面的视图。

   $('li.special > a').on('click', function (e) {
             e.preventDefault();
                $('#loading-min').show();
                $.ajax({
                    url: $(this).attr('href'),
                    type: 'GET',
                    success: function (result) {

                        $('#loading-min').hide();
                        document.getElementById('row-report').innerHTML = result;

                    }
                });

            });

我在将显示页面的_layout 上有这个

<div id="row-report">
            @RenderBody()
            </div>

假设我的页面上有这些，包括引用的脚本

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" />
    <script src = "http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src ="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<h2>Absent</h2>
@using (@Html.BeginForm("PreviewAbsent", "Report", new { ReportID = "Absent" }))
{


    @Html.ValidationSummary(true)
    <div class="editor-label">
        @Html.LabelFor(m => m.DateFrom)
    </div>
    <div class ="editor-field">

        @Html.TextBoxFor(m => m.DateFrom, new {@class = "datepicker form-control", @style= "width:200px; height:30px"  })
    </div>
    <div class="editor-label">
        @Html.LabelFor(m => m.DateTo)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(m => m.DateTo, new { @class = "datepicker2 form-control",@style ="width:200px; height:30px" })
    </div>
    <br /> <p><input type="submit" class ="btn btn-primary" value= "Print Report"/></p>
}

@section scripts {


    <script>
            $(function () {
                $('.datepicker').datepicker({
                    showOn: "both",
                    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                    buttonImageOnly: true,
                    showButtonPanel: true,
                    changeMonth: true,
                    changeYear:true
                })


            });

            $(function () {
                $('.datepicker2').datepicker({
                    showOn: "both",
                    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                    buttonImageOnly: true,
                    showButtonPanel: true,
                    changeMonth: true,
                    changeYear: true
                })
            });




 </script>


}

my datetimepicker wont work on textbox on the rendered partialview, but if i will not use ajax to render the view and change the controller to return a View() it works.. is there any issue when rendering a partialview using javascript/ajax?

Answer 1

我过去是如何完成 Brendan 的回答的，就是将代码放入函数中

function Pickers(){
    $('.datepicker').datepicker({
        //...
    });
}

然后在加载部分的 ajax 调用成功后，调用函数

.success(result){
    Pickers();
}

该函数在部分加载后调用，然后您的代码应该可以工作。

为什么在呈现的局部视图上的脚本引用不起作用，我使用 ajax 来呈现局部视图，我的日期时间选择器不起作用

why do scripts reference on rendered partialview doesn't work, i used ajax to render a partial view, my datetimepicker wont work

jquery

ajax

asp.net-mvc-4

datetimepicker