我的 ASP.NET MVC4 项目中的 jQuery 函数问题答案

【问题标题】：Problems with jQuery function in my ASP.NET MVC4 project我的 ASP.NET MVC4 项目中的 jQuery 函数问题
【发布时间】：2015-02-25 09:52:08
【问题描述】：

我有 ASP.NET MVC4 项目。我创建模态弹出窗口，并使用 jQuery 库使窗口可拖动。

代码如下：

@{
    //Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="~/jquery.js"></script>
<script type="text/javascript" src="~/jquery-ui.min.js"></script>

<meta name="viewport" content="width=device-width" />  
<title>Index</title>

</head>
<body>
<div>
</div>
<style>
      
     #shadow
      {
          position: fixed;
           height: 100%;
          width: 100%;
          background-color: #fffddd;
          opacity: 0.4;
          z-index: 9000;
     }
    
    #popUpWin
    {
        border: 3px solid gray;
        position: absolute;
        background-color: white;
        top: 5%;
        left: 30%;
        border-radius: 10px;
        z-index: 9005;
    }
    
    .upperLine
    {
        cursor: move;
        width: 95%;
        height: 20px;
        border-top-left-radius: 10px;
    }
    
    .title
    {
        width: 90%;
        height: 20px;
        font-size: 20;
        font-weight: 900;
        color: gray;
        background-color: white;
    }
    
    #img_close
    {
        top: 2px;
        width: 3%;
        height: 15px;
        position: absolute;
        left: 96%;
        cursor: pointer;
        z-index: 100;
    }
    
    #title_left
    {
        padding: 4px 10px 3px 9px;
        float: left;
        font-size: 10pt;
    }
    
    #content
    {
        background-color: #C0C0C0;
        padding: 4px 10px 3px 9px;
    }
    
    #lowerLine
    {
        width: 100%;
        height: 30px;
        font-size: 14;
        background-color: white;
        position: absolute;
        bottom: 3%;
    }
    
    #btnOk
    {
        position: absolute;
        padding: 4px 10px 3px 9px;
        right: 2%;
        background-color: #C0C0C0;
    }
    
    #tempLine
    {
        cursor: move;
        width: 100%;
        height: 30px;
        font-size: 14;
        background-color: green;
        position: absolute;
        bottom: 3%;
    }
</style>

<script>

    $(document).ready(function () {
        popup('<div><h3>Some Content</h3></div>', 'Choose Your Contacts:', 450, 500)
    });

    function popup(content, title, height, width) {
        var html = '<div id = "popUpWin" style = "width:' + width + 'px; height:' + height + 'px;">';
        html += '<div class="upperLine">';
        html += '<img id = "img_close" src = "fileclose.png" onclick="ClosePopUpWin()" >';
        html += '</div>';
        html += '<div class="title">';
        html += '<span id ="title_left">' + title + '</span>';
        html += '</div>';
        html += '<div id = "content">' + content + '</div>';

        html += '<div id = "lowerLine">';
        html += '<button id = "btnOk" onclick="setContacts()" >OK</button>';
        html += '</div>';
        html += '</div>';

        $('<div></div>').prependTo('body').attr('id', 'shadow');
        $('body').append(html);
        $('#popUpWin').draggable({
            handle: ".upperLine"
        });
    }

    //close popup
    function ClosePopUpWin() {
        $('#popUpWin').fadeOut('fast');
        $('#shadow').remove();
        $('#popUpWin').remove();
    }

    function setContacts() {
        alert("contacts selected");

    }
</script>

问题是我得到了这个错误：

TypeError: $(...).draggable 不是函数

我认为问题是因为库声明了未加载的页面（顺便说一句，相同的代码在 ASP.NET 项目（不是 MVC）中完美运行）。

这是我的解决方案资源管理器的屏幕截图：

可能是什么问题，为什么会出现上述错误？

【问题讨论】：

再次检查是否加载了相应的 js 文件（如果有，请检查控制台是否有 404 错误），如果您使用的是 mvc，并且此视图是否有任何布局页面，则在布局中包含您的 JS 文件
布局页面设置为空
js文件在哪个文件夹？你能告诉我怀疑这是问题的层次结构吗
他们在项目级别
No 将其设置为 null 与评论不同。通过评论它，您可能有机会加载在 ViewStart 页面中设置的布局页面，并且有机会加载不兼容的 js 文件

标签： jquery asp.net asp.net-mvc asp.net-mvc-4

【解决方案1】：

这里有几个可能导致这个问题的情况..

您的 jquery 文件未加载（404 错误）。
您添加了自定义 jquery UI 文件，其中不包含可拖动功能。
您的 jquery UI 文件版本与核心 jquery 文件不兼容。

【讨论】：

如果这是与路径相关的问题，为什么不使用 .. @Url.Content("~/")

【解决方案2】：

IIS 默认不允许 GET 获取根路径 "~/jquery-ui.min.js" 中的静态文件

只需将您的 *.js 文件移动到 "~/Scripts/jquery-ui.min.js"

或

如果你真的想使用根路径（虽然不推荐）

将静态文件处理程序添加到 web.config 中

<configuration>
  <!-- ... -->
  <system.webServer>
    <handlers>
      <!-- .... -->
      <add name="StaticFile"
           path="*.js" verb="*"
           modules="StaticFileModule,DefaultDocumentModule"
           resourceType="Either"
           requireAccess="Read" />
    </handlers>
    <staticContent>
      <mimeMap fileExtension=".*" mimeType="application/octet-stream" />
    </staticContent>
  </system.webServer>
</configuration>

【讨论】：