title: How to create a selectable image in Mvc Asp.Net?
body: <p>I have a view which displays a set of images. I want to be able to select an image and pass its Id back to the controller. How do I make the images selectable using jQuery? I am new to using the MVC framework. </p>
  
  <p>Here is my view,</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Select User&lt;/title&gt;
  
  @model xxxx.xxxx.xxxx.UserViewModel
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="divWrapper"&gt;
      &lt;h1 align="center"&gt;Select a User&lt;/h1&gt;
  
      &lt;br /&gt;
  
      &lt;div class="imageHolder"&gt;
          @for (int i = 0; i &lt; Model.Users.Length; i++)
          {
          &lt;figure class="FigureAlign"&gt;
                  &lt;img class="imageBorder" src="@Url.Content(@System.Web.Configuration.WebConfigurationManager.AppSettings["imagePath"])" width="350" height="350" /&gt; 
          &lt;/figure&gt;
          }
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my UserViewModel,</p>
  
  <pre><code>public class UserViewModel
  {
      public User[] Users { get; }
  
      public UserViewModel(User[] users)
      {
          this.Users = users;
      }
  
      public class User
      {
          public int Id { get; }
          public string Name { get; }
          public string ImagePath { get;}
  
  
          public User(int id,string name, string imagePath)
          {
              this.Id = id;
              this.Name = name;
              this.ImagePath = imagePath;
          }
      }
  }
  </code></pre>