是否可以在asp mvc 4中使用ajax呈现的视图中包含javascript？答案

【问题标题】：Is it possible to include javascript in view rendered with ajax in asp mvc 4?是否可以在asp mvc 4中使用ajax呈现的视图中包含javascript？
【发布时间】：2015-03-02 02:12:38
【问题描述】：

我在尝试使用 asp mvc 4 在局部视图中包含 javascript 时遇到严重问题，阅读 this post 我按照说明创建自定义 Html 帮助程序以包含 js。不幸的是，要么我从布局中调用它，然后永远不会按时调用实际包含 Javascript 的方法（这意味着在我执行 ajax 请求时已经调用了页面请求），或者我尝试将它包含在我的 Partial 中查看，但部分视图似乎会自动删除其中编写的任何 javascript。所以我尝试渲染一个标准视图，但即使这样也没有解决问题。那么问题是，甚至可以在 asp mvc 中使用 ajax 调用的视图中呈现 javascript 吗？有人做过吗，求指教。我实际上需要在我的“ajax 调用”视图中运行 javascript，因为我必须检测该视图内的表单内的值。我不会发布 Helper 的代码，因为它完全来自引用的帖子。谢谢！

好的，我将尝试更具体地说明为什么我认为在我的特定视图中需要 javascript。以下是主视图的代码：

    @model MvcCursosSSP.Models.CursosModel
@using System.Threading;
@{

    ViewBag.Title = "AgregarHorario";
    Layout = "~/Views/Shared/_Layout.cshtml";
    int numhoras = ViewBag.NumeroHoras;
    int dias = ViewBag.Dias;
    System.Globalization.CultureInfo culture = Thread.CurrentThread.CurrentCulture;
}

<h2>AgregarHorario</h2>
<table class="horario">
    <colgroup>
        <col id="col1">
        <col id="col2">
        <col id="col3">
        <col id="col4">
        <col id="col5">
        <col id="col6">
    </colgroup>
    <caption>@if (ViewBag.Modulo != null)
             {
                 <text>Modulo </text>@ViewBag.Modulo[0].NumModulo.ToString()<br />@ViewBag.Modulo[0].Nombre.ToString()<br />
             }Horario del @Model.FechaInicio.Day.ToString() de @Model.FechaInicio.ToString("MMMM", culture) al @Model.FechaTermino.Day.ToString() de @Model.FechaTermino.ToString("MMMM", culture)</caption>
    <thead>
        <tr><th>Horario</th>
        @for (int i = 0; i <= @dias; i++)
        {
            <th>@Model.FechaInicio.AddDays(i).ToString("dddd", culture)&nbsp;@Model.FechaInicio.AddDays(i).Day.ToString()</th>
        }
        </tr>
        </thead>
        <tbody>
            @for (int i = 0; i <= @numhoras; i++)
            {
                var newTime = @Model.HorarioInicio.Add(new TimeSpan(i, 0, 0));
                <tr><td>@newTime.Hours:00</td>@for (int j = 0; j <= @dias; j++)
                                                 {
                                                 <td id="@newTime.Hours" rel="@Model.FechaInicio.AddDays(j).Day.ToString()"><span class="addHorario">AgregarHorario</span></td>
                                                 }
                </tr>
            } 
        </tbody>
    </thead>
    </table>
@section scripts {
<script type="text/javascript">
    $('span.addHorario').click(function () {
        var td = $(this).parent('td');
        td.load("/Cursos/CreateMateria/" + new Date(@Model.FechaInicio.Year.ToString(), @Model.FechaInicio.Month.ToString(), td.attr('rel')).toISOString().substring(0,10) + '/' + td.attr('id'));
    });
    $('button[id^="save"]').click(function () {
        horaini = $('#horarioInicio'+$(this).attr('id').substring(4, $(this).attr('id').length)).val();
        horafin = $('#horarioFin'+$(this).attr('id').substring(4, $(this).attr('id').length)).val();
        alert(parseInt(horafin)-parseInt(horaini));
    });
</script>
}

但以行开头的最终 javascript：$('button[id^="save"]').click 不起作用，我认为是因为 dom 已经构建并且 jquery 无法识别任何内容。有人可以提出解决方案吗？

【问题讨论】：

脚本应该在主视图或布局中，而不是在局部视图中，但是你为什么认为你需要一个 html 助手呢？
抱歉看了下面的评论，我试图编辑这个但我终于发布了另一个。我想知道的是，当 dom 由于 ajax 调用而发生变化时，如何运行 javascript？
我已经设置了一个小提琴来说明这个 [link]jsfiddle.net/t97Lue3m/2 我想我需要 javascript 在我的部分视图中运行才能正确运行，否则对 document.ready 的调用已经过去了.我错了吗？
如果你的主视图有一个 ajax 函数来动态加载部分视图，那么你使用事件委托，例如$(document).on('click', '#someElement', function() { // do something }); 理想情况下，将document 替换为您第一次渲染视图时存在的最近的祖先，而#someElement 在您的情况下可能是.someClassName（而不是'button[id^="save"]'）
抱歉，您的想法似乎与我发布答案时的想法相同。不过，没有人窃取任何人的想法。我照你说的做了。谢谢你:)

标签： javascript ajax asp.net-mvc-4 asp.net-mvc-partialview

【解决方案1】：

没关系，我解决了。我看起来 Jquery 已经有了解决方案，只需向负载添加一个回调函数，如下所示：

$('span.addHorario').click(function () {
    var td = $(this).parent('td');
    td.load("/Cursos/CreateMateria/" + new Date(@Model.FechaInicio.Year.ToString(), @Model.FechaInicio.Month.ToString(), td.attr('rel')).toISOString().substring(0,10) + '/' + td.attr('id'), function(){
        $('button[id^="save"]').click(function () {
            horaini = $('#horarioInicio'+$(this).attr('id').substring(4, $(this).attr('id').length)).val();
            horafin = $('#horarioFin'+$(this).attr('id').substring(4, $(this).attr('id').length)).val();
            alert(parseInt(horafin)-parseInt(horaini));
        });   
    });
});

现在我可以操纵部分视图的 dom。谢谢！

【讨论】：