在 JavaScript 中使用 Razor

470

有没有可能或者有没有解决方法能够在视图(cshtml)中的JavaScript中使用Razor语法?

我正在尝试向谷歌地图添加标记...例如,我尝试了这个代码,但是我得到了很多编译错误:

<script type="text/javascript">

    // Some JavaScript code here to display map, etc.

    // Now add markers
    @foreach (var item in Model) {

        var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude));
        var title = '@(Model.Title)';
        var description = '@(Model.Description)';
        var contentString = '<h3>' + title + '</h3>' + '<p>' + description + '</p>'

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: title,
            map: map,
            draggable: false
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }
</script>

3
关于 @: 语法,我有更新,你可能会感兴趣。 - StriplingWarrior
任何考虑这样做的人,至少要将数据放在单独的脚本标签中,该标签只定义一些JSON,然后在JS中使用。前端耦合的JS在我多次遇到的情况下都是麻烦的工作。如果不必要,请勿使用代码编写代码。相反,传递数据。 - Erik Reppen
13个回答

4

我终于找到了解决方案(*.vbhtml):

function razorsyntax() {
    /* Double */
    @(MvcHtmlString.Create("var szam =" & mydoublevariable & ";"))
    alert(szam);

    /* String */
    var str = '@stringvariable';
    alert(str);
}

4

之前的解决方案都不能正常工作...我尝试了所有方法,但没有得到预期的结果...最后我发现代码中有一些错误...下面是完整的代码。

<script type="text/javascript">

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(23.00, 90.00),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    @foreach (var item in Model)
    {
        <text>
            var markerlatLng = new google.maps.LatLng(@(item.LATITUDE), @(item.LONGITUDE));
            var title = '@(item.EMP_ID)';
            var description = '@(item.TIME)';
            var contentString = '<h3>' + "Employee " +title+ " was here at "+description+ '</h3>' + '<p>'+" "+ '</p>'

            var infowindow = new google.maps.InfoWindow({
                // content: contentString
            });

            var marker = new google.maps.Marker({
                position: markerlatLng,
                title: title,
                map: map,
                draggable: false,
                content: contentString
            });

            google.maps.event.addListener(marker, 'click', (function (marker) {
                return function () {
                    infowindow.setContent(marker.content);
                    infowindow.open(map, marker);
                }
            })(marker));
        </text>
    }
</script>

0

像我这样没有可用的Json.Encode的人可以尝试这个。

<script type="text/javascript">
    var model = @Html.Raw(Json.Serialize(Model))
</script>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接