ASP.NET MVC中的城市自动完成

时间:2016-11-29 21:33:04

标签: javascript jquery asp.net-mvc autocomplete

我正在使用此插件:http://www.jqueryscript.net/form/City-Autocomplete-Plugin-with-jQuery-Google-Places-API.html在我的应用中实现城市自动填充功能。我创建了一个单独的文件夹,其中包含所需的脚本和html文件,仅供测试,一切正常。但是,当我将此代码放在我的项目中时,它不起作用。我花了很多时间试图解决这个问题,但没有效果。有谁知道解决方案?提前谢谢。

测试文件夹:

enter image description here

索引文件:

enter image description here

效果:

enter image description here

我申请的主管部分:

enter image description here

我申请的正文部分:

enter image description here

编辑:

_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)

在@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")
}

编辑2:

现在,当一切正常时,我对抛光字母有问题。这个改变:

<meta charset="ISO-8859-1"> 

没有帮助。

enter image description here

应该是“Międzyzdroje”。

1 个答案:

答案 0 :(得分:1)

1)解决方法是在您的视图中加入layout,因为您需要使用布局中的脚本。

@using PortalAukcyjny.Models
@model Rejestracja

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

2)你需要包含一个api密钥。

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