如何解决在数据表中更新基于行的更新时,表在关闭模态时刷新
当我更新并保存数据表中的行并关闭模式时,它不会更新。 当我在完整部分键入名称数据表时,它给出了一个错误并且旧列表不断出现。如何更新列表?
$.ajax({
....
....
success: function (data) {
},complete: function () {
setTimeout(function () {
$('#TechDocUpdateModal').modal('hide');
},100)
},
解决方法
当我在完整部分中键入名称数据表时,它给出了一个错误并且旧列表不断出现。如何更新列表?
不用刷新页面就使用ajax,如果要刷新页面,为什么不使用普通的表单提交?
如果必须使用ajax刷新页面,可以使用window.location.href
重定向刷新页面:
success: function () {
$('#TechDocUpdateModal').modal('hide');
window.location.href = "YourUrl";
}
这是一个工作演示:
型号:
public class Blog
{
public int BlogId { get; set; }
public string Name { get; set; }
}
Index.cshtml:
@model IEnumerable<Blog>
<h1>Index</h1>
<button type="button" id="btn1" data-toggle="modal" data-target="#exampleModal">Create</button>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
<a asp-action="Edit" asp-route-id="@item.BlogId">Edit</a> |
<a asp-action="Details" asp-route-id="@item.BlogId">Details</a> |
<a asp-action="Delete" asp-route-id="@item.BlogId">Delete</a>
</td>
</tr>
}
</tbody>
</table>
<!--Modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="Close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="details">
<form>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label class="control-label">Name</label>
<input name="Name" class="form-control" />
<span asp-validation-for="@Model.ElementAt(0).Name" class="text-danger"></span>
</div>
<div class="form-group">
<input type="button" id="Add" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="Close()">Close</button>
</div>
</div>
</div>
</div>
JS:
@section Scripts
{
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
$('#Add').click(() => {
$.ajax({
url: "/Blogs/Create",method: "POST",data: $("form").serialize(),success: function () {
$('#exampleModal').modal('hide');
window.location.href = "/Blogs/Index";
}
})
})
</script>
}
控制器:
public class BlogsController : Controller
{
private readonly YourDbContext _context;
public BlogsController(YourDbContext context)
{
_context = context;
}
// GET: Blogs
public async Task<IActionResult> Index()
{
return View(await _context.Blogs.ToListAsync());
}
[HttpPost]
public async Task Create([Bind("BlogId,Name")] Blog blog)
{
if (ModelState.IsValid)
{
_context.Add(blog);
await _context.SaveChangesAsync();
}
//do your stuff...
}
}
结果:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。