'DevExtreme C# asp.net core how to do select city and street

I am using C# Devextreme asp.net core I try to do select city and then select street

My problem is for example I have

I have table :

City   CityCode  
 X         400
 Y          70


CityCode   Street   StreetCode

   400             A            10       
   400             B            20
   400             C            25
    70              D          10

When I select City X and Street A Its save the codes : CityCode=400 and StreetCode=10 but then I load the UI page Its show on the start for the the element ID("StreetCodeId") street name as D insteadof A I dont know why and it do it all the time for all streets I choses

I have 2 elements on UI

@(Html.DevExtreme().LookupFor(m=>m.CityCode).ID("CityCodeId").DataSource(d => d.RemoteController()
                                                   .LoadUrl("/Looks/Cities")
                                                   .Key("CodeCity"))
                                                   .ValueExpr("CodeCity")
                                                   .DisplayExpr("City")
                                                   .Value(Model.CityCode).OnSelectionChanged("SelectionCity")
                                                   .Width("100%")
                                                   )


    @(Html.DevExtreme().LookupFor(m => m.StreetCode).ID("StreetCodeId")
                                                       .DataSource(d => d.RemoteController()
                                                       .LoadUrl("/Looks/Streets")
                                                       .Key("CodeStreet"))
                                                       .ValueExpr("CodeStreet")
                                                       .DisplayExpr("Street")
                                                       .Width("100%")
                                                       .Value(Model.StreetCode))
    
    
    <script>
          function SelectionCity(e) {
            var x = $("#StreetCodeId").dxLookup("instance");
            var ds = x.getDataSource();
            ds.filter(["CityCode", "=", e.selectedItem.CodeCity]);
            ds.reload();
        }
    </script>

in my LooksController I have

[HttpGet]
    public IActionResult Cities(DataSourceLoadOptions loadOptions)
    {
        return Json(DataSourceLoader.Load(_bill2Db.CityCodes, loadOptions));
    }

    [HttpGet]
    public IActionResult Streets(DataSourceLoadOptions loadOptions)
    {
        return Json(DataSourceLoader.Load(_bill2Db.StreetCodes, loadOptions));      
    }

for example :

The result save on database :

enter image description here

my Street Table :

enter image description here

In actual the result on form show the street name for city code : 70 even that I have 6600 in database

Also on element ID("CityCodeId") I see the correct city with CityCode 6600



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source