[英]Loading model in modal works only once
我有這個煩人的問題,我一直在努力修復過去幾晚。 到目前為止沒有運氣。 我有一個視圖與模態和局部視圖,呈現在模態中。 我在部分視圖中填寫了基於我在控制表中單擊按鈕時傳遞給控制器的參數的數據。 第一個很順利,按鈕調用控制器 - >控制器將模型傳遞給partialview - >模態打開,右側數據在字段中。
當我單擊另一條記錄上的按鈕時,將打開模態並顯示舊數據。 未再次調用控制器,因此數據不會刷新。 問題是,如果我用shift + f5刷新頁面,它會再次工作一次。 所以它似乎是一個緩存問題。
到目前為止我嘗試過 - 在我的控制器和方法中禁用緩存 - 調用javascript方法從我的模態中刪除數據 - 使用其他類型的模態
代碼索引視圖
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>List of registrations</h5>
<div class="ibox-tools">
@Html.ActionLink("Create New", "Create", null, new { @class = "btn btn-primary btn-xs" })
</div>
</div>
<div class="ibox-content">
<table class="table table-striped" id="datatable">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Date)
</th>
<th>
@Html.DisplayNameFor(model => model.Car.Kenteken)
</th>
<th>
@Html.DisplayNameFor(model => model.DepartureLocation)
</th>
<th>
@Html.DisplayNameFor(model => model.ArrivalLocation)
</th>
<th>
@Html.DisplayNameFor(model => model.Distance)
</th>
<th>
@Html.DisplayNameFor(model => model.Allowance)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Date)
</td>
<td>
@Html.DisplayFor(modelItem => item.Car.Kenteken)
</td>
<td>
@Html.DisplayFor(modelItem => item.DepartureLocation)
</td>
<td>
@Html.DisplayFor(modelItem => item.ArrivalLocation)
</td>
<td>
@Html.DisplayFor(modelItem => item.Distance)
</td>
<td>
@Html.DisplayFor(modelItem => item.Allowance)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.CarId }, new { @class = "btn btn-white btn-sm" })
@Html.ActionLink("Delete", "Delete", new { id = item.CarId }, new { @class = "btn btn-white btn-sm" })
@Html.ActionLink("Copy", "CopyTripRegistrationModal", "TripRegistration", new { registrationId = item.RegistrationID }, new { @class = "img-btn-addnote modal-link btn btn-white btn-sm" })
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
<a href="#close" title="Close" class="modal-close-btn">X</a>
<div class="modal-content">
<div class="modal-body"></div>
</div>
使用Javascript
<script>
$(function () {
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
$('body').on('click', '.modal-close-btn', function () {
$('#modal-container').modal('hide');
});
debugger;
$("#modal-container").on("hidden.bs.modal", function () {
$(".modal-body").removeData();
});
});
局部視圖
<div class="modal-body">
@using (Html.BeginForm("Create", "TripRegistration"))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.CarId)
<div class="form-group">
@Html.LabelFor(model => model.Date, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => Model.Date, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Date)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.DepartureLocation, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.DepartureLocation)
@Html.ValidationMessageFor(model => model.DepartureLocation)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.DepartureZipcode, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.DepartureZipcode)
@Html.ValidationMessageFor(model => model.DepartureZipcode)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ArrivalLocation, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ArrivalLocation)
@Html.ValidationMessageFor(model => model.ArrivalLocation)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ArrivalZipcode, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.ArrivalZipcode)
@Html.ValidationMessageFor(model => model.ArrivalZipcode)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Distance, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Distance)
@Html.ValidationMessageFor(model => model.Distance)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="button" class="btn btn-white" id="cancel">Close</button>
<button type="submit" class="btn btn-primary">Copy registration</button>
</div>
</div>
</div>
}
</div>
控制器動作
[NoCache]
public PartialViewResult CopyTripRegistrationModal(int registrationId)
{
var tripRegistration = _tripRegistrationService.getTripRegistrationById(registrationId);
var tripRegistrationVM = AutoMapper.Mapper.Map<tblTripRegistration, TripRegistrationViewModel>(tripRegistration);
return PartialView("_CopyTripRegistration", tripRegistrationVM);
}
我已將“[OutputCache(Duration = 0)]”添加到控制器的頂部。
我希望有人可以幫助我!
您可以顯式地進行ajax調用並將其響應設置為模態體。
$(function () {
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$("#modal-container").remove();
$.get($(this).attr("href"), function (data) {
$('<div id="modal-container" class="modal fade">
<div class="modal-content" id="modalbody">'
+ data + '</div></div>').modal();
});
});
});
這將適用於您所有獨特的網址。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.