Question

在我的asp.net mvc5应用程序中，我有这个局部视图：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4&libraries=places&callback=initAutocomplete" async defer></script>

<script type="text/javascript">
    var placeSearch, autocomplete;
    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
    };

    function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
             (document.getElementById('autocomplete')),
            { types: ['geocode'] });

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
    }

    function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
            document.getElementById(component).value = '';
            document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) {
                var val = place.address_components[i][componentForm[addressType]];
                document.getElementById(addressType).value = val;
            }
        }
    }

    function geolocate() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function (position) {
                var geolocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };

                var circle = new google.maps.Circle({
                    center: geolocation,
                    radius: position.coords.accuracy
                });
                autocomplete.setBounds(circle.getBounds());
            });
        }
    }
</script>

<html>
<body>
    <p><input type="text" onfocus="geolocate()" placeholder="Taper l'adresse" id="autocomplete" name="nomlieu_adress" class="fiche" style="width:500px"></p>

    <p>
        <label style="width:90px">Avenue</label><input type="text" id="street_number" name="avenue_adress" style="width:160px; " class="fiche" />
        <label style="width:90px">Rue</label><input type="text" id="route" name="rue_adress" style="width:157px" class="fiche" />
    </p>

    <p> <label style="width:90px">Ville(*)</label><input type="text" id="locality" name="ville_adress" style="width:410px" class="fiche" required /> </p>

    <p>
        <label style="width:90px">Etat(*)</label><input type="text" id="administrative_area_level_1" name="etat_adress" style="width:160px" class="fiche" required />
        <label style="width:90px">Code Postal(*)</label><input type="text" id="postal_code" name="code_postal_adress" style="width:157px" class="fiche" required />
    </p>

    <p> <label style="width:90px">Pays(*)</label><input type="text" id="country" name="pays_adress" style="width:410px" class="fiche" required /></p>


</body>
</html>

使用google map api。我需要在我的视图中多次渲染此局部视图例如像

  <div class="tab-content">

   <div class="tab-pane active" id="tab_beginplace"> @Html.Partial("_GeoApi")
   </div>

    <div class="tab-pane active" id="tab_endplace"> @Html.Partial("_GeoApi")
   </div>
 </div>

我得到了这个例外：

您已在此页面上多次添加Google Maps API。这可能会导致意外错误

自第二次部分视图渲染以来，自动完成功能无效。

所以我需要知道如何解决这个问题？

Answer 1

您的所有脚本只能包含一次。这意味着您不能将它们作为要在同一页面上多次使用的部分视图的一部分。您必须将脚本部分放入单独的.js文件中并渲染一次。

此外，您的部分视图不应包含<html>和<body>标记，它应该是部分视图，而不是整个视图。您不希望最终代码如下所示：

<html>
 ... main page code ...
   <html>...partial view code 1....</html>
   <html>...partial view code 2....</html>
   <html>...partial view code 3....</html>
</html>

这不是有效的HTML文档。

最后，你的部分视图不应该使用具有静态id属性的元素，因为如果你在页面上渲染两次，你的代码将有多个具有相同id的元素，这应该是唯一的......

<强>更新为了用动态ID替换静态ID，您将使用一个模型，在该模型中传递所需的信息。所以，而不是

 @Html.Partial("_GeoApi")

你会写

 @Html.Partial("_GeoApi", model)

然后在部分视图代码中，您将从

开始

 @model MyModel

，传递的模型将是MyModel类的实例。

Google将api映射为asp.net mvc5应用程序中的部分视图

1 个答案: