Modal data does not refresh (ASP.NET MVC VS2013/BootStrap3)
Question
I am been searching for an answer to this problem for a while without any luck. I have come across multiple solutions, but they do not seem to work in my case, and I can not figure out why that is. If anyone can figure this out, I would greatly appreciate it. I am using VS2013 with BootStrap 3 and have a index page that initially accurately displays information in the modal view, but when data is updated in the modal, the modal does not refresh when it is viewed again. I have a suspicion that this is due to how things may be separated in the code, but am not sure where the problems is coming from. Unlike most examples I have run across, I had to separate my from the modal dialog, etc as you can see below, as I was following this tutorial ( http://ericsaupe.com/tag/bootstrap-3-modal-ajax/ ) in order to have bootstrap load the modal. I have tried both using jquery as well calling the hidden.bs.modal function in order to reset the data loaded by the modal, but have not had any success. The code is as follows (I have taken out some of the fluff):
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top"> ... </div>
<div class="container body-content">
@RenderBody()
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<!-- /.modal -->
<script type="text/javascript">
$('a.modalLink').click(function (e) {
e.preventDefault();
$('#myModal')
.removeData('modal')
.html('loading....')
.load($(this).attr('href'))
.modal({ show: true, backdrop: 'static' });
});
</script>
Home/Index.html:
@model IEnumerable<MyApp.Models.Team>
<ul class="nav nav-tabs">
@{ var x = 0;}
@foreach (var team in Model)
{
if (x==0)
{
<li class="active"><a href="#@team.TeamAbbreviation" data-toggle="tab">@team.TeamName</a></li>
}
else
{
<li><a href="#@team.TeamAbbreviation" data-toggle="tab">@team.TeamName</a></li>
}
x++;
}
</ul>
<div class="tab-content">
@{x = 0;}
@foreach (var team in Model)
{
if (x==0)
{
<div id="@team.TeamAbbreviation" class="tab-pane active"><p>@Html.Action("Index", "Person", new{id=@team.TeamID})</p></div>
}
else
{
<div id="@team.TeamAbbreviation" class="tab-pane"><p>@Html.Action("Index", "Person", new{id=@team.TeamID})</p></div>
}
x++;
}
</div>
Person/Index.cshtml
@model IEnumerable<MyApp.Models.Person>
@{
Layout = null;
}
<table class="table">
<tr>
<th> </th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>nbsp;</th>
</tr>
@foreach (var item in Model) {
<tr>
<td align="right">
@using (Html.BeginForm("Delete", "Person", new { id = item.PersonID }, FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="form-actions no-color" title="Delete Person">
<input type="submit" value="x" class="btnX" onclick="return confirm('Are you sure you want to permanently delete this person from the list?');" />
</div>
}
</td>
<td style="white-space:nowrap;">
@Html.DisplayFor(modelItem => item.Name)
</td>
<td style="white-space:nowrap">
<a href="@Url.Action("Edit", "Person", new { id = item.PersonID })" class="modalLink"> Edit Modal</a>
</td>
</tr>
}
</table>
Person/Edit.cshtml
@model MyApp.Models.Person
@{
Layout = null;
}
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<center><h4>Edit Information</h4></center>
<br />
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.PersonID)
<div class="form-group">
@Html.LabelFor(model => model.TeamID, new { @class = "control-label col-md-3" })
<div class="col-md-6">
@Html.DropDownList("TeamID")
@Html.ValidationMessageFor(model => model.TeamID)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.PersonName, new { @class = "control-label col-md-3", @style = "white-space:nowrap" })
<div class="col-md-6">
@Html.EditorFor(model => model.PersonName)
@Html.ValidationMessageFor(model => model.PersonName)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<input type="submit" value="Update" class="btn btn-default" />
</div>
</div>
</div>
}
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
2 answers
solution1
1 2014-03-25 23:57:55
I know you said that you have tried resetting the modal using hidden.bs.modal but not what you actually did in that function.
This works for me:
$(document.body).on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal')
});
solution2
1 2014-03-26 05:59:54
So, After realizing that it was not calling the controller on multiple clicks, I added the following code that did the trick:
$.ajaxSetup({
cache: false
})
Is there a better way to achieve this for this jquery call rather then globally?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.