 <p>There are many ways. Check this out:</p> <pre><code>&lt;img id="theImage" src="" /&gt; &lt;ul&gt; @foreach (var i in Model.Picture) { &lt;li&gt;&lt;a href="#" data-image="@i.picturePath" class="change-image"&gt;@i.picturePath&lt;/a&gt;&lt;/li&gt; } &lt;/ul&gt; &lt;script type="text/javascript"&gt; $(function () { //Click event for the image links $('.change-image').click(function (e) { e.preventDefault(); e.stopPropagation(); $('#theImage').attr('src', $(this).data('image')); }); //Display the first link $('#theImage').attr('src', $('ul li:first-child a.change-image').data('image')); }); &lt;/script&gt; </code></pre> <p>Notice that I'm using jQuery.</p> <p>Please let me know if this helps.</p>