问题描述
我有一个模式窗口，用于更新或添加新对象Store.
I have a modal window used to update or add a new object Store.
此模式被远程调用，其信息从 ASP.NET 中构造的 GET 方法加载.
This modal is called remotely which information is loaded from a GET method constructed in ASP.NET.
调用模态的按钮:
<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:
@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>
现在的问题是，在这行 jQuery 执行之后，分配给 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 的信息会覆盖模态中的 jQuery 的任何结果.
What I suspect is that the information coming from the Controller overwrites any result from jQuery over the in the modal.
调试后我发现了三个不同的时刻:
After debugging I have identified three diferent moments:
时刻 1:我们第一次打开模式
- 模态尚未打开，jQuery 正在执行
- 因此它无法识别
DistrictID - GET 操作的结果填充模态的输入.
时刻 2 - 第 1 部分:我们第二次打开模式
- 这次模态框在 jQuery 执行之前打开
- 在我们从 jQuery 分配值之前，
DistrictID具有来自 GET 方法的值
- This time the modal opens before the jQuery is executed
- The
DistrictIDhas the value from the GET Method before we assign the value from jQuery
时刻 2 - 第 2 部分:分配来自 jQuery 的值时
- 来自 jQuery 的值被分配给
DistrictID - 此值将被 GET 操作的结果覆盖
问题:
谁能解释或帮助我了解可能导致这种情况的原因?我还能做些什么来找出这背后的原因?
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:也可以使用默认选项.参考下面的代码.
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>
这篇关于jQuery:与在不适当的时间执行的 removeData() 冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！