Asp.net mvc4 dropdown binding to checkboxes with javascript

Question

I have a project based on ASP.NET MVC4, SQL Server 2012, EF.
In my edit form I need bind dropdown to checkboxes which display on the page. And when checked one or many checkboxes in the dropdown need to loading values from database which according to special rows in table. Here is my code to demonstrate what i have in this moment:

Controller

public ActionResult StudentEdit(int id)
{
   Student student = repo.GetStudentById(id);

   ViewBag.EducationProgramBachelorId = new SelectList(
   context.EducationProgramBachelors, "EducationProgramBachelorId", "ProgramName",     
   student.EducationProgramBachelorId);
   return View(student);
}

public JsonResult ProgramList(int Id)
{
   var model = context.EducationProgramBachelors;
   var program = from s in model
                 where s.UniversityId == Id
                 select s;

   return Json(new SelectList(program, "EducationProgramBachelorId", "ProgramName"), JsonRequestBehavior.AllowGet);
}

View

@{     
  List<ViewModels.AssignedUniversities> universities = ViewBag.Universities;

  foreach (var university in universities)
  {
     <div>
         <input type="checkbox"
                class="checkboxUniversities"
                name="selectedLatUniversities"
                value="@university.UniversityNameShort"
                @(Html.Raw(university.IsSelected ? "checked=\"checked\"" : ""))/>
         @university.UniversityNameShort
     </div>
   }
}

@Html.DropDownList("EducationProgramBachelorId", String.Empty)

JS Function

$(function () {
    $(".checkboxUniversities").change(function () {
        $.getJSON('/ControllerName/ProgramList/' + 1, function (data) {
            var items = '<option>Select a Program</option>';
            $.each(data, function (i, program) {
                items += "<option value='" + program.Value + "'>" + program.Text + "</option>";
            });
            $('#EducationProgramBachelorId').html(items);
        });
    });
});

I'm stopped on this step in my JS function:

$.getJSON('/ControllerName/ProgramList/' + 1, function (data)

Because I don't know how i can get and send int[] array of my UniversityId and how transform it in the my Json View. Can anybody help me with this situation?

In this line get('/ControllerName/ProgramList/' + 1, 1 - it's a test value to check work or dont work my script.

Between Student and University is many-to-many relationships.

P.S.: Sorry for my English

nforss · Accepted Answer · 2013-09-11 11:32:16Z

2

If I understand you correctly, you want to return an array of Ids whenever a checkbox is clicked, and then populate a dropdown with the data corresponding to the ids, correct?

I would recommend using the full extent of the MVC framework to do the heavy lifting for you, namely:

Return a partial view instead of a (json) int array
In the partial view, just create the dropdown menu using MVC:s normal Model-View tools
Insert the menu into a placeholder <div> on your main view

It would look something like the following.

Controller

public ActionResult ProgramList(int id){
    var model = context.EducationProgramBachelors;
    var program = from s in model
               where s.UniversityId == Id
               select s;

    return PartialView("studentProgram", program);
}

Partial view (named "studentProgram")

@model IEnumerable<Student>

@Html.DropDownFor("EducationProgramBachelorId", new SelectList(Model, "EducationProgramBachelorId", "ProgramName"))

Main view

@{     
    List<ViewModels.AssignedUniversities> universities = ViewBag.Universities;

    foreach (var university in universities)
    {
        <div>
            <input type="checkbox"
                class="checkboxUniversities"
                name="selectedLatUniversities"
                value="@university.Id"
                @(Html.Raw(university.IsSelected ? "checked=\"checked\"" : ""))/>
                    @university.UniversityNameShort
        </div>
     }
}

 <div id="dropdown-placeholder"></div>

jQuery

$(function () {
    $(".checkboxUniversities").change(function (event) {
        var id = $(event.target).val();
        $.get('/ControllerName/ProgramList/' + id, function (data) {
            $("#dropdown-placeholder").html(data);
        });
    });
});

This should simplify things a lot. The Id for the university should be added to the checkboxes as their values, and later gotten via the change function's target property.

A few caveats, though.

I don't know the exact structure of your Student class, so you may have to tweak that if I have made some wrong assumptions.
I wrote this code directly into the StackOverflow window and have not tested it, so there may be typos

Hope this helps!

edited Sep 11, 2013 at 11:32

answered Sep 11, 2013 at 11:00

nforss

1,2681 gold badge17 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BorHunter Over a year ago

It's the same what I have at this moment. In this line get('/ControllerName/ProgramList/' + 1, 1 - it's a test value to check work or dont work my script, your answer is awesome, but i still dont know what I must send instead of 1

BorHunter Over a year ago

Ideally 1 - it's the selected UniversityId in my checkbox

Collectives™ on Stack Overflow

Asp.net mvc4 dropdown binding to checkboxes with javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related