6

Я столкнулся с проблемой загрузки jQuery в проекте ASP.NET MVC 5. Я пытаюсь загрузить частичный вид, так что я использовалПроблема с частичным представлением - jQuery not defined

@ Html.Action ("GetView", "Начало")

Частичное представление содержит некоторые функции JQuery. Когда он загружен, он показывает jQuery не определенное сообщение, но jQuery работает на главной странице.

Так что я попробовал два метода, чтобы загрузить частичный вид, и нет никаких проблем с JQuery с помощью этих методов

@Html.Partial("_viewname") 

@Ajax.BeginForm() 

Главная Контроллер

public class HomeController : Controller 
    { 

     public ActionResult Index() 
     { 
      return View(); 
     } 

     public ActionResult GetView(string id = "") 
     { 
      return PartialView("_ViewName"); 

     } 
    } 

_Layout.cshtml

<!DOCTYPE html> 
<html> 
<head> 
    <title>@ViewBag.Title</title> 
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 
    @Scripts.Render("~/bundles/modernizr") 
    @RenderSection("Head", false) 
</head> 
<body> 
    <section > 
     <div> 
      @RenderBody() 
     </div> 

     <div> 
      @RenderSection("Sidebar", false) 
     </div> 

    </section> 

    <!-- jQuery --> 
    @Scripts.Render("~/bundles/jquery") 
    @RenderSection("Scripts", false) 
</body> 

Родитель Page Index.cshtml

@{ 
    ViewBag.Title = "Admin"; 
} 

<div id="main_content"> 
    @Html.Action("GetView", "Packages") 
</div> 

Частичный вид _view.cshtml

<div class="row"> 
    <div class="col-sm-12"> 
     <select> 
      <option>1</option> 
      <option>2</option> 
     </select> 
    </div> 
</div> 


<script type="text/javascript"> 

    $(document).ready(function() { 
     $("select").addClass("form-control"); 
    }); 

</script> 

Я думаю, что есть некоторые JQuery загрузки вопрос, но я не понимаю, почему это происходит на конкретных действиях.

Пожалуйста, предложите мне решение этой проблемы.

+1

Где находится страница, содержащая рендеринг частичного представления? –

+0

Можете ли вы получить частичный вид и родительский код? –

+0

Включите скрипты из вашего частичного –

ответ

13

Ваши взгляды (а не частичные) должны содержать код в блоке @section Scripts. Как вы указали, @section s не работают в частичных представлениях.

Убедитесь, что ваш код родительского вида в один, как это:

@section Scripts{ 
    <script> 
     // DOM ready handler if needed 
     $(function(){ 
       // Your Javascript/jQuery code here 
     }); 
    </script> 
} 

Директива @section рассказывает вид построитель где вставить этот блок в главной странице. С Javascript вам нужно, чтобы он всегда находился в разделе «Сценарии», или он будет отображаться в строке, где он был объявлен.

Альтернативой является перемещение включения JQuery раньше RenderBody() вызовов в главной странице:

<!DOCTYPE html> 
<html> 
<head> 
    <title>@ViewBag.Title</title> 
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 
    @Scripts.Render("~/bundles/modernizr") 
    @RenderSection("Head", false) 
    <!-- jQuery --> 
    @Scripts.Render("~/bundles/jquery") 
</head> 
<body> 
    <section > 
     <div> 
      @RenderBody() 
     </div> 

     <div> 
      @RenderSection("Sidebar", false) 
     </div> 

    </section> 

    @RenderSection("Scripts", false) 
</body> 

Кэширование браузера, связанные с использованием пучков означает только очень первая загрузка страницы будет чуть-чуть неэффективна на вашем сайт.

+0

Я думаю, что sesion не работает в частичных представлениях –

+0

Да, я тоже думаю использовать JS в голове, но я пытаюсь найти решение, если оно доступно! –

+1

@AskQuestion: Вы правы (забыли об этом). Имейте обновленный ответ. Вам нужно переместить код в представление, содержащее частичный рендеринг, или переместить jQuery вверх (оба варианта выделены). –

0

Если вы должны запускать скрипты на частичном представлении, как в случае, когда динамически созданный контент возвращается при вызове частичных представлений из вызова AJAX, вы должны обнаружить, что проблема, описанная в вопросе, на самом деле происходит только на исходном родительском загрузка страницы. Если это так, вы можете обойти эту проблему на NOT Загрузка частичного на основной вид. Вместо этого вы можете загрузить частичный вид, используя JQuery ПОСЛЕ начальной загрузки страницы.

Таким образом, вместо того, чтобы делать это инлайн с HTML на первичном зрения:

@Html.Partial("YourCoolDynamicDashboard") 

ли это в .js файле или в яваскрипта теге вашего основного вида по:

$(document).ready(function() { 
     $.get("/YourController/YourCoolDynamicDashboard", [<... data goes here...>], function (result) { 
      $("#YourDashboardContainer").html(result);  
     }); 
}); 

Эта работа вокруг позволит вам запустить код JQuery на стороне клиента как на основном представлении AND, так и на частичном представлении.