Cascading DDL razor pass values

Question

What I am trying to do is a simple cascading DDL using my database. Say I have an object class:

public class ObjectModel
{
    public int id { get; set; }
    public string type { get; set; }
    public string name { get; set; }
}

The types are- 'factories', 'samples' and 'sampleresults'. The moment a user chooses factories- for example- all factories' names are shown. My Task class has ObjectID member, and an ObjectType member. So I'd like to pass to ObjectType member the second option while ObjectID gets the first option. Here is the script I use:

    <script type="text/javascript">
    $(function () {
        $.getJSON("/Home/Object/List", function (data) {
            var items = "<option>---------------------</option>";
            $.each(data, function (i, object) {
                items += "<option value='" + object.Value + "'>" + object.Text + "</option>";
            });
            $("#Objects").html(items);
        });

        $("#Objects").change(function () {
            $.getJSON("/Home/ObjectType/List/" + $("#Objects > option:selected").attr("value"), function (data) {
                var items = "<option>---------------------</option>";
                $.each(data, function (i, objectType) {
                    items += "<option value='" + objectType.Value + "'>" + objectType.Text + "</option>";
                });
                $("#ObjectType").html(items);
            });
        });
    });
</script>

My view is:

   @Html.LabelFor(model => model.ObjectID) 
   <select id="Objects" name="Objects"></select>
    <br />

    @Html.LabelFor(model => model.ObjectName) 
    <select id="ObjectType" name="ObjectType"></select>

My controller is:

public ActionResult Create() { return View(); } 

[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult Create(Task task) { 
      if (ModelState.IsValid) { 
         db.Tasks.Add(task); 
         db.SaveChanges(); 
         return RedirectToAction("Index"); } 
      return View(task); 
} 

So it all works fine, and each time I drop the first list down I get all types, then the second DDL shows the relevant names. The only problem is I have no clue how to pass these values to my model class (Task class). I am used to use @Html.dropdownlist but it won't work this time I guess, because I'm using script.

Answer 1

Ok lets get the values of those dropdowns first

var obj = $('#Objects').val();
var objType = $('#ObjectType').val();

Lets say your controller action is TaskAction, we pass those values over as get parameters

$.get("/Home/Controller/TaskAction", { object : obj, ObjectType : objType}, function (data) {

    //Do something after
});

and lets assume your Task class is like this

public class Task
{

    public string Object { get; set;}
    public string ObjectType { get; set;}


}

You can then model bind it like this

public ActionResult TaskAction(Task myTask)
{

}

or explicitly pass it over like this

public ActionResult TaskAction(string object, string objType)
{
    new Task{ Object = object, ObjectType = objType}
}

Hope this helps

Answer 2

As long as the name attribute of a form element matches the name of a public property on your model, the ModelBinder will be happy. Note that case matters, and it must be spelled exactly the same. So if your property is color , then name="Colors" will not bind correctly because of both the capital C and the extra s.

So if you want to bind directly to a Task with your existing HTML, Task must look like this:

public class Task() {
   public Task() { }
   //need a default constructor with no parameters for model binding to work 

   public string Objects { get; set; }
   //property name "Objects" matches value of input/select/textarea's name attribute

   public string ObjectType { get; set; }

   //other methods / properties as needed...
}