How do I…Implement Edit view for nested dropdown lists in MVC4

I have two drop down list. That 2 are depend on each other.i.e. On selection of first drop down second drop down is filled. Now when I am inserting record in particular from this form(i.e. two drop down list and one text box control form), record gets
inserted.

But when I am editing that particular inserted record I am not able to set value in second drop down. I am doing this using MVC with Entity framework
Please see the example below.
I have one form in that I want to do Insert update and delete functionality.
First Category drop down is there on change of that Category second Sub Category drop down is filled. and one text box control is there.For filling the Sub Category I have called the onchange event of Category. Using this I am inserting that record into
table. Now issue is that when I am updating that particular record. Category value is filled, but Saub Category is not selected as that onchange event is not called,because of that Sub category values are not filled. Please help me in this.

How can I do this in MVC 4 with entity framework?

Please find below code which I have tried

jquery function to call onchange event of first drop down
$("#buildingId").change(function () {
$("#wingId").empty();
$.ajax({
type: ‘POST’,
url: ‘@Url.Action("FillWingsData")’, // we are calling json method

dataType: ‘json’,

data: { id: $("#buildingId").val() }, 
// here we are get value of selected Building and passing same value as input to json method FillWingsData.

success: function (wings) {
// Wings contains the JSON formatted list
// of Wing passed from the controller

$.each(wings, function (i, wing) {
$("#wingId").append(‘<option value="’ + wing.Value + ‘">’ +
wing.Text + ‘</option>’); 
// here we are adding option for Wings

});
},
error: function (ex) {
alert(‘Failed to retrieve wings.’ + ex);
}
});
return false;
})
 
cshtml code
<td>
@Html.DropDownListFor(model => model.BuildingId, (SelectList)ViewData["BuildingData"], "Select Building", new { id = "buildingId", @style = "width:200px;" })<br />
@Html.ValidationMessageFor(model => model.BuildingId, "", new { style = "Color:Red; Font-Size: 12px" })
</td>
<td>
@Html.DropDownListFor(model => model.WingId, new SelectList(string.Empty, "WingId", "WingName"), "Select Wing", new { id = "wingId", @style = "width:200px;" })<br />
@Html.ValidationMessageFor(model => model.WingId, "", new { style = "Color:Red; Font-Size: 12px" })
</td>
 
Controller class
public JsonResult FillWingsData(string id)
{
long buildingId = Convert.ToInt64(id);
var wings = (from wing in db.SM_BuildingWings 
where (wing.BuildingId == buildingId && wing.Status == "A")
select wing).ToList();
return Json(new SelectList(wings, "WingId", "WingName"));
}
This json function call when first drop down value is changed and it filled second drop down
 
Now while inserting record in table from this form it is proper.
But on edit second drop down is not filling. i.e. onchange event is not calling on edit thats why second drop down is not filling. How can I call onchnage event of jquery on edit view.
Please help in this issue.

Try This

//In Edit.csHtml
$(document).ready(function () { $("#buildingId").change(function () { var url = '@Url.Content("~/")' + "Controller/Wing_SelectedBuilding"; var ddlsource = "#buildingId"; var ddltarget = "#wingId"; $.getJSON(url, { Wing_SelectedBuilding: $(ddlsource).val() }, function (data) { $(ddltarget).empty(); $.each(data, function (index, optionData) { $(ddltarget).append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>"); }); }); }); }); <label class="col-md-5 control-label"> Building </label> @Html.DropDownListFor(model => model.buildingId, new SelectList((System.Collections.IEnumerable)ViewBag.BuildingValue, "Value", "Text"), new { @Id = "buildingId", @class = "form-control" }) @Html.ValidationMessageFor(model => model.buildingId) <label class="col-md-5 control-label"> Wings @Html.DropDownListFor(model => model.wingId, new SelectList((System.Collections.IEnumerable)ViewBag.WingValue, "Value", "Text","Selected Value"), new { @Id = "wingId", @class = "form-control" }) @Html.ValidationMessageFor(model => model.wingId)

//In Controller
   public JsonResult Wing_SelectedBuilding(int Sel_BuildingName)
        {
            WingRepo = new WingRepository();
            JsonResult result = new JsonResult();
            var vWing = WingRepo.GetWingNames(Sel_BuildingName);
            result.Data = vWing.ToList();
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
            return result;
        }

where ViewBag.WingValue=List Of The Wings

         ViewBag.BuildingValue=List Of Buildings

Hope This will Hlp You

Leave a Reply