2

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).

Community
  • 1
  • 1
ebots
  • 19
  • 3
  • `but post the id to the controller (it is currently posting the points)`. id of what? input element id? – Dandy Sep 08 '15 at 14:43
  • The activityID. That is, the ID of the item that is selected. – ebots Sep 08 '15 at 14:51
  • Can you use a hidden input and just set that when you set the points? – stephen.vakil Sep 08 '15 at 14:51
  • @stephen.vakil how do you access the ID in the javascript? – ebots Sep 08 '15 at 14:53
  • Where is the ID? Can you show the code populating the list? – stephen.vakil Sep 08 '15 at 14:57
  • @stephen.vakil It is a list of type Activity. An Activity has a Primary Key which is "ActivityID". This is what I want to have in the post so that I can reference the Activity. The method for populating the list would not be very useful. It is declared and instantiated like this: List allowedActivities = new List();` and then populated with some activities. – ebots Sep 08 '15 at 15:02
  • Are you posting via ajax or a form submit? – JB06 Sep 08 '15 at 15:34
  • @JB06 Form submit in this instance and ajax in a similar place. I need to be able to do this both ways. – ebots Sep 08 '15 at 15:39
  • @ebots Ok, can you add the HTML that's generated by the Html.DropDownList method? – JB06 Sep 08 '15 at 15:58
  • @ebots I think you are doing this a bit backwards. You should instead have your Id as the value of the options, and then once you post to the controller you can get any related data you need from the database using the Id. – JB06 Sep 08 '15 at 16:22
  • @JB06 I want to display the points as soon as an item is selected in the dropdown. Therefore I need to have points associated with each item. I don't want to do a post to get that value. The only thing I can think of is to use an AJAX post and send through the name of the activity and then find the Activity relating to that name in the database (using linq). Is there not a way to have three things associated with each item (what you display - the name, the value - ideally the ID, and then the points? – ebots Sep 08 '15 at 16:27
  • I would have the ID as the value of the drop down and then have a javascript array with the ID / points association, and use that array to populate the points textbox on change. – stephen.vakil Sep 08 '15 at 16:34
  • @ebots Yeah sorry, I realized that after I posted that last comment. An ajax post would be easiest I think. Another way to do it would be to create a custom HTML helper to render the option tags with the extra attribute as you need. – JB06 Sep 08 '15 at 16:40
  • It unclear what you really trying to do here. You need to show you models. The html for the ` –  Sep 09 '15 at 01:24

2 Answers2

0

Here are two options:

  1. You can make an ajax request on the dropdown's change event and get the Id for the selected item, assigning the Id to a hidden field in your form.

  2. You can write a custom HTML helper to create your dropdown so that your option tags inside the dropdown would have the extra attributes you need.

See here for an example of creating a custom dropdown helper.

Community
  • 1
  • 1
JB06
  • 1,881
  • 14
  • 28
  • Thanks for your suggestions. I didn't want to do a form submit and found an easier option to do what I wanted to do. – ebots Sep 09 '15 at 09:53
-1

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.

Community
  • 1
  • 1
ebots
  • 19
  • 3