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

Question

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

   $.ajax({
            ....
            ....
     success: function (data) {
                   
             },
             complete: function () {
                 setTimeout(function () {
                     $('#TechDocUpdateModal').modal('hide');
                 }, 100)
             },

Answer 1

当我在完整部分中键入名称数据表时，它会给出错误并且旧列表不断出现。如何更新列表？

使用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...
    }
}

结果：