Question

我有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）中完美运行）。

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

enter image description here

知道可能出现什么问题以及为什么我会收到上述错误？

提前谢谢。

Answer 1

以下几种情况可能导致此问题。

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

Answer 2

默认情况下，IIS不允许GET用于根路径"~/jquery-ui.min.js"中的静态文件

将您的* .js文件移至"~/Scripts/jquery-ui.min.js"

OR

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

将静态文件处理程序添加到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>

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

2 个答案: