Блог

Главная - Вопросы по программированию - Как добавить методы Javascript в представление MVC, когда jquery загрузится позже

Как добавить методы Javascript в представление MVC, когда jquery загрузится позже

#asp.net-mvc

#asp.net-mvc

Вопрос:

В моем проекте есть много представлений MVC, которые имеют свои собственные специфические функции JS. Я хотел бы добавить эти функции в само представление.

 @{
}
    <div>
    ....
    </div>
<script>
   $(document).ready(function(){
       $("#btn").click(function(){
            doSomething();
       });
   });

   function doSomething(){
   }
</script>

Но проблема в том, что ссылка на jQuery находится в конце body тега и ее нельзя изменить. Поскольку представление загружается раньше, возникает ошибка, что значение $ не определено.

Есть ли какой-либо способ, которым я все еще могу иметь JS внутри представления.

Комментарии:

1. Ваш jquery импортирован в файл макета или в каждое представление? Если он находится в файле макета, вы можете использовать RenderSection если он находится в том же представлении, просто поместите локальный код после импорта jquery.

2. @PriyankPanchal jQuery присутствует в макете. Вот почему не могу изменить. Не могли бы вы, пожалуйста, привести пример в этом контексте для загрузки JS с использованием RenderSection. Я новичок в MVC. Спасибо.

Ответ №1:

RenderSection это как заполнитель для HTML. Это гарантирует, что любой написанный вами HTML всегда будет отображаться в том конкретном месте, где он определен в макете.

Вы можете использовать RenderSection в своем макете, как показано ниже:

 <body>
...
...
<script src="jquery.min.js"></script>
@RenderSection("Scripts", required: false)
</body>

Затем в ваших представлениях, где вы используете этот макет, вы можете добавить @section , как показано ниже:

 @{
    Layout="_layout.cshtml"
}
<div>
...
...
</div>
@section Scripts {
    <script type="text/javascript">
        $(document).ready(function(){
           $("#btn").click(function(){
                doSomething();
           });
        });

        function doSomething(){
        }
    </script>
}

Для получения дополнительной информации, пожалуйста, ознакомьтесь с разделами