使用 Ajax 刷新 Asp.Net MVC 部分视图

问题描述

我正在使用ajax调用删除记录，成功后我想刷新表记录但不加载整个页面。所以我为此创建了一个局部视图。

我的部分查看代码：

@model IEnumerable<MyAppModels.StudentModel>

<table class="table">
    <tr>
        <th>
            @Html.displayNameFor(model => model.FName)
        </th>
        <th>
            @Html.displayNameFor(model => model.LName)
        </th>
        <th>
            @Html.displayNameFor(model => model.Email)
        </th>
        <th>
            @Html.displayNameFor(model => model.address.Details)
        </th>
        <th>
            @Html.displayNameFor(model => model.address.Country)
        </th>
        <th>
            @Html.displayNameFor(model => model.address.State)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                <input type="hidden" name="stid" id="stid" value="@item.Id" />
                @Html.displayFor(modelItem => item.FName)
            </td>
            <td>
                @Html.displayFor(modelItem => item.LName)
            </td>
            <td>
                @Html.displayFor(modelItem => item.Email)
            </td>
            <td>
                @Html.displayFor(modelItem => item.address.Details)
            </td>
            <td>
                @Html.displayFor(modelItem => item.address.Country)
            </td>
            <td>
                @Html.displayFor(modelItem => item.address.State)
            </td>
            <td>
                @Html.ActionLink("Edit","Edit",new { id = item.Id }) |
                @Html.ActionLink("Details","Details",new { id = item.Id }) |
                @Html.ActionLink("Delete","Delete",new { id = item.Id },new { Id = item.Id,Name = "del" })
            </td>
        </tr>
    }

</table>

我的控制器代码：

 public ActionResult AStudents()
        {
            var res = stude.GettAllStudents();
            return PartialView("_StudentData",res);
        }

我的 Ajax/Js 代码：

// Delete record
            var name=document.getElementsByName( "del" );
            $(name).click(function (e) {
                e.preventDefault();
                var id = this.id;
                var url="Home/AStudents"
                $.ajax({
                    method: "POST",url: "Delete/" + id,contentType: "application/json; charset=utf-8",cache: false,async: true,data: JSON.stringify(id),success: function (data) {

                        $("#strecord").load("AStudents");
                        console.log(data);

                    },error: function (err) {
                        console.log('Failed to get data' + err);
                       
                    }
                });


            });

我调用局部视图的视图：

@{
    ViewBag.Title = "AllStudents";
}

<h2>AllStudents</h2>

<p>
    @Html.ActionLink("Create New","Create")
</p>

<div id="strecord" name="strecord">
    @{ Html.RenderPartial("_StudentData");}

</div>

输出：

当我单击删除链接时，它会删除记录并根据需要加载视图，但问题是当我单击其他记录时，它显示错误“未找到记录”，这是因为视图过载第一个视图而不是刷新它。 我不知道如何刷新它，而不是过载。从重载来看，我的意思是我的 ajax 代码在已经加载的视图上加载了一个 Partialview，因此错误发生并一直持续到我刷新页面。

任何帮助将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）