1

The issue I am facing is similar to this old post cascading dropdown for dynamically added row. I am using the "BeginCollectionItemCore" NuGet package to setup a set of partial views, so I have unique Id's for my controls. The problem is, I can only get the first Partial View to respond to the dropdownlist changes. The subsequent dropdownlists won't cascade. I have tried with the scripts in the partial and in the main view but both have the same end result, only the first partial will cascade. Here is my code...

Main View HTML:

@model IEnumerable<RCRTCWA.DATA.DAL.tbl_RCRTimeCards>

@{
    ViewBag.Title = "Index";
}

<h2>Time Card</h2>

@using (Html.BeginForm())
{
    <div id="TimeCardLines">
        @foreach (var item in Model)
        {
            Html.RenderPartial("_TimeCardRow", item);
        }

    </div>
}

@Html.ActionLink("Add more time...", "_TimeCardRow", new { ViewContext.FormContext.FormId }, new { id = "addTime"})

Main View Script:

<script>
    $(document).ready(function () {
        debugger;

        $("#addTime").click(function () {
            $.ajax({
                url: this.href,
                cache: false,
                success: function (html) { $("#TimeCardLines").append(html); }

            });
            return false;
        });

        //var index = "";
        $(".timecardrow").focusin(function () {
            var ti = $(this).find("[name='timecardrows.index']");
            var index = ti.val();

            $("#timecardrows_" + index + "__HRS_EndTime").timepicker({
                defaultTime: 'now',
                minTime: '6:00am',
                maxTime: '7:00pm'
            });
            $("#timecardrows_" + index + "__HRS_StartTime").timepicker({
                defaultTime: 'now',
                minTime: '6:00am',
                maxTime: '7:00pm'
            });

            //$("#.Line_TimeCard").ajaxSuccess(function () {
            //    $.getJSON("/TimeCard/AddTimeCardRow/", $("#.Success").html(data).show());
            //});

            $("#timecardrows_" + index + "__WOTicketNo").change(function () {
                var tktid = $(this).val();
                $("#timecardrows_" + index + "__WOTicketRepLineNo").empty();

                $.ajax({
                    url: "/TimeCard/GetRepairLines/",
                    data: { ticket: tktid },
                    cache: false,
                    type: "POST",
                    success: function (data) {
                        $.each(data, function (i, data) {
                            $("#timecardrows_" + index + "__WOTicketRepLineNo").append('<option value="' + data.Value + '">' + data.Text + '</option>');
                        });
                    },
                    error: function (response) {
                        alert("Error : " + response);
                    }
                });
                GetCarNumber(tktid);
            });

            $("#timecardrows_" + index + "__WOTicketRepLineNo").change(function () {
                var line = $("#timecardrows_" + index + "__WOTicketRepLineNo").val();
                $("#timecardrows_" + index + "__WOTicketLaborLineNo").empty();

                $.ajax({
                    url: "/TimeCard/GetLineDetails/",
                    data: { lineid: line },
                    cache: false,
                    type: "POST",
                    success: function (data) {
                        $.each(data, function (i, data) {
                            $("#timecardrows_" + index + "__WOTicketLaborLineNo").append('<option value="' + data.Value + '">' + data.Text + '</option>');
                        });
                    },
                    error: function (response) {
                        alert("error : " + response);
                    }
                });
                return false;
            }).change();



            function GetCarNumber(ticket) {
                $.ajax({
                    url: "/TimeCard/GetCarNumber/",
                    data: { ticket: ticket },
                    cache: false,
                    type: "POST",
                    success: function (data) {
                        $("#timecardrows_" + index + "carNo").html(data).show();
                    },
                    error: function (response) {
                        alert("Error : " + response);
                    }
                });
            }
        });
    });

</script>

Partial View HTML:

@using HtmlHelpers.BeginCollectionItem
@model RCRTCWA.DATA.DAL.tbl_RCRTimeCards

