如何在jQuery中修复ReferenceError

问题描述

如何修复ReferenceError？我正在尝试在Kendo Grid中显示记录。我用下面的代码。我正在尝试将文本框值传递给MVC操作，但是jQuery给了我ReferenceError：

@(Html.Kendo().Grid<TestProject.viewmodels.Project.gridModel>()
    .Name("BillDocuments")
    .Columns(columns => {
        columns.Bound(p => p.ID).Hidden().Width(50);
        columns.Bound(p => p.Sequence).Title("Seg").Width(50);
        columns.Bound(p => p.DocumentType).Width(100);    
        columns.Bound(m => m.Actions).ClientTemplate("<a class='text-primary' href='#= Location #'>View</a>").Width(50);  

    })   
    .HtmlAttributes(new { style = "height:250px;" })
    .DataSource(dataSource => dataSource
        .Ajax()        
        .PageSize(5)
         .Read(read => read.Action("BillRead","Billing",new { Area = "Billing"}).Data("additionalInfo")
         .Type(HttpVerbs.Get))
     )
)

这是我的jQuery：

<script>
    function additionalInfo() {
        return {
            invoiceID: $("#txtInvoiceID").val(),}
    }      
</script>

但是它一直在给我 ReferenceError：未定义AdditionalInfo [了解更多]

解决方法

很高兴看到您的View的上下文更广泛，但是评论的建议实际上是正确的。我非常确定您在脚本标签的之前定义了网格（通常，<script>在经典MVC的末尾）。我相信，当Razor将您的模板转换为HTML时，它只是注入一些带有附加脚本标签的HTML元素。显然，它使用了additionalInfo函数，该函数尚未定义。这是一个示例，该示例将呈现与您的情况完全相同的错误：

<html>
<head>
    <title>Test</title>
</head>
<script>
    console.log(foo());
</script>
<script>
    function foo() {
        return 'foo';
    }
</script>
</iframe>
</html>

可能的解决方法是将定义了<script>的{{1}}标签移动到页面顶部（考虑定义本身与DOM没有任何依赖关系），您可以放心地这样做）。但是，功能调用应该在DOM准备就绪后完成。