Внедрение javascript в ASP.NET MVC 5

@kadet_of_viti · Регистрация: 19.12.2013

Author24 — интернет-сервис помощи студентам

Добрый день. Начал писать сайт с помощью ASP Web Form, но в процесе решил перейти на ASP MVC 5 (пишу и учусь одновременно)
В ASP Web Form сделал так

C#

void CreateMap()
{
ClientScriptManager cs = Page.ClientScript;
System.Text.StringBuilder csText = new System.Text.StringBuilder();
csText.Append("<script type = \"text/javascript\"> function initialize() { var myOptions = { zoom: 14,center: new google.maps.LatLng(46.479743, 30.738273),mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map(document.getElementById(\"map\"), myOptions);}</script>");
cs.RegisterClientScriptBlock(this.GetType(), "onload", csText.ToString());
}

Потом в Page_Load вызываю функцию.
А у предсталении так:

C#

1
2
3

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxdVbz0fvcZdFhLcXiOUVWVNoaotJp3G4&callback=initMap"></script>
<body  onload="initialize()">
    <div id="map"  style="width: 80%; height: 600px; float: left;"></div>

Все работает

А от у ASP MVC 5 этот скрипт не работает. Делаю так
в _Layout прописываю:

C#

    <body onload="initialize()">
    @RenderSection("script", required: true)
    @RenderSection("Scripts", required: true)
    
    <div>
        @RenderBody()
    </div>
</body>

А вот index.cshtml

C#

@section Scripts {
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxdVbz0fvcZdFhLcXiOUVWVNoaotJp3G4&callback=initMap" type="text/javascript"></script>
    <script type="text/javascript">
function initialize() {var myOptions = {zoom: 14,center: new google.maps.LatLng(46.479743, 30.738273),mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById("map"), myOptions);}
    </script>
}
<div id="map"></div>

Подскажите в чем пролема? Где ошибка? Или может необходимо вообще использовать другой подход. Спасибо.

@EveKS · 11.10.2017, 14:47

Сообщение от kadet_of_viti

callback=initMap

Сообщение от kadet_of_viti

function initialize()

Код

initMap != initialize => true;

@kadet_of_viti · 11.10.2017, 14:53 **[ТС]**

EveKS, извини, но я новичок. Не понимаю что необходимо сделать. Можешь обяснить для того кто в танке. Не доходит. Спасибо.

@EveKS · 11.10.2017, 14:55

Поменять име функции function initialize() на initMap или наоборот, в строке подключения.

<body onload="initialize()"> initialize - не нужно.

@kadet_of_viti · 11.10.2017, 16:04 **[ТС]**

EveKS, сделал то что ты посоветовал, но всё также в ASP Web Form работает, а в ASP MVC 5 нет. может ещё что-то упустил?

@EveKS · 11.10.2017, 16:38

Сообщение от kadet_of_viti

Javascript

1	<body onload="initialize()"> @RenderSection("script", required: true) @RenderSection("Scripts", required: true) <div> @RenderBody() </div> </body>

Javascript

<body onload="initialize()"> 
<div> @RenderBody() </div>
 
@RenderSection("script", required: true)
@RenderSection("Scripts", required: true)  </body>

Затем

C#

<div id="map"></div>
 
@section Scripts {
 
    <script type="text/javascript">
function initMap() {var myOptions = {zoom: 14,center: new google.maps.LatLng(46.479743, 30.738273),mapTypeId: google.maps.MapTypeId.ROADMAP};var map = new google.maps.Map(document.getElementById("map"), myOptions);}
    </script>
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxdVbz0fvcZdFhLcXiOUVWVNoaotJp3G4&callback=initMap" type="text/javascript"></script>
 
}

@kadet_of_viti · 11.10.2017, 16:49 **[ТС]**

Всё разобрался. Я так понял что эта строчка

C#

1	<script type="text/javascript" async="async" defer="defer" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxdVbz0fvcZdFhLcXiOUVWVNoaotJp3G4&callback=initMap"></script>

должна быть в теге head. а сам скрипт в body.
Вот что у меня. _Layout:

C#

<!DOCTYPE html>
<html>
<head>
    @RenderSection("script1", required: true)
</head>
<body>
    @RenderSection("script2", required: true)
    <div>
        @RenderBody()
    </div>
</body>

index.cshtml:

C#

@section script1 {
    <script type="text/javascript"  async="async" defer="defer" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxdVbz0fvcZdFhLcXiOUVWVNoaotJp3G4&callback=initMap"></script>
}
@section script2 {
    <script type="text/javascript">
        function initMap() {
            var uluru = { lat: -25.363, lng: 131.044 };
 
            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 4,
                center: uluru
            });
        }
    </script>
}

И ОБЯЗАТЕЛЛЬНО задайте размер карты
<div id="map" style="width: 80%; height: 600px; float: left;"></div>
Так у меня работает.

@EveKS · 11.10.2017, 16:52

Сообщение от kadet_of_viti

Всё разобрался. Я так понял что эта строчка

Он должен быть в footer, но вызываться перед скриптом google

@EveKS 601 / 485 / 185 Регистрация: 19.04.2016 Сообщений: 1,885
	11.10.2017, 14:47	2
	Сообщение от kadet_of_viti callback=initMap Сообщение от kadet_of_viti function initialize() Код initMap != initialize => true; 0

@kadet_of_viti 0 / 0 / 1 Регистрация: 19.12.2013 Сообщений: 64
	11.10.2017, 14:53 [ТС]	3
	EveKS, извини, но я новичок. Не понимаю что необходимо сделать. Можешь обяснить для того кто в танке. Не доходит. Спасибо. 0

@EveKS 601 / 485 / 185 Регистрация: 19.04.2016 Сообщений: 1,885
	11.10.2017, 14:55	4
	Поменять име функции function initialize() на initMap или наоборот, в строке подключения. `<body onload="initialize()">` initialize - не нужно. 0

@kadet_of_viti 0 / 0 / 1 Регистрация: 19.12.2013 Сообщений: 64
	11.10.2017, 16:04 [ТС]	5
	EveKS, сделал то что ты посоветовал, но всё также в ASP Web Form работает, а в ASP MVC 5 нет. может ещё что-то упустил? 0

@EveKS 601 / 485 / 185 Регистрация: 19.04.2016 Сообщений: 1,885
	11.10.2017, 16:52	8
	Сообщение от kadet_of_viti Всё разобрался. Я так понял что эта строчка Он должен быть в footer, но вызываться перед скриптом google 0