Jquery 使用脚本附加 MVC PartialView

Question

我有将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 追加时。 然后找不到那些函数。

感谢帮助。

Answer 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

Answer 2

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