title: Displaying different image using the drop down list (ASP.net MVC)
body: <p>I am currently creating a student database and needing assistance with displaying different image while choosing different options from my drop down list in my login page. The list includes a list of different user types such as students, teacher, parents, principal, admin, etc. </p>
  
  <p>My login.aspx.cs:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using System.Data;
  using System.Data.SqlClient;
  
  
  namespace LoginQuery
  {
      public partial class Login : System.Web.UI.Page
      {
          SqlCommand cmd = new SqlCommand();
          SqlConnection con = new SqlConnection();
          SqlDataAdapter sda = new SqlDataAdapter();
          DataSet ds = new DataSet();
          protected void Page_Load(object sender, EventArgs e)
          {
              con.ConnectionString = "Data Source=CHRIS\\SQLEXPRESS;Initial Catalog=FPSDD;Integrated Security=True";
              con.Open();
          }
  
          protected void BtnLogin_Click(object sender, EventArgs e)
          {
              cmd.CommandText = "SELECT PersonType FROM Person where Username='" + txtUsername.Text + "' and Password='" + txtPassword.Text + "' and PersonType='" + DropDownList3.SelectedValue + "'";
              cmd.Connection = con;
              sda.SelectCommand = cmd;
              sda.Fill(ds, "Person");
              if (ds.Tables[0].Rows.Count &gt; 0)
              {
                  Response.Redirect(url: "http://localhost:56061/");
              }
              else
              {
                  cmd.CommandText = "SELECT PersonType FROM Person where Username='" + txtUsername.Text + "' and Password='" + txtPassword.Text + "'";
                  cmd.Connection = con;
                  sda.SelectCommand = cmd;
                  sda.Fill(ds, "Person");
  
                  if (ds.Tables[0].Rows.Count &gt; 0)
                  {
                      Label1.Text = "Invalid User Type. Please Try Again!";
                  }
                  else
                  {
  
                      Label1.Text = "Invalid User Type, Username or Password. Please Try Again!";
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>My login.aspx:</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="LoginQuery.Login" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style&gt;
          body {font-family: Verdana, Geneva, Tahoma, sans-serif;}
          form {border: 3px solid #f1f1f1;}
          h1 {color: #da2f3f;}
  
          input.textbox[type=text], input.textbox[type=password] {
              width: 100%;
              padding: 12px 20px;
              margin: 8px 0;
              display: inline-block;
              border: 1px solid #ccc;
              box-sizing: border-box;
          }
  
          .mybtn {
              background-color: #da2f3f;
              color: white;
              padding: 14px 20px;
              margin: 8px 0;
              border: none;
              cursor: pointer;
              width: 100%;
          }
  
          button:hover {
              opacity: 0.8;
          }
  
          .imgcontainer {
              text-align: center;
              margin: 24px 0 12px 0;
          }
  
          img.avatar {
              width: 15%;
              border-radius: 50%;
          }
  
          .container {
              padding: 16px;
              margin: 0 auto;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1 style="text-align: center";&gt;Login&lt;/h1&gt;
      &lt;form runat="server"&gt;
          &lt;div class="imgcontainer" style="text-align:center"&gt;
              &lt;img src="Images/student.png" alt="Avatar" class="avatar" /&gt;
          &lt;/div&gt;
  
          &lt;table class="container"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Select User Type: &lt;/td&gt;
                      &lt;td&gt;&amp;nbsp;&lt;asp:Label ID="Button1" runat="server"&gt;&lt;/asp:Label&gt;
                          &lt;asp:DropDownList ID="DropDownList3" runat="server" Height="20px" Width="155px"&gt;
                          &lt;asp:ListItem&gt;Student&lt;/asp:ListItem&gt;
                          &lt;asp:ListItem&gt;Teacher&lt;/asp:ListItem&gt;
                          &lt;asp:ListItem&gt;Counselor&lt;/asp:ListItem&gt;
                          &lt;asp:ListItem&gt;Parent&lt;/asp:ListItem&gt;
                          &lt;asp:ListItem&gt;Principal&lt;/asp:ListItem&gt;
                          &lt;asp:ListItem&gt;Admin&lt;/asp:ListItem&gt;
                          &lt;/asp:DropDownList&gt;
                      &lt;/td&gt;
                      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Username: &lt;/td&gt;
                      &lt;td&gt;&amp;nbsp;&lt;asp:Textbox type="text" ID="txtUsername" placeholder="Enter Username" runat="server"&gt;&lt;/asp:Textbox&gt;&lt;/td&gt;
                      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Password: &lt;/td&gt;
                      &lt;td&gt;&amp;nbsp;&lt;asp:TextBox type="password" ID="txtPassword" placeholder="Enter password" runat="server" TextMode="Password"&gt;&lt;/asp:TextBox&gt;&lt;/td&gt;
                      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                      &lt;td&gt;&amp;nbsp;&lt;asp:Button class="mybtn" runat="server" Text="Login" OnClick="BtnLogin_Click"/&gt;&lt;/td&gt;
                      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
                     &lt;div style="margin-left: auto; margin-right: auto; text-align: center;"&gt;&lt;asp:Label ID="Label1" runat="server" ForeColor="Red"&gt;&lt;/asp:Label&gt;&lt;/div&gt;     
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Ultimately, I'd like it look like the following photo below:
  <a href="https://i.stack.imgur.com/xbU5I.png" rel="nofollow noreferrer">This is the student view when the student in the list item is chosen.</a></p>
  
  <p><a href="https://i.stack.imgur.com/Rmp5q.png" rel="nofollow noreferrer">This is the student view when the teacher in the list item is chosen.</a></p>