Cascading Dropdowns using HTML5 and repository pattern

Question

I have the following dropdown lists in my code that are populated from a backend repository.

<h3>Upload Course Section Content</h3>
  <div class="row">
    <div class="nine columns">
      <label for="name">Select Course:</label>
      <select id="coursedd" name="courseid" style="height:40px; font-size:18px;">
      <option value="0" id ="defaultcid" class ="choosefilter" >----Please Select Course----</option>
      @foreach (var course in Model.GetCourseList())
      {
        <option value="@course.CourseID" id ="courseid" class ="choosefilter" >@course.Name </option>
      }
      </select>
    </div>
  </div>
  <div class="row" style="margin-top:30px;">
    <div class="nine columns">
      <label for="name" id="namelabel">Select Course Section:</label>
      <select id="coursesectiondd" name="coursesectionid" style="height:40px; font-size:18px;">
      <option value="0" id ="defaultcs" class ="choosefilter" >----Please Select Course Section----</option>
      @foreach (var courseSection in Model.GetCourseSectionsByCourseID(Model.CourseID))
      {
        <option value="@courseSection.CourseSectionID" id ="coursesectionid" class ="choosefilter" >@courseSection.Title </option>
      }
      </select>
    </div>
  </div>

The second of the dropdowns is initially hidden and upon selection of the first dropdown I wish to populate the secondary dropdown. I have tried using the following jquery and javascript but have been unable to do so. Can anyone please help me to get this working:

 function GetCourseID() {

    var id = document.getElementById("coursedd").value;

    var postData = {
        'CourseID': id
    };

    $.post('/Admin/GetCourseID/', postData, function (data) {
        document.getElementById("coursedd").selectedIndex = id;
        document.getElementByID("coursesectiondd").show();
    });
};

$(function () {
    $("#coursedd").change(function () {
        $('#namelabel').show();
        $('#title').show();
        $('#CourseSectionSubmit').show();
        var chosen = document.getElementById("coursedd").value;
        if (chosen == "0") {
            $('#namelabel').hide();
            $('#coursesectiondd').hide();
            $('#file').hide();
            $('#filelabel').hide();
        }
        else {
            $('#coursesectiondd').show()
            GetCourseID()
            $('#coursesectiondd').a
        }
    });
});

In my controller I have the following, I thought that this would update the viewmodel with the appropriate values to then populate the secondary dropdown but nothing is being shown.

[HttpPost]
    public ActionResult GetCourseID(int courseID)
    {
        avm.CourseID = courseID;
        return View(avm);
    }

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

For starters, $('#coursesectiondd').a seems like a pretty broken line of javascript code. Also from your controller action you are returning some view but in your AJAX success callback you are not doing anything with the results like updating the second dropdown in the DOM. It would be more efficient to return the results as JSON in your controller action and then inside your success callback use this JSON to bind the second dropdown.

I wrote a sample about how you could achieve this here: https://stackoverflow.com/a/4459084/29407

edited May 23 '17 at 12:20

Community

1
1

answered Aug 06 '13 at 11:58

Darin Dimitrov

1,023,142
271
3,287
2,928

Hi Darin, yes there was a mistake in javascript which i have removed. If I change my [HttpPost] action in the controller to return an integer, so public int GetCourseID(int courseID){ int id = courseID; return id;} how can I then use this value to refresh and populate the second dropdown – Jay Aug 06 '13 at 12:40
Why would you change the action to return an integer??? In ASP.NET MVC controller actions must return ActionResults. In my answer I suggested you to return JSON (i.e. JsonResult). Please see the sample I have linked to n my answer for detailed illustration: http://stackoverflow.com/a/4459084/29407 – Darin Dimitrov Aug 06 '13 at 12:50
I am unsure of how json works and once I have a courseID integer I could successfully call my subsections if able to refresh the page, I thought this may be a simpler solution given i have a method to retrieve course sections based on the courseID from the course dropdown – Jay Aug 06 '13 at 12:57
I have illustrated how to use JSON in the linked example. – Darin Dimitrov Aug 06 '13 at 13:08
I appreciate your help in regards to the json but I believe this to be more complicated than required. I have changed the action result to return View("View", viewmodel); and on load on debug of the page the expected values are showing but the page is not updating. Can I not just refresh this dropdown somehow as the values are being iterated but just not being reflected on screen – Jay Aug 06 '13 at 13:26
I have looked at your json code but cannot make sense of it as it is too complex for my understanding. Does anyone else know of a means of refreshing the dropdown as I can see from debug that the options are being correctly chosen just not being added to the dropdown – Jay Aug 06 '13 at 15:24

Cascading Dropdowns using HTML5 and repository pattern

1 Answers1