نمایش کمبوباکس شهر و استان در یک جدول در Asp.net core

من یک جدول دارم برای نمایش شهر و استان که اگر parentId=null باشد استان است. اگر برابر Id باشد شهر است . این متد های داخل ریپوزیتوری که ویو مدل آنرا پر میکند که فقط ،Title , LocationId دارد.

public async Task<List<UserLocationViewModel>> GetStateForUserInfo()
{
   var state= await _context.Locations.Where(l => l.ParentId == null)
      .Select(l => new UserLocationViewModel()
      {
         Title = l.Title,
         LocationId = l.Id  
      }).ToListAsync();
            return (state);
}

public async Task<List<UserLocationViewModel>> GetCityForUserInfo(long locationId)
{
   var x=  await _context.Locations.Where(l => l.ParentId == locationId)
           .Select(l => new UserLocationViewModel()
           {
              Title = l.Title,
              LocationId = l.Id
           }).ToListAsync();
   return x;
}

میخواهم بفرستم این رو به یک صفحه که خودش یه ویو ومدل دیگه دارد. بنابراین با ViewDate پاس دادم به صفحه

var state = await _packageService.GetStateForUserInfo();
ViewData["State"] = state;
var firstLocationId = state.First().LocationId;
var city = await _packageService.GetCityForUserInfo(firstLocationId);
ViewData["City"] = city;

اکر از SelectList  استفاده کنم که کلا نال بر میگردونه

ViewData["State"] = new SelectList(state, "Title", "Title ");

برای همین همان ویو مدل رو پاس دادم که LocationId رو به ویو مدل اون اضافه کردم .همان ویو و مدل اصلی صفحه که بتونم بگیرمش ای شهر و استان را 

در وییو هم: بالای صفحه

@{
    ViewData["Title"] = _localizer["GetUserInfo"];
    IEnumerable<UserLocationViewModel> state = ViewData["State"] as 
    Enumerable<UserLocationViewModel>;   
    IEnumerable<UserLocationViewModel> city = ViewData["City"] as 
    IEnumerable<UserLocationViewModel>;   
}

و قسمت خود دراپ لیست:

<label class="w-100 d-flex align-items-center" for="">
   <label>استان*</label>
                                
   <select asp-for="LocationId" asp-items="(@ViewData["State"] as IEnumerable<SelectListItem>)" class="form-control">
   <span asp-validation-for="LocationId"></span>
      @foreach (var item in ViewBag.state)
      {
          <option value="@item.LocationId">@item.Title</option>
      }
    </select>
         <label>شهر*  </label>
    <select asp-for="LocationId" asp-items="(@ViewData["city"] as IEnumerable<SelectListItem>)" id=" " class="form-control ">
       <span asp-validation-for="LocationId"></span>
       @foreach (var item in ViewBag.city)
        {
           <option value="@item.LocationId">@item.Title</option>
        }
      </select>
</label>

اینم عکس جدول برای درک بیشتر

مشکل: الان توی Get استان و شهر را بر میگردونه ولی توی متد پست فقط اولین آی دی توی دیتابیس ؛ یعتی آی دی 2 را بر میگردونه

اگر کلا شهر رو حذف کنم هم متد هم توی ویو 

آی دی استان رو درست بر میگردونه و آی دی های دیگه رو بر میگردنه و در دیتابیس سیو میکنه 

اما با شهر ( که باید id==parentId ) باشه ای دی شهر رو نمی گیره 

اینم متد post که خودش همون طور که گفتم یه ویو مدل دیگه هم داره و یک فرم که اطالاعاتی دارد را ذخیره میکند

public async Task<IActionResult> FirstStartUserInfo(CreateFirstStartUserInfoViewModel firstStartUserInfo )
{
   var userId = User.GetCurrentUserId();
   var res = await _packageService.CreateFirstStartUserInfoByUser(firstStartUserInfo, userId);
   return View(firstStartUserInfo);
}

به ویو مدل اصلی صفحه این پراپرتی اضافه شده

public long? LocationId { get; set; }

سلکت لیست هم قبلا با آی دی توشنه بودم و یه جی کویری هم نوشته بودم .آی دی شهر رو نمی رگفت فکر میکردم اشمال از کدهامه ولی کگویا اشنال از جی کویری هست میشه لطفا کدهای جی کویری رو ببینید. البته از selectList استفاده نکردم از ویو مدل استفاده کردم فکر کنم اشکال از مقدار دهی option  هست .حالا که از ویو مدلی اسافاده گردم که titile , locationID  داره باید چی بذارم ایتحا؟

  <label class="w-100 d-flex align-items-center" for="">
                                <label>استان* </label>

                                <select asp-for="LocationId" asp-items="(@ViewData["State"] as IEnumerable<SelectListItem>)" id="Location_Id" class="form-control">
                                    @*<option value="0">لطفا انتخاب کنید</option>*@
                                    @if (state.Any())
                                    {
                                        @foreach (var item in state)
                                        {
                                            <option value="@item.LocationId">@item.Title</option>

                                        }
                                    }
                                </select>
                                <span asp-validation-for="LocationId"></span>

                                <label>شهر* </label>
                                <select asp-for="LocationId" asp-items="(@ViewData["city"] as IEnumerable<SelectListItem>)" id="SubLocation_Id" class="form-control ">

                                    @foreach (var item in city)
                                    {

                                        <option value="@item.LocationId ">@item.Title</option>

                                    }
                                </select>
                                <span asp-validation-for="LocationId"></span>
                            </label>

و کد جی کویری:

@section scripts
    {

        <script>

            $("#Location_Id").change(function() {
                $("#SubLocation_Id").empty();
                $.getJSON("/UserPanel/UserInfo/GetSubGroup/" + $("Location_Id:selected").val(),
                    function(data) {
                        $.each(data,
                            function() {
                          /*      $("#SubLocation_Id").append('<option value=' + this.title +  '</option>');*/
                                $("#SubLocation_Id").append('<option value='  + this.value + '>' + this.text + '</option>');
                            });


                    });
            });
        </script>
          }