JQuery ComboBox Selected Attribute , the items not being populated from ViewBag list item

Question

User-1355965324 posted

I am using Jquery comboBox  to list Depot and Department and map against the user.My Combobox is working fine . Only the problem when the  HTML page is being showed from HTTPGET , already previously mapped record is not being  showed as selected from ViewBag.DepotLocationMappingForSalary

Inside  the controller , All the Depot and Department are being listed and we can select and the selected record   would be displayed in textbox of ComboBox list. Once we save the selected records, and when we take the html page again ,  The 'Selected' attribute of ComboBox have to be  automatically filled from ViewBag.DepotLocationMappingForSalary  . But it doesnot happened

Here is the code

In Controller HTTPGET method

public IActionResult UserSetup(int id = 0)
{
ViewBag.DepotLocationMappingForSalary = "[]";
List<UserSalaryLocationLink> salaryMapping = _unitOfWork.User.GetUserSalaryLocations(id);
user.SelectedSalaryMapping = String.Join(",", salaryMapping.Select(x => x.DepotNo + "." + x.DepartmentID).ToArray()) + "," + String.Join(",", salaryMapping.Select(x => x.DepotNo).Distinct().ToArray());
ViewBag.DepotLocationMappingForSalary = "[" + user.SelectedSalaryMapping + "]";
return View(user);
}

 public JsonResult GetDepotDepartemntsForMap()
        {
            List<DepotMapModel> mapping = new List<DepotMapModel>();
            List<SelectListItem> depots = new List<SelectListItem>();
            depots = _unitOfWork.Depot.GetAllDepotsForDropdown().ToList();
            depots.RemoveAt(0);

            List<SelectListItem> departments = new List<SelectListItem>();
            departments = _unitOfWork.Department.GetAllDepartmentsForDropdown().ToList();
            departments.RemoveAt(0);
            //   var lson = _unitOfWork.Department.GetDepotWithDepartment();
            dynamic mappingList = new List<DepotMapModel>();
            mappingList = _unitOfWork.Department.GetDepotWithDepartment();
     return Json(mappingList);  // Previously Saved Record have to be coming from here but not coming in ComboBox as Selected Attribute

        }

Html Page

Html Page
<div class="form-group" style="display: block;">
       <label class="control-label control-label-left col-sm-3 text-danger">Salary Access</label>
       <div class="controls col-sm-9">
        <input type="text" id="ddlSalaryMapping" placeholder="Select" />
        <input type="hidden" id="hfSalaryMapping" asp-for="SelectedSalaryMapping" />
</div>
</div>
<script>
FillSalaryDepotsMappings(@ViewBag.DepotLocationMappingForSalary);  // Here The record from ViewBag.DepotLocationMappingForSalary is being selected 
function FillSalaryDepotsMappings(defaultSelected) {
        $.ajax({
            type: "GET",
            url: "/User/GetDepotDepartemntsForMap",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                console.log(data);
                 $('#ddlSalaryMapping').comboTree({
                    source: data,
                    isMultiple: true,
                    cascadeSelect: true,
                    collapse: true,
                    selected: [defaultSelected] // when the page is loaded , previously mapped record are not  shown. All records previously  mapped should be shown here

                });
                 $("#hfSalaryMapping").val(defaultSelected);  DefaultSelected values must be from $('#hfSalaryMapping').val(ComboTree.getSelectedIds());
            },
            failure: function (response) {
                console.log(response.responseText);
            },
            error: function (response) {
                console.log(response.responseText);
            }
            
        });
        
</script>

Data

List<UserSalaryLocationLink> salaryMapping 
{
   DepartmentID        DepotNo
       1                        2
       1                        3
       1                        4
}
ViewBag.DepotLocationMappingForSalary = [2.1,3.1,4.1,2,3,4]

//mappingList Record
{ id = 1, title = "1-DepotName1", subs = {System.Collections.Generic.List<<>f__AnonymousType10<string, string>>} }
    subs: { id = "1.1", title = "1.Retail" }
        { id = "1.2", title = "1.Office" }
        { id = "1.3", title = "1.Warehouse" }
{ id = 2, title = "2-DepotName2", subs = {System.Collections.Generic.List<<>f__AnonymousType10<string, string>>} }
        subs { id = "2.1", title = "2.Retail" }
        { id = "2.2", title = "2.Office" }
        { id = "2.3", title = "2.Warehouse" }

 Any Help would be very appreciated

Pol

Answer 1

User475983607 posted

The framework automatically encodes JSON rendered in a View to protect the developer from writing vulnerable code.  Your following code does not render JSON, it renders an encoded string.  The JSON encoded string will cause a JavaScript error, Uncaught SyntaxError: Unexpected token '&' clearly shown in the browser's dev tools.

FillSalaryDepotsMappings(@ViewBag.DepotLocationMappingForSalary);

You must opt-in to write vulnerable code in MVC using @Html.Raw() as illustrated below,

public IActionResult Index()
{
    ViewBag.DepotLocationMappingForSalary = "[{'first': 'Hello'}, {'second': 'World'}]";
    return View();
}

<div>Notice the double I use double quotes to get around the JavaScript error.</div> <div>

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

@section scripts {
    <script>
        test(@Html.Raw(ViewBag.DepotLocationMappingForSalary));
        test("@ViewBag.DepotLocationMappingForSalary");


        function test(input) {
            return console.log(input);
        }
    </script>
}

</div>

I recommend learning how to use standard debugging tools.

https://developer.chrome.com/docs/devtools/overview/

Answer 2

User503812343 posted

your dropdown values are static. So why you don't just add these values to model and the bind it to dropdown

look for more details how to bind dropdownlist with model in asp.net mvc

public ActionResult BindWithModel()
{
    List<SelectListItem> items = new List<SelectListItem>();

    items.Add(new SelectListItem 
                { Text = "Select Category", Value = "0", 
                        Selected = true });
    items.Add(new SelectListItem
                { Text = "Beverages", Value = "1" });
    items.Add(new SelectListItem
                { Text = "Condiments", Value = "2" });
    

    var model = new CategoryModel()
    {
        lstCategory = items,
        selected = 1
    };

    return View(model);
}


@model BindMvcDropdownList.Models.CategoryModel

<h1>Bind MVC DropDownList with Model</h1>

@Html.DropDownListFor(x => x.selected, Model.lstCategory)