<div class="timecardrow">
    @using (Html.BeginCollectionItem("timecardrows"))
    {
        <div class="form-horizontal">
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <table>
                <tr>
                    <th class="col-sm-1">
                        Ticket Number
                    </th>
                    <th class="col-sm-1">
                        Car Number
                    </th>
                    <th class="col-sm-1">
                        Repair Line / Description
                    </th>
                    <th class="col-sm-1">
                        Labor Line / Description
                    </th>
                    <th class="col-sm-1">
                        Start Time
                    </th>
                    <th class="col-sm-1">
                        End Time
                    </th>
                    <th class="col-sm-1">
                        Line Complete?
                    </th>
                </tr>
                <tr>
                    <td class="form-group">
                        <div class="col-sm-1 tickets">
                            @Html.DropDownListFor(model => model.WOTicketNo, (SelectList)ViewData["TicketsList"], "Select one...", new { @class = "ticketddl" } )
                            @Html.ValidationMessageFor(model => model.WOTicketNo, "", new { @class = "text-danger" })
                        </div>
                    </td>
                    <td class="form-group">
                        <div class="col-sm-1 cars">
                            <div id="carNo"></div>
                            @Html.HiddenFor(model => model.CarNo)
                            @Html.ValidationMessageFor(model => model.CarNo, "", new { @class = "text-danger" })
                        </div>
                    </td>
                    <td class="form-group">
                        <div class="col-sm-1 replines">
                            @Html.DropDownListFor(model => model.WOTicketRepLineNo, new SelectList(string.Empty, "Value", "Text"), "Select one...", new { @class = "repairddl" })
                        </div>
                    </td>
                    <td class="form-group">
                        <div class="col-sm-1 laborlines">
                            @Html.DropDownListFor(model => model.WOTicketLaborLineNo, new SelectList(string.Empty, "Value", "Text"), "Select one...", new { @class = "lablineddl" })
                        </div>
                    </td>
                    <td class="form-group">
                        <div class="col-sm-1 starttime">
                            @Html.EditorFor(model => model.HRS_StartTime, new { @class = "start" })
                            @Html.ValidationMessageFor(model => model.HRS_StartTime, "", new { @class = "text-danger" })
                        </div>
                    </td>
                    <td class="form-group">
                        <div class="col-sm-1 endtime">
                            @Html.EditorFor(model => model.HRS_EndTime, new { @class = "end" })
                            @Html.ValidationMessageFor(model => model.HRS_EndTime, "", new { @class = "text-danger" })
                        </div>
                    </td>
                    <td class="form-group">
                        <div class="col-sm-1 completed">
                            @Html.EditorFor(model => model.Completed)
                            @Html.ValidationMessageFor(model => model.Completed, "", new { @class = "text-danger" })
                        </div>
                    </td>
                    @*<td class="form-group">
                        <div class="col-sm-1">
                            <input type="submit" value="Submit Line" class="btn btn-default" />
                        </div>
                        <div id="success" class="alert-danger">

                        </div>
                    </td>*@
                </tr>

            </table>

        </div>
    }
</div>

Currently I have the script in the Main View, and have attempted to get the index part of the partial view's controls when the user interacts with the partial view. I need a better way to handle this, and need to get the cascading dropdownlist's working properly.

I would prefer to have the script in the Main View (if possible) to keep things simpler.

4
  • Use class names and relative selectors, not id attributes.
    – user3559349
    Aug 22, 2017 at 22:10
  • Note also you have other issues including if you return the view because ModelState is invalid, all the data the user previously select in the dropdownlists is lost. Refer this DotNetFiddle for how to generate cascading dropdownlists
    – user3559349
    Aug 22, 2017 at 22:14
  • Thank you @StephenMuecke, for now I am just concerned with getting multiple partial views to render the cascading dropdownlists properly.
    – jforward5
    Aug 23, 2017 at 12:47
  • Which is why you need to read the first comment. Give your <select> elements class names and then use relative selectors to get the other <select> within the same container (<tr>) element
    – user3559349
    Aug 23, 2017 at 12:50

2 Answers 2

1

You do not need to bind the change event handler on dropdown using concatenated id strings, which is prone to errors (typos etc) and not easily readable/maintainable. For your cascading dropdown scenario, all you care about is updating the second select element in the same row. jQuery has some handy methods like closest and find which will make our life easier.

For making it easier for future readers, I am going to assume that your first SELECT element is to render a list of countries and has a css class "countrySelect" and second one is for the states of selected country and has the css class "statesSelect" and both are in the same table row (<tr>).

When you bind the change event, make sure you use jQuery on to do so. This will enable the binding for current and future elements in the DOM .

$("#TimeCardLines").on("change","SELECT.countrySelect",function (e) {
    var _this = $(this);
    var v = _this.val();

    // to do  :Change below url variable value as needed for your code
    var urlToGetSecondDropDownData = "/Home/GetStates?countryId"+v;

    $.getJSON(urlToGetSecondDropDownData,
        function (res) {
            var items = "";
            $.each(res,
                function(index, item) {
                    items += "<option value='" + item.Value + "'>" 
                                               + item.Text + "</option>";
                });
            _this.closest("tr")                // Get the same table row
                 .find("SELECT.statesSelect")  // Find the second dropdown
                 .html(items);                 // update the content of it

        });
});

Assuming you have a GetStates action method which accepts a countryId param and return the corresponding states as a list of SelectListItem ( the data needed to build the second dropdown). Something like below,

public ActionResult GetStates(int countryId)
{
    var states =db.States.Where(f => f.CountryId == countryId)
        .Select(f => new SelectListItem() { Value = f.Id.ToString(), 
                                            Text = f.Name})
        .ToList();

    return Json(states, JsonRequestBehavior.AllowGet);

}
8
  • Thank you for taking the time to write this answer @Shyju. Unfortunately it only works for the first rendered partial in the page. Each of my partials contains a table with one row, could this be the problem?
    – jforward5
    Aug 23, 2017 at 12:44
  • No! It you follow what i explained in the answer it should work for all of them. I tried it locally and tested it. My partial also had same code as yours, both dropdowns are in a table and in the same table row. What is happening in your case ? Can you be more specific ?
    – Shyju
    Aug 23, 2017 at 13:31
  • In my case when using the method you have outlined the first partial view has the cascading dropdowns function as expected, the subsequent partial views with cascading dropdowns don't cascade. In my origninal post I have the code for my partial views, there is a table and a single row with a single div in each row and the control in the div.
    – jforward5
    Aug 23, 2017 at 14:05
  • And based on your answer i am now using "class" to select the controls in my jquery.
    – jforward5
    Aug 23, 2017 at 14:12
  • 1
    SWEET! That was the missing link! Thank you for giving me the right answer!!
    – jforward5
    Aug 23, 2017 at 15:33
0
   //first dropdowlist change event 
  $("#countryId").change(function () {
    var id = this.value;
    if (id == "") {
        id = "0";
    }
    $.get('/Home/GetStates/' + id,
          function (data) {

              $('#stateId').find('option').remove()
              $(data).each(
                  function (index, item) {
                      $('#stateId').append('<option value="' + item.Value + '">' + item.Text + '</option>')
                  });
          }
);
});




 public ActionResult GetStates(int id)
    {

        List<SelectListItem> StatesList= new List<SelectListItem>();
        StatesList.Add(new SelectListItem { Text = "---Select State---", Value = "0" });
        var getStateCollection= (from f in _ent.States
                              where f.CountryId == id && f.DeletedDate == null
                              select new { f.Id, f.Name}).ToList();


        foreach (var item in getStateCollection)
        {
            StatesList.Add(new SelectListItem { Text = item.Name.ToString(), Value = item.Id.ToString() });
        }
        return Json(StatesList, JsonRequestBehavior.AllowGet);
    }
1
  • Sorry, but your code will only work if there is one view. In my instance there is one page with many Partial Views on the same page and having cascading dropdownlists in each. The solution above, provided by @Shyju is the correct and accepted answer. Thank you for your effort Sundar.
    – jforward5
    Sep 1, 2017 at 14:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.