locked
Cascading DropDownList - How to require selection RRS feed

  • Question

  • User982203039 posted

    I have a Cascading DropDownList. My issue is I want the initial selection to be --Select-- and require the user to make a selection. I do require the Category field in the class. Below is my controller and view code. With the way I have it coded now it thinks there is a value in Category. Hopefully this makes sense?

    Controller:

    public JsonResult GetCategory(string id)
            {
                List<SelectListItem> category = new List<SelectListItem>();
                switch (id)
                {
                    case "1": 
                        //category.Add(new SelectListItem { Text = "Select", Value = "0" });
                        category.Add(new SelectListItem { Text = "N/A", Value = "N/A" });
    
                        break;
                    case "2":
                        category.Add(new SelectListItem { Text = "N/A", Value = "N/A" });
                        
                        break;
                    case "3":
                        category.Add(new SelectListItem { Text = "N/A", Value = "N/A" });
                        break;
                    case "4": 
                        category.Add(new SelectListItem { Text = "---Select---", Value = null });
                        category.Add(new SelectListItem { Text = "Address", Value = "Address" });
                        category.Add(new SelectListItem { Text = "Account", Value = "Account" });
                        
                        break;
                    case "5": 
                        category.Add(new SelectListItem { Text = "Collection Items", Value = "Collection Items" });
                        break;
                }
                return Json(new SelectList(category, "Value", "Text"));
            }

    Par to of the View:

    <script type="text/javascript">
        $("#RequestType").change(function () {
    
            $("#Category").empty();
            
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("GetCategory")', // we are calling json method
    
                    dataType: 'json',
    
                    data: { id: $("#RequestType").val() },
    
                    success: function (category) {
                        $.each(category, function (i, category) {
                            $("#Category").append('<option value="' + category.Value + '">' +
                                category.Text + '</option>');
                            
                        });
                        
                        if ($("#Category").val() != "N/A")
                        
                       {
                           $('#div1').attr('Style', 'display:inline');
                          }
                        else
                           {
                            $('#div1').attr('Style', 'display:none');
                        }
                        $("#Category").val(null);
                    },
                    error: function (ex) {
                        alert('Failed to retrieve.' + ex);
                    }
                });
                    return false;
        });
    	
    	
    	
    	            <div class="form-group">
                    @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "required control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.DropDownList("Category", (IEnumerable<SelectListItem>)ViewBag.Category, "---Select---", new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Category, "", new { @class = "text-danger" })
                    </div>
    
                </div>



    Tuesday, March 30, 2021 5:27 PM

All replies

  • User982203039 posted

    I got it figured out. 

    Tuesday, March 30, 2021 8:31 PM