微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在数据表中更新基于行的更新时,表在关闭模态时刷新

如何解决在数据表中更新基于行的更新时,表在关闭模态时刷新

当我更新并保存数据表中的行并关闭模式时,它不会更新。 当我在完整部分键入名称数据表时,它给出了一个错误并且旧列表不断出现。如何更新列表?

   $.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">&times;</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...
    }
}

结果:

enter image description here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。