Question

我正在尝试将jqWidgets的示例用于ListBox。我已将代码直接复制到我的index.cshtml文件中。我没有看到预期的结果，这将是样本的样子。所有它都显示我是按钮。

以下是该页面的链接。我减少了内容并允许任何人查看它：https://drive.azurewebsites.net/Question

以下是示例的网站：http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxlistbox/jquery-listbox-getting-started.htm

我不确定如何排除故障或在哪里查看真正出错的地方。我正在使用Chrome并拉起Inspect Element。正在检索脚本。

这是我的代码：

<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxcore.js"></script><script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script>

<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                ];
                // Create a jqxListBox
                $("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '200px' });
                // disable the sixth item.
                $("#jqxlistbox").jqxListBox('disableAt', 5);
                // bind to 'select' event.
                $('#jqxlistbox').bind('select', function (event) {
                    var args = event.args;
                    var item = $('#jqxlistbox').jqxListBox('getItem', args.index);
                    $("#eventlog").html('Selected: ' + item.label);
                });
                $("#button").jqxButton();
                $("#button").click(function () {
                    var item = $('#jqxlistbox').jqxListBox('getSelectedItem');
                    if (item != null) {
                        alert(item.label);
                    }
                });
            });
        </script>
        <div id='jqxlistbox'>
        </div>
        <div style="margin-top: 10px;">
         <input id="button" type="button" value="Get Selected Item" />
         <div id="eventlog"></div>
        </div>
    </div>
</body>

Answer 1

您的脚本未正确引用。在MVC4中，引用脚本的过程是不同的 - http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-binding-to-sql-database-mvc4.htm

JQWidgets在MVC 4中不起作用

1 个答案: