title: How to populate textfields from a dropdown in MVC 4 with razor and c#?
body: <p>I am working on a "Challenge Engine" web application that allows users to create challenges and compete with each other.  I am using MVC 4 C#, razor syntax.</p>
  
  <p>I am trying to make a page where the user can either create a challenge, or edit the details of a challenge he has already created. The way I want this to work is to have a drop-down menu of the challenges a user owns, a submit button, and two text fields below.  When a challenge is selected from the drop-down, the two text fields should populate with the challenge name and the challenge description.  I am not sure how to accomplish this, although I think it may involve somehow calling additional code that needs to be put into the controller (although maybe not).  It may also require JavaScript, jQuery, and/or AJAX, but my understanding of these technologies is still somewhat shaky.  Can anyone help, or point me in the right direction?  I have Googled this extensively the past couple of days and searched stack overflow, but couldn't find anyone doing quite what I'm trying to do.
  Below is the relevant code I have so far.</p>
  
  <p>The Challenge Model:</p>
  
  <pre><code>public class ChallengeModel
  {
      public int ChallengeId { get; set; }
      public String Name { get; set; }
      public String Description { get; set; }
  }
  </code></pre>
  
  <p>The Challenge Controller:</p>
  
  <pre><code>public class ChallengeController
  public ActionResult Index()
      //Note: UserService and Challenge Service are part of the service layer;
      //They simply encapsulate the methods in the various DAOs.
      {
          ViewBag.CurrentUserName = WebSecurity.CurrentUserName;
          ViewBag.CurrentUser = UserService.GetUserByName(ViewBag.CurrentUserName);
          ViewBag.OwnedChallenges =
              ChallengeService.GetActiveChallengesByParticipant(CurrentUser);
  
          return View();
      }
  </code></pre>
  
  <p>The Challenge View (index.cshtml):</p>
  
  <pre><code>&lt;div class="challengeOwner"&gt;
  &lt;em&gt;Challenges you own:&lt;/em&gt;
  &lt;select id="selectOwnedChallenges"&gt;
  
      &lt;option&gt;Create new challenge...&lt;/option&gt;
  @foreach (ChallengeModel Challenge in ViewBag.OwnedChallenges)
  {
      &lt;option id="@Challenge.ChallengeId"
      value="@Challenge.ChallengeId"
      onclick="  [[[INSERT CODE HERE THAT WILL POPULATE TEXT FIELDS
      WITH CHALLENGE NAME AND DESCRIPTION]]]  "&gt;@Challenge.Name&lt;/option&gt;
  }
  
  
  &lt;/select&gt;
  &lt;input id="ChallengeName" type="text" name="Name"
      value="@selectedChallenge.Name"/&gt;&lt;br /&gt;
  &lt;input id="ChallengeDescription" type="text" name="Description"
      value="@selectedChallenge.Description"/&gt;
  &lt;input id="updateChallenge" type="button" value="Submit" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, I thought I would use a variable @selectedChallenge to represent the challenge selected in the drop-down.  I don't know how to set it, and I'm thinking this is probably not how it should be done, but I left it there for now so you can see my intention.  Any help would be greatly appreciated.
  Thanks in advance!</p>