Проблемы с функцией jQuery в моем проекте ASP.NET MVC4

У меня есть проект ASP.NET MVC4. Я создаю модальное всплывающее окно, и я использую библиотеку jQuery, чтобы сделать окно перетаскиваемым.Проблемы с функцией jQuery в моем проекте ASP.NET MVC4

Вот код:

@{ 
    //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:. $ (...) перетаскиваемым не является функцией

Я думаю, что проблема связана с тем, что библиотека объявила страницу не загруженной (кстати, тот же самый код отлично работает в проекте ASP.NET (не MVC)).

Вот скриншот моего решения проводника:

enter image description here

Любая идея, что может быть проблема и почему я получаю ошибку выше?

Заранее спасибо.

источник

2014-12-29 Michael

Двойной проверить, загружены ли соответствующие файлы js (проверьте консоль на 404 ошибки, если они есть), также если вы используете mvc, и если есть какая-либо страница макета для этого представления, включите в нее файл JS в макете – Vivekh

. Страница макета установлена в значение null – Michael

js-файлы находятся в папке? Можете ли вы рассказать об иерархии, я подозреваю, что это проблема –

Вот несколько случаев, которые могут вызвать эту проблему ..

Ваши JQuery файлы не будут загружены (ошибка 404).
Вы добавили пользовательский пользовательский файл jquery, в котором функция перетаскивания не включена.
Ваша версия файла пользовательского интерфейса jquery несовместима с файлом ядра jquery.

источник

2014-12-29 07:51:09

и почему бы не использовать .. @ Url.Content ("~/<ваш путь к файлу jquery>"), если это связанная с путями проблема –

IIS не позволит ПОЛУЧИТЬ для статического файла в корневом каталоге "~/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>

источник

2014-12-29 08:13:29 aifarfa

Проблемы с функцией jQuery в моем проекте ASP.NET MVC4

ответ

Смежные вопросы