Question

I am rendering my data view as below:

@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>
}

I want the user to navigate from current page to another page when user click on image or the div containing the image , so I have handle this with javascript but not getting any prompt after that:

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

Also please let me know how can I navigate to other page using playMovie ? Shall I use query string querystring with document.location or window.location?

If so , how do I pass the querystring from my view to the javascript?

current app is similar to Youtube, when you click on thumbnail it should navigate to another page and start playing the viedeo.

Edit:

MovieDetails class is as below:

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; }
    }

Answer 1

Put your <img> element inside of <a> element, than you can navigate wherever you want by clicking on image.

@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>
}