Asp.net DropDownList that populates a key value pairs on one line

I would like to be able to select an exam from a drop down list and append all the question_id's that are paired with that exam on the same row instead of each question_id populating it's own row.  Currently I have a DDL where I select an exam and the it populates all question_id's on their own row.  
schema

  Schema

Controller
  public ActionResult NewExam(int? exam_id)
        {

            ViewBag.exam_id = new SelectList(db.exams.OrderBy(x => x.exam_desc), "exam_id", "exam_desc");


            var question = (from x in db.exams
                            join y in db.exam_question on x.exam_id equals y.exam_id
                            where x.exam_id == exam_id
                            select y).ToList();

            ViewBag.question_id = new SelectList(from x in question.OrderBy(x => x.question.question_id).ToList()
                                                 select new
                                                 {
                                                     question_id = x.question_id
                                                 }, "question_id", "question_text");

            return View();
        }

   public JsonResult Get(int ID)
        {
            db.Configuration.ProxyCreationEnabled = false;
            var questionID = (from x in db.exam_question
                              join e in db.exams on x.exam_id equals e.exam_id
                              where e.exam_id == ID
                              select new AddExam
                              {
                                  question_id = x.question_id
                              }).ToList();

            return Json(questionID, JsonRequestBehavior.AllowGet);
        }

Open in new window



View
@model nahpApplication.Models.ViewModel.AddExam

<div class="container">
    <div class="form-group">

        @Html.DropDownListFor(model => model.exam_id, ViewBag.exam_id as SelectList, "-- Select Exam --", new { @class = "form-control", id = "ExamID" })

        <div class="form-group">

            @Html.DropDownListFor(x => x.question_id, ViewBag.question_id as SelectList, "-- Select Question --", new { @class = "form-control", id = "question_id" })
        </div>

    </div>
</div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>


<script>
    $(document).ready(function () {
        $("#ExamID").change(function () {
            $.get('@Url.Action("Get", "user_exam")',
                { ID: $("#ExamID").val() }, function (data) {
                    $("#question_id").empty();
                    $.each(data, function (index, row) {
                        $("#question_id").append(" <option value='" + row.question_id + "'>" + row.question_id + "</option>")
                    });
                })
        });
    });
</script>

Open in new window



ViewModel
 public class AddExam
    {
        //exam
        public int exam_id { get; set; }
        public int credential_status_id { get; set; }
        public string exam_desc { get; set; }


        //exam questions
        public int exam_question_id { get; set; }
        public int question_id { get; set; }

    }

Open in new window


Any help or guidance would be appreciated.
lovettjayAsked:
Who is Participating?
 
Kyle AbrahamsConnect With a Mentor Senior .Net DeveloperCommented:
Do A join on your List
      var question = string.Join(",", (from x in db.exams
                            join y in db.exam_question on x.exam_id equals y.exam_id
                            where x.exam_id == exam_id
                            select y.ToString()).ToList());

Open in new window

0
 
lovettjayAuthor Commented:
Thanks for your assistance.  This works perfectly in a comma separated list.  How would this be passed in the view?  The javascript will only pass a single question_id at a time in drop down list.
0
 
Kyle AbrahamsSenior .Net DeveloperCommented:
The dropdown will pass whatever is bound to the value field.  So if you have the questions bound to that column or a list of strings then you'd be fine.  Without understanding exactly what you're trying to accomplish it's hard to tell you what to do.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
lovettjayAuthor Commented:
After I select an exam I would like all the matching questions on one line on a comma separated list?  

After I select the exam: 8188, 8189, 3916, 3917, 3918, 3919, 3920....... all on the same line

You gave me the above code, I apologize I don't know how to plug it in the achieve the desired result
  var question = string.Join(",", (from x in db.exams
                            join y in db.exam_question on x.exam_id equals y.exam_id
                            where x.exam_id == exam_id
                            select y.ToString()).ToList());

Open in new window



Not...
DDL picture


Javascript:
<script>
    $(document).ready(function () {
        $("#ExamID").change(function () {
            $.get('@Url.Action("Get", "user_exam")',
                { ID: $("#ExamID").val() }, function (data) {
                    $("#question_id").empty();
                    $.each(data, function (index, row) {
                        $("#question_id").append(" <option value='" + row.question_id + "'>" + row.question_id + "</option>")
                    });
                })
        });
    });
