我有一个模态窗口用于更新或添加新对象 Store
。
此模式被远程调用,其信息是从 ASP.NET 中构造的 GET 方法加载的。
调用模态的按钮:
<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>
获取方法:
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
赋值:
<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
的值被覆盖:
ViewBag.ListofDistrict = ListofDistrict; //"-- PRUEBA --"
这一行丢失了:
var items = "<option value='0'>-- Seleccione Distrito --</option>";
我怀疑来自 Controller 的信息覆盖了模态中来自 jQuery 的任何结果。
调试后我确定了三个不同的时刻:
时刻 1:我们第一次打开模式
- 模态还没有打开,jQuery 执行
- 因此,它不识别
DistrictID
- GET 操作的结果填充模态的输入。
时刻 2 - 第 1 部分:我们第二次打开模态
- 这次模式在 jQuery 执行之前打开
- 在我们从 jQuery 分配值之前,
DistrictID
具有来自 GET 方法的值
时刻 2 - 第 2 部分:分配来自 jQuery 的值时
- 来自 jQuery 的值分配给
DistrictID
- 该值将被 GET 操作的结果覆盖
问题:
任何人都可以解释或帮助我理解可能导致这种情况的原因吗?我还能做些什么来确定这背后的原因?
最佳答案
尝试将分配给 districtID
的 html 从您的主视图移动到模态弹出 View 的 document.ready
。
@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:也可以使用默认选项。引用下面的代码。
<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>
关于javascript - jQuery:与 removeData() 在不适当的时间执行冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47609994/