Question

我遇到了JavaScript代码问题

$.getJSON('@Url.Action("GetData", "Home")', function (data) {
        $.each(data, function (i, item) {
            var marker = new google.maps.Marker({
                'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
                'map': map,
                'title': item.PlaceName
            });

            marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png')

            var infowindow = new google.maps.InfoWindow({

                content: '@Html.ActionLink("Details","Details",new { id= '+item.Id+'})'

            });

如何使用Id将@Html.ActionLink传递给控制器？

在控制器中，我有一个Post方法的POST版本。如何在此方法中使用ActionLink传递Id？在视图中我尝试使用ViewBag但没有显示任何内容

public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(int id)
    {
        ViewBag.id = id;
        return RedirectToAction("Index", "Home");
    }

编辑：我的观点代码：

@{
ViewBag.Title = "Home Page";
}

Id : @ViewBag.id

<script src="http://maps.google.com/maps/api/js?  key=**********" type="text/javascript"></script>

<style>
.stationInfo {
    height: 150px;
    width: 250px;
}
</style>

<div id="canvas" style="height: 600px; width:600px;"></div>


@section scripts {
<script type="text/javascript">

    $(document).ready(function () {
        GetMap();
    });

    function GetMap() {

        google.maps.visualRefresh = true;

        var Moscow = new google.maps.LatLng(55.752622, 37.617567);

        var mapOptions = {
            zoom: 15,
            center: Moscow,
            mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
        };

        var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);

        var myLatlng = new google.maps.LatLng(55.752622, 37.617567);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Name'
        });

        marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png')

        $.getJSON('@Url.Action("GetData", "Home")', function (data) {керы
            $.each(data, function (i, item) {
                var marker = new google.maps.Marker({
                    'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
                    'map': map,
                    'title': item.PlaceName
                });

                marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png')

                var infowindow = new google.maps.InfoWindow({

                    content:
                        '<form action="@Url.Action("Index", "Home")" method="POST">' +
            '<input type="hidden" name="id"/>' +
            '<a class="f" href="#" data-id="' + item.Id + '">Details</a></form>'
                });
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map, marker);
                });
            })
        });
        $(function () {
            $(document).on("click", "a.f", function (e) {
                e.preventDefault();
                var v = $(this).data("id");
                var f = $(this).closest("form");
                f.find("[name='id']").val(v);
                f.submit();
            });
        });

    }       
</script>
}

但是当重定向ViewBag为空时点击链接时（

Answer 1

你无法将param从javascript传递给razor。但是你可以尝试在生成链接后将id注入链接：

var link = '@Html.Action("Details","Details")'+'/'+item.id;

var infowindow = new google.maps.InfoWindow({

    content: '<a href="'+link+'">details</a>'

});

更新的问题尝试这样做：

[HttpPost]
public ActionResult Index(int id)
{
    ViewBag.id = id;
    return Index();
}

Answer 2

它不起作用，因为你的循环在客户端执行，而你的服务器代码（Html.ActionLink调用）在服务器之前执行。

你可以做的是，使用Url.Action方法生成没有路由值的路径，并将其与动态变量一起追加。

这应该有用。

var infowindow = new google.maps.InfoWindow({
     content: '<a href="@Url.Action("Details", "Home")?id=' + item.Id + '">Details</a>'
});

将Home替换为您拥有Details操作方法的控制器名称。

编辑：根据评论

在控制器中，我有一个Post方法的POST版本。我如何能传递Id？

如果您不想在GET请求中传递查询字符串中的值，但更喜欢表单帖子，则可以提交表单。使用隐藏输入为每个项构建表单元素，其中name属性值设置为"Id"（与操作方法参数名称相同）。您可以将Id值保存在html5数据属性中，稍后您将阅读该属性。

 var infowindow = new google.maps.InfoWindow({
        content: '<form action="@Url.Action("Index", "Home")" method="POST">' +
            '<input type="hidden" name="id"/>' +
            '<a class="f" href="#" data-id="' + item.Id + '">Details</a></form>'
    });

现在我们需要一些javascript来劫持正常的链接点击行为。当用户点击链接时，我们需要读取我们设置的数据属性值（Id值）并将其设置为隐藏的输入字段值并提交表单。

$(function(){

            $(document).on("click","a.f",function(e) {
                        e.preventDefault();
                        var v = $(this).data("id");
                        var f = $(this).closest("form");
                        f.find("[name='id']").val(v);
                        f.submit();
             });
});

google.maps.InfoWindow中的MVC ActionLink

2 个答案: