2015-12-24 4 views
0

Я все еще участвую в MVC, и я хотел найти способ установить фокус на текстовое поле при загрузке представления. Я нашел предложение добавить следующее на страницу _Layout.cshtml, чтобы установить фокус на первое текстовое поле на каждой странице. Однако, похоже, он не работает.JavaScript в MVC 5 не читается?

Я думаю, что это связано с тем, что у меня установлен параметр по умолчанию @ Scripts.Render ("~/bundles/modernizr") и поэтому он игнорирует любой JS-код, установленный непосредственно на странице.

Это первая вещь, которую я попробовал на странице _layout:

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 

    <script type="text/javascript"> 
    $(function() {  
     // Set the focus to the first textbox on every form in the app 
     $("input[type=text]").first().focus(); 
    }); 
    </script> 

</head> 

Затем я попытался создать файл с именем Scripts/app.js и добавил, что в нижней части файла Bundle.Congif.cs. Это тоже не сработало.

public static void RegisterBundles(BundleCollection bundles) 
     { 
      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
         "~/Scripts/jquery-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
         "~/Scripts/jquery.validate*")); 

      // Use the development version of Modernizr to develop with and learn from. Then, when you're 
      // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 
      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
         "~/Scripts/modernizr-*")); 

      bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
         "~/Scripts/bootstrap.js", 
         "~/Scripts/respond.js")); 

      bundles.Add(new StyleBundle("~/Content/css").Include(
         "~/Content/bootstrap.css", 
         "~/Content/site.css")); 

      bundles.Add(new ScriptBundle("~/bundles/appScript").Include(
         "~/Scripts/app.js*")); 
     } 

app.js (не <script> в верхней части файла)

$(function() { 
    // Set the focus to the first textbox on every form in the app 
    $("input[type=text]").first().focus(); 
}); 

Любые предложения?

UPDATE с исправлением

Просто для ясности это, как я получил его на работу с предложениями @Shyju. Я оставил дополнение своих Scripts/app.js в BundleConfig.cs, как я уже говорил выше. Затем на странице Layout.cshtml, где у меня уже были ссылки на связку, я просто добавляю рендеринг в свой добавленный пакет, который я назвал appScipt.

Это в моем Layout.cshtml файла:

<div class="container body-content"> 
     @RenderBody() 
    </div> 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @Scripts.Render("~/bundles/appScript") 
    @RenderSection("scripts", required: false) 

ответ

3

Вам необходимо включить этот новый пакет в конкретной странице/точка зрения, где вы хотите, чтобы сосредоточить внимание на текстовом поле.

@section Scripts 
{ 
    @Scripts.Render("~/bundles/appScript") 
} 

Или вы можете напрямую передать файл вместо того, чтобы использовать связку (если вы не хотите, чтобы воспользоваться преимуществами пакетирования).

@section Scripts 
{ 
    <script src="~/Scripts/app.js"></script> 
} 

И убедитесь, что у вас есть RenderSection в макете, так что он будет включать в себя страницы конкретного сценарий, когда бритва отобразить страницу (с макетом)

<head> 
    <title>@ViewBag.Title</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
<body> 
    <div id="pageContent"> 
     @RenderBody() 
    </div> 
    @Scripts.Render("~/bundles/jquery") 
    @RenderSection("scripts", required: false) 
</body> 
+0

Таким образом, вы хотите сказать, что мне нужно идти маршрут установки app.js в моем BundleConfig.cs, как и я. Затем мне нужно добавить Scripts.Render на каждое представление, которое я хочу настроить фокус? Или я могу установить BundleConfig.cs, а затем разместить RenderSection в верхней части моей страницы макета? – Caverman

+0

Нет необходимости использовать пакет. Вы можете просто напрямую обратиться к файлу js. Использование пакета даст вам преимущества объединения (сохранение полосы пропускания). Вы должны иметь метод '@ RenderSection' только в макете. См. Мой обновленный ответ. – Shyju

+0

Получил это. На данный момент я должен отказаться от работы над этим, но я попробую и дам вам знать, как это происходит. Благодарю. – Caverman

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