Displaying attribute of ViewBag depending on the selected item from DropDownList and posting the ID

I have used the answer to this question successfully but do not know how to also have the id of the selected item to post to the controller.

There is a comment made by @agarwaen implying that it is possible, but he doesn't say how.

I want to display the name in the dropdown, fill a textbox with the points associated to that item and post the id of the selected item to the controller.

I can currently do the first two, but it is posting the points back to the controller, not the id.

The ViewBag is being filled like this:

ViewBag.ActivityID = new SelectList(allowedActivities, "Points", "Name", "ActivityID");

*allowedActivities is the name of the list that holds the activity objects (which each have a name, id, and points)

And the javascript being used is:

$(document).ready(function () {
  $("#activityName").change(function () {
  var $this = $(this);
  var selectedValue = $this.val();
  $("#activityPoints").val(selectedValue);
  });
});

The razor is:

<div class="form-group">
   @Html.LabelFor(model => model.ActivityID, "Activity Name", htmlAttributes: new { @class = "control-label col-md-2" })
   <div class="col-md-10">
      @Html.DropDownList("ActivityID", null, "----Select An Activity----", htmlAttributes: new { @class = "form-control", @id = "activityName"})
   </div>
</div>

<div class="form-group">
   @Html.LabelFor(model => model.Activity.CPDTPoints, "CPTD Points", htmlAttributes: new { @class = "control-label col-md-2" })
   <div class="col-md-10">
      @Html.TextBoxFor(model => model.Activity.CPDTPoints, new { disabled = "disabled", @readonly = "readonly", @class = "form-control", @id = "activityPoints" })
    </div>
</div>

This renders the following HTML:

<div class="col-md-10">
  <select class="form-control valid" id="activityName" name="ActivityID">
     <option value="">----Select An Activity----</option>
     <option value="3">Reading Educational Material</option>
     <option value="2">Electronic Media Activities</option>
     <option value="1">Attending Meetings</option>
     <option value="1">Attending Half Day Conferences/ Workshops</option>
     <option value="2">Mentoring and Coaching</option>
     <option value="10">Secondment for Six Months</option>
     <option value="3">Response to Developmental Needs</option>
     <option value="6">Participating in Book Clubs</option>
     <option value="1">Organising Workshop Activities</option>
     <option value="2">Research and Developing</option>
     <option value="3">Kick-Starting/Leading Project</option>
     <option value="3">Being and External Examiner</option>
  </select>
</div>

So this is giving each option a value of the points, I need to be able to access both the points and the ID.

I want to populate the textbox with the points from the selected item in the dropdown (again, this is workings) but post the id to the controller (it is currently posting the points).

Solution

I ended up using the Name (i.e. the text in the dropdown) and posting that to the server and using it to find the activity (the name is unique). I used this to get the text of the selected dropdown. I kept the points as the value for each item, even though it is technically wrong.

So I kept all of the code used above and just modified the C# to look for the activity based on name instead of the id. I will need to change the instance where I was doing a form submit into an AJAX post so that it works everywhere.