Eu tenho uma janela modal usada para atualizar ou adicionar um novo objetoStore.

Esse modal é chamado remotamente, cujas informações são carregadas de um método GET criado no ASP.NET.

Botão que chama o modal:

<div class="btn-group" id="modalbutton">
    <a id="createEditStoreModal" data-toggle="modal" asp-action="Create" 
         data-target="#modal-action-store" class="btn btn-primary">
            <i class="glyphicon glyphicon-plus"></i>  NEW STORE
        </a>
</div>

Html do modal:

@model Application.Models.ApplicationviewModels.StoreIndexData
@using Application.Models

<form asp-action="Create" role="form">    
        @await Html.PartialAsync("_ModalHeader", new ModalHeader
    { Heading = String.Format("Actualización de Modelo: Tiendas") })

        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="modal-body form-horizontal">
            <div class="form-group">
                <label asp-for="DepartmentID" class="col-md-2 control-label"></label>
                <div class="col-md-10">
                    <select asp-for="DepartmentID" class="form-control"
                            asp-items="@(new SelectList(@ViewBag.ListofDepartment,"DepartmentID","DepartmentName"))"></select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">Distrito</label>
                <div class="col-md-10">
                    <select class="form-control" id="DistrictID" name="DistrictID" asp-for="DistrictID"
                            asp-items="@(new SelectList(@ViewBag.ListofDistrict,"DistrictID","DistrictName"))"></select>
                </div>
            </div>
            {... more elements}
       </div>
</form>

Método GET:

    public IActionResult Create(int? id)
    {
        List<Department> DepartmentList = new List<Department>();
        DepartmentList = (from department in _context.Departments
                          select department).ToList();
        DepartmentList.Insert(0, new Department { DepartmentID = 0, DepartmentName = "-- Seleccione Departamento --" });
        ViewBag.ListofDepartment = DepartmentList;

        StoreIndexData edit = new StoreIndexData();
        List<District> ListofDistrict = new List<District>();
        ListofDistrict.Insert(0, new District { DistrictID = 0, DistrictName = "-- PRUEBA --" });
        ViewBag.ListofDistrict = ListofDistrict;

        return PartialView("~/Views/Shared/Stores/_Create.cshtml");
    }

O problema:

Eu tenho o seguinte jQuery que atribui um valor paraDistrictID quando o modal for aberto:

<script type="text/javascript">

    var wasclicked = 0;
    var $this = this;

    $(document).ready(function () {

        document.getElementById("modalbutton").onclick = function () {
            //is AddNew Store button is hitted, this var = 1
            wasclicked = 1;
        };

        $('#modal-action-store').on('hidden.bs.modal', function () {
            //global.wasclicked = 0;
            wasclicked = 0;
            $(this).removeData('bs.modal');
        });

        $('#modal-action-store').on('shown.bs.modal', function (e) {
            console.log($('#DistrictID').length);
            //if wasclicked equals 1 that means we are in the AddNew Store scenario.
            if (wasclicked == 1) {
                //a default value is sent to District dropdownlist
                var items = "<option value='0'>-- Seleccione Distrito --</option>";
                $('#DistrictID').html(items);
            };
        });
    });
</script>

O problema agora é que, após a execução dessa linha jQuery, o valor que foi atribuído aDistrictID é substituído por:

  ViewBag.ListofDistrict = ListofDistrict; //"-- PRUEBA --"

E esta linha está perdida:

var items = "<option value='0'>-- Seleccione Distrito --</option>";

O que eu suspeito é que as informações provenientes do Controller substituem qualquer resultado do jQuery no modal.

Após a depuração, identifiquei três momentos diferentes:

Momento 1: Primeira vez que abrimos o modal

O modal ainda não foi aberto e o jQuery é executadoPor esse motivo, não identificaDistrictIDO resultado da ação GET preenche as entradas do modal.

Momento 2 - Parte 1: Segunda vez que abrimos o modal

Desta vez, o modal é aberto antes da execução do jQueryoDistrictID tem o valor do método GET antes de atribuirmos o valor do jQuery

Momento 2 - Parte 2: Quando o valor do jQuery é atribuído

O valor do jQuery é atribuído aDistrictIDEste valor será substituído pelo resultado da Ação GET

Pergunta, questão:

Alguém pode explicar ou me ajudar a entender o que pode estar causando isso? O que mais posso fazer para identificar o motivo por trás disso?