在MVC视图中单击Image时如何打开另一个页面

时间:2012-09-03 13:29:06

标签: c# javascript asp.net-mvc razor

我正在渲染我的数据视图,如下所示:

@foreach (var movieDetails in Model)
{
    <div class="sameLine" onMouseOver="focusDiv(this)"  id="c4" onmousewheel="moveFocus(event)" onclick="playMovie(this)">
            <table border ="1" class="contentTable">
                <tr>
                <td align="center">
                <img src = @movieDetails.Thumbnail alt = @movieDetails.Thumbnail class="imgStyle"/>
                <div class="tvShowPanel">
                    @movieDetails.Title
                </div>
                </td>
                </tr>
            </table>
      </div>
}

我希望用户在用户点击图片或包含图片的div时从当前页面导航到另一个页面,所以我用javascript处理这个,但之后没有得到任何提示:

function playMovie(obj) {
    alert("Image Clicked");
}

另外,请告诉我如何使用playMovie导航到其他页面?我应该将查询字符串查询字符串与document.location或window.location?

一起使用

如果是这样,我如何将查询字符串从我的视图传递给javascript?

当前的应用程序类似于Youtube,当您点击缩略图时,它应该导航到另一个页面并开始播放viedeo。

修改

MovieDetails类如下:

public class MovieDetails
    {
        public string Title { get; set; }
        public string Thumbnail { get; set; }
        // public string URI { get; set; }
        public string Description { get; set; }
        public string MovieURI { get; set; }
        // public List<Response> Response { get; set; }
    }

1 个答案:

答案 0 :(得分:3)

<img>元素放在<a>元素中,而不是通过单击图像在任意位置导航。

@foreach (var movieDetails in Model)
{
    <div class="sameLine" onMouseOver="focusDiv(this)"  id="c4" onmousewheel="moveFocus(event)" onclick="playMovie(this)">
            <table border ="1" class="contentTable">
                <tr>
                <td align="center">
                <a href="@movieDetails.MovieURI">
                <img src = @movieDetails.Thumbnail alt = @movieDetails.Thumbnail class="imgStyle"/>
                <a/>
                <div class="tvShowPanel">
                    @movieDetails.Title
                </div>
                </td>
                </tr>
            </table>
      </div>
}