Artur Artur - 6 days ago 6
Javascript Question

Cities autocomplete in ASP.NET MVC

I'm using this plugin: http://www.jqueryscript.net/form/City-Autocomplete-Plugin-with-jQuery-Google-Places-API.html to achieve cities autocomplete in my application. I made a separate folder with needed scripts and html file just for test and everything works fine. However, when I place this code in my project it doesn't work. I spent a lot of time trying to solve this problem but with no effect. Does anyone know the solution? Thanks in advance.

Test folder:

enter image description here

Index file:

enter image description here

Effect:

enter image description here

Head section of my application:

enter image description here

Body section of my application:

enter image description here

Edit:

_Layout code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - something</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="/Content/style.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="/Content/city-autocomplete.css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&language=en"></script>
<script src="/Scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.city-autocomplete.js" type="text/javascript"></script>

</head>
<body>



<div class="container body-content">

<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 logo-left">
<div class="tymczasowe-logo">Portal aukcyjny</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 logo-right">
<div class="jumbotron jumbotron-logo-right">
<div class="btn-group btn-group-justified">
@Html.ActionLink("O nas", "WyswietlOnas", "Zakladki", new { area = "" }, new { @class = "btn btn-default" })
@Html.ActionLink("Regulamin", "WyswietlRegulamin", "Zakladki", new { area = "" }, new { @class = "btn btn-default" })
@Html.ActionLink("Kontakt", "WyswietlKontakt", "Zakladki", new { area = "" }, new { @class = "btn btn-default" })
</div>
</div>
</div>
</div>

<div class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("something", "something", "something")</li>
<li>@Html.ActionLink("something", "something", "something")</li>

</ul>

@Html.Partial("_LoginPartial")
</div>
</div>
</div>

@RenderBody()

</div>

<footer>
<hr />
<p>&copy; @DateTime.Now.Year - something</p>
</footer>

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





Content of file rendered in @RenderBody:

@using PortalAukcyjny.Models
@model Rejestracja


@{
ViewBag.Title = "something";
}

@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<legend>something</legend>
@Html.AntiForgeryToken()
@if (ViewBag.Message != null)
{
<div style="border:solid 1px green">
@ViewBag.Message
</div>
}


<div class="editor-label">
@Html.LabelFor(model => model.something.something)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.something.something)
@Html.ValidationMessageFor(model => model.somethingy.something)
</div>



<input id="city" name="city" autocomplete="off" data-country="us" />

<script>
$('input#city').cityAutocomplete();
</script>


<div class="editor-label">
@Html.LabelFor(m => m.something)
</div>
<div class="editor-field">
@Html.DropDownListFor(m => m.something, Model.something)
@Html.ValidationMessageFor(m => m.something)
</div>



<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}




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

Answer

1)Solution is to include your layout in your view, bacause you need to use scripts from layout.

@using PortalAukcyjny.Models
@model Rejestracja

@{
   Layout="your_layout_path";
   ViewBag.Title = "something";
}

2) You need to include an api key.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
Comments