Jquery 用脚本附加 MVC PartialView答案

【问题标题】：Jquery append MVC PartialView with scriptsJquery 用脚本附加 MVC PartialView
【发布时间】：2015-10-22 19:34:11
【问题描述】：

我有将PartialView 附加到div 中的javascript 函数。一切正常，除了 PartialView 包含一些 <script></script> 脚本。 jQuery 找不到那些动态附加的函数 - Uncaught ReferenceError: getIDc4 is not defined。

我的 JS 函数

var url = '@UrlHelper.GetFullUrl("Inventories/GetFilterRow")'; //this returns partial view
        $.ajax({
            type: 'POST',
            data: { aRef: aRef },
            url: url,
            success: function(data) {
                $('.filter').append($(data)[0]);
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = url;
            }
        });

和局部视图

...
@{
    int id = Model != null ? Model.Id : 1;
}

<div id="@Html.Raw("FilterCondition" + id)">
...
...
...

    @{
        string getIdcFunction = string.Format("getIDc{0}", id);
    }
    <script>
        @{
            @:function  
                @getIdcFunction<text>() {
            var grid = $("@Html.Raw("#field"+id)").data("kendoDropDownList");
            var item = grid.value();
            return { IDc: item };
        }
            </text>
        }
    </script>

</div>

我怎样才能让那些动态附加的函数开始工作？

当我使用页面加载生成局部视图时

@Html.Partial("GetFilterRow", new {Id = 1})

一切正常。唯一的问题是当这个视图通过 jquery 和 ajax 追加时。那么这些函数都没有找到。

感谢您的帮助。

【问题讨论】：

永远不要将脚本放在部分中。将它们放在主视图或布局中
是的，但在这种情况下我需要它...有什么解决方法可以让它工作吗？
你认为你为什么需要它？你想做什么？
嗯，我需要生成名称为name1，name2，name3的函数......原因是，我使用的外部组件不支持回调函数参数，所以我不能只调用 name(id)，我只能指定函数的名称，因此我为每个组件创建了一个新函数.... 这很丑，但我没有看到其他解决方法
外部组件是否包含对原始元素的引用？也许您可以使用 jQuery $.data() 在每个元素上设置自定义数据，然后在回调中检索它？编辑：您也可以尝试将脚本移到
标记之外并给它 type="text/javascript"。 jQuery 应该自动解析脚本标签。查看 Microsoft 的 jQuery.unobtrusive-ajax.js，了解他们如何处理 Ajax.ActionLink 的示例。使用此方法的部分视图中的脚本被解析并执行得很好。

标签： javascript jquery asp.net-mvc razor asp.net-mvc-partialview

【解决方案1】：

我知道您有几个选择。选项一是将您的脚本包含在主视图中并设置onclick 或您尝试调用的任何事件以调用该函数。

例如，在您的主视图中有：

function floorSelect(clickedFloor) {
         doStuff;
         }

在你的部分观点中：

    <ul class="dropdown-menu" role="menu" aria-labeledby="dropDownSelectFloor">
                @For i As Integer = 0 To Model.ListOfFloors.Count - 1
                    @<li role="presentation"><a id="ddListSelectFloor" class="ddListSelectFloor" 
                     onclick="floorSelect(this)" role="menuitem" tabindex="-1">
                     @Model.ListOfFloors(i)</a>
                        </li>
                    Next
                </ul>

注意 onClick 从主视图调用脚本。

选项 2 是通过id 附加脚本（您也可以对class 执行此操作）

像这样：

@For i As Integer = 0 To Model.ListOfDisplayTypes.Count - 1
                If Model.ListOfDisplayTypes(i).Equals("DatePicker") Then
                @<div class="row">
                    <div class="col-md-4">
                        <b>@Model.ListOfFields(i): </b>
                    </div>
                    <div class="col-md-4">
                        <input class="search" id="@Model.ListOfCategoryAttributeIDs(i)" type="text" placeholder="@Model.ListOfFields(i)">
                    </div>
                    <script>
                        jQuery("input[id='@Model.ListOfCategoryAttributeIDs(i)']").datepicker();
                    </script>
                </div>
                End If
            Next

【讨论】：

【解决方案2】：

1.将部分视图中的脚本放入scripts.js文件中。 2.将部分视图附加到div后使用$.getscripts('path of scripts.js')。

【讨论】：

好主意。但这不起作用，因为 OP 正在用 razor 编写 JS。检查一次OP，你可以看到文本标签。所以它不仅仅是 JS，它类似于动态 JS 代码