Question

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.

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.

The Challenge Model:

public class ChallengeModel
{
    public int ChallengeId { get; set; }
    public String Name { get; set; }
    public String Description { get; set; }
}

The Challenge Controller:

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

The Challenge View (index.cshtml):

<div class="challengeOwner">
<em>Challenges you own:</em>
<select id="selectOwnedChallenges">

    <option>Create new challenge...</option>
@foreach (ChallengeModel Challenge in ViewBag.OwnedChallenges)
{
    <option id="@Challenge.ChallengeId"
    value="@Challenge.ChallengeId"
    onclick="  [[[INSERT CODE HERE THAT WILL POPULATE TEXT FIELDS
    WITH CHALLENGE NAME AND DESCRIPTION]]]  ">@Challenge.Name</option>
}


</select>
<input id="ChallengeName" type="text" name="Name"
    value="@selectedChallenge.Name"/><br />
<input id="ChallengeDescription" type="text" name="Description"
    value="@selectedChallenge.Description"/>
<input id="updateChallenge" type="button" value="Submit" />
</div>

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!

Answer 1

You can use data attributes to hold the name and description of each option.

<option value="@Challenge.ChallengeId"
        data-name="@Challenge.Name"
        data-description="@Challenge.Description">
        @Challenge.Name</option>

Then use jQuery to update the input fields when the select changes:

// this runs when the DOM is finished loading http://api.jquery.com/ready/
$(document).ready(function() {

  // wire up the change handler http://api.jquery.com/change/
  $("#selectOwnedChallenges").change(function() {

    // get the selected option's data values http://api.jquery.com/data/
    var data = $("#selectOwnedChallenges option:selected").data();

    // set the inputs
    $("#ChallengeName").val(data.name);
    $("#ChallengeDescription").val(data.description);
  });
});