如何让 jquery 在 asp.net mvc 中工作

Question

我已经读过这些书，我已经用谷歌搜索了它，但我仍然没有得到任何结果。我有一个 MVC 应用程序，我将对 jquery 的引用放入母版页中，并注册初始化代码，如下所示：

<script src="~/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />

<script>
    $(function () {
        $("#txt").click(function () {
            var $ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: 'text' }).addClass("text");
        $("#holder").append($ctrl);
    });

});
</script>

该代码的目的是将文本框添加到 id 为“holder”的 div 中当按下 ID 为“txt”的按钮时。我从网上某处获得了这段代码，并且在该页面上运行良好。我再也找不到它了，否则我会添加链接。 我这样制作按钮：

<input type="button" id="txt" value="Add TextBox" />
<div id="holder"> this is the holder </div>

但是，按下按钮时绝对没有任何反应。我只想知道 JQUERY 代码去哪里？我是否将所有功能都放在母版页的头部？我要把它放在每个aspx页面中吗？我是否将其放在单独的文件中？如果是，我在哪里以及如何引用它？所有的书对我来说都没有任何意义，我只是从 jquery 开始，这个驼峰正是阻止我开始进入它的原因。 jquery代码去哪里了？请帮忙。

Answer 1

<script src="@Url.Content("~/Scripts/jquery-1.4.1.js")" type="text/javascript"></script>

Answer 2

请参阅此处： http://jsfiddle.net/UukmR/1/

它工作正常吗？

确保所有脚本引用都是正确的，并将它们包含在母版页的标题中。

Answer 3

首先，您的 jQuery 代码无法运行的原因是 ~ 对浏览器没有意义。这需要切换为绝对引用：

<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>

..或者需要使用运行服务器端的代码将其转换为绝对引用：

// Using the ascx view engine
<script src="<%: Url.Content("/Scripts/jquery-1.4.1.js") %>" type="text/javascript"></script>
// Using the razor view engine
<script src="@Url.Content("/Scripts/jquery-1.4.1.js")" type="text/javascript"></script>

除此之外，您可以自由地将 jQuery 代码放在最有意义的地方。我个人发现的最佳策略是将尽可能多的 javascript 放入在头部引用的静态 javascript 文件中。除了将 javascript 和标记分开（看起来更好）之外，这还有一个额外的好处：将大量静态代码放入可以由浏览器缓存的静态文件中，从而减少跨越与每个请求连线。

PS：-vsdoc.js 文件纯粹是为了智能感知而存在，不应包含在实际标记中。当VS.NET知道你正在使用相应的jquery文件时，它会自动检测它的存在并使用它。

Answer 4

您的代码不应该

<script>
    $(function () {
        $("#txt").click(function () {
            var $ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: 'text' }).addClass("text");
        $("#holder").append($ctrl);
    });

});
</script>

包含在 jquery $(document).ready() 调用中吗？

所以尝试这样的事情：

<script>
$(document).ready(function(){
    $("#txt").click(function () {
        var $ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: 'text' }).addClass("text");
        $("#holder").append($ctrl);
    });
});
</script>