問題描述

我有一個模式窗口，用于更新或添加新對象Store.

I have a modal window used to update or add a new object Store.

此模式被遠(yuǎn)程調(diào)用，其信息從 ASP.NET 中構(gòu)造的 GET 方法加載.

This modal is called remotely which information is loaded from a GET method constructed in ASP.NET.

調(diào)用模態(tài)的按鈕:

<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>

模態(tài)的HTML:

@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>

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");
    }

問題:

我有以下 jQuery，一旦模式打開，它就會為 DistrictID 分配一個值:

I have the following jQuery which asigns a value to DistrictID once the modal opens:

<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>

現(xiàn)在的問題是，在這行 jQuery 執(zhí)行之后，分配給 DistrictID 的值被 :

The problem right now is that after this line jQuery is executed, the value that was assigned to DistrictID gets overwritten by :

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

而這一行丟失了:

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

我懷疑來自 Controller 的信息會覆蓋模態(tài)中的 jQuery 的任何結(jié)果.

What I suspect is that the information coming from the Controller overwrites any result from jQuery over the in the modal.

調(diào)試后我發(fā)現(xiàn)了三個不同的時刻:

After debugging I have identified three diferent moments:

時刻 1:我們第一次打開模式

• 模態(tài)尚未打開，jQuery 正在執(zhí)行
• 因此它無法識別 DistrictID
• GET 操作的結(jié)果填充模態(tài)的輸入.

時刻 2 - 第 1 部分:我們第二次打開模式

• 這次模態(tài)框在 jQuery 執(zhí)行之前打開
• 在我們從 jQuery 分配值之前，DistrictID 具有來自 GET 方法的值

• This time the modal opens before the jQuery is executed
• The DistrictID has the value from the GET Method before we assign the value from jQuery

時刻 2 - 第 2 部分:分配來自 jQuery 的值時

• 來自 jQuery 的值被分配給 DistrictID
• 此值將被 GET 操作的結(jié)果覆蓋

問題:

誰能解釋或幫助我了解可能導(dǎo)致這種情況的原因?我還能做些什么來找出這背后的原因?

Can anyone explain or help me understand what might be causing this? What else can I do to identify the reason behind this?

推薦答案

嘗試將html到districtID的分配從你的主視圖移動到modal的document.ready彈出視圖.

Trying moving the assigning of html to districtID from your main view to the document.ready of modal popUp view.

    @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>

<script type="text/javascript">

    $(document).ready(function () {
            //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>

PS:也可以使用默認(rèn)選項(xiàng).參考下面的代碼.

PS: Default option can be also be used. refer the below code.

<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"))">
     <option value='0'>-- Seleccione Distrito --</option>
  </select>
 </div>
</div>

這篇關(guān)于jQuery:與在不適當(dāng)?shù)臅r間執(zhí)行的 removeData() 沖突的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！