</script>

Open in new window

0
 
Kyle AbrahamsSenior .Net DeveloperCommented:
<option value='" + row.question_id + "'>"

you can update that to use the new questions.  Just adjust your viewbag to be the questions definition rather than question_id
0
 
lovettjayAuthor Commented:
Thanks for your assistance, I think I'm almost there.....

<script>
   $(document).ready(function () {
        $("#ExamID").change(function () {
            $.get('@Url.Action("Get", "user_exam")',
                { ID: $("#ExamID").val() }, function (data) {
                    $("#QuestionOrder").empty();   
                    //$.each( JSON.parse(data), function(index, row) {
                    //    $("#QuestionOrder").append(" <option value='" + row.question_id + "'>")
                    //})
                    $.each(data, function (index, row) {
                        $("#QuestionOrder").append(" <option value='" + row.question_id + "'>")
                    });                                                 
                })
        });
    });
</script>

Open in new window


When inspecting in the console I get the following error: Uncaught TypeError: Cannot use 'in' operator to search for '1033' in 8188,8189,8190,3916,3917,3918.......for the rest of the questions.  I tired to JSON.parse as well with no luck.


Controller
      public ActionResult NewExam(int? exam_id)
        {

            ViewBag.exam_id = new SelectList(db.exams.OrderBy(x => x.exam_desc), "exam_id", "exam_desc");



            var exam_question_order = string.Join(",", (from x in db.exams
                                             join y in db.exam_question on x.exam_id equals y.exam_id
                                             join z in db.questions on y.question_id equals z.question_id
                                             where x.exam_id == exam_id
                                             select z.question_id.ToString()).ToList());

            ViewBag.exam_question_order = new SelectList(from x in exam_question_order
                                                         select x).ToList();

            return View();
        }

        public JsonResult Get(int ID)
        {
            db.Configuration.ProxyCreationEnabled = false;
            var exam_question_order = string.Join(",", (from x in db.exams
                                                        join y in db.exam_question on x.exam_id equals y.exam_id
                                                        join z in db.questions on y.question_id equals z.question_id
                                                        where x.exam_id == ID
                                                        select z.question_id.ToString()).ToList());

            return Json(exam_question_order, JsonRequestBehavior.AllowGet);
        }

Open in new window

0
 
Kyle AbrahamsSenior .Net DeveloperCommented:
where x.exam_id == exam_id

since exam_id is int?  is x.Exam_ID the same type?  You may need exam_id.Value
0
 
lovettjayAuthor Commented:
exam_id and EXAM_ID are both the same type of int.  


<script>
    $(document).ready(function () {
        $("#ExamID").change(function () {
            $.get('@Url.Action("Get", "user_exam")',
                { exam_id: $("#ExamID").val() }, function (data) {
                    $("#question_id").empty();
                   // $.each(JSON.parse(data), function(index, row) {
                    //$.each($.parseJSON(data), function (index, row) {
                    $.each(data, function (index, row) {
                        $("#question_id").append(" <option value='" + row.question_id + "'>" + row.question_id + "</option>")
                    });
                })
        });
    });
</script>

Open in new window



When inspecting the gives me: Uncaught TypeError: Cannot use 'in' operator to search for '1033' in 8188,8189,8190,3916,3917,3918,3919,3920...the rest of the questions.   In the XHR I see the questions_id listed out 8188, 8189, 8190......

So I tried to use Json.parse and $.parseJSON and they both give me the same syntax error: Uncaught SyntaxError: Unexpected token , in JSON at position 4. In the XHR I see the questions_id listed out 8188, 8189, 8190......
0
 
Kyle AbrahamsSenior .Net DeveloperCommented:
use includes instead of in, but note that you have to wrap the string and the value in delimiters to prevent false positives.

eg:

question Ids:
1,11,111

Look for 1
Look for ",1,11,111,".includes(",1,");


More on includes here:
https://www.w3schools.com/jsref/jsref_includes.asp
0
 
lovettjayAuthor Commented:
Thanks for your assistance.  I'm still struggling to piece everything together.  I have been trying to search for anything that will give me an example of a comma separated list after selecting an item.   What would be an appropriate google search?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.