Question

我在session对象中存储了以下集合及其controller和action处理它。

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Remove(int id)
    {
        List<Sample> lst = (List<Sample>)Session["obj1"];

        foreach (var item in lst)
        {
            if (item.Id == id)
            {
                lst.Remove(item);
                break;
            }
        }

        return PartialView("_p1", lst);
    }

    [HttpGet]
    public ActionResult Index()
    {
        List<Sample> lst;

        if (Session["obj1"] == null)
        {
            lst = new List<Sample>();

            lst.Add(new Sample { Id = 10, Name = "grant williams" }); 
            lst.Add(new Sample { Id = 11, Name = "John Howard" }); 
            lst.Add(new Sample { Id = 12, Name = "Ken walker" }); 
            lst.Add(new Sample { Id = 13, Name = "Bondi Rogers" }); 

           Session["obj1"] = lst;
        }

        return View((List<Sample>)Session["obj1"]);
    }
}

这是Index.cshtml：

@model IEnumerable<test1.Models.Sample>

<div id="results">
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Id)
        </th>
            <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Id)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class="edit", value=item.Id}) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id }, new { @class="del", value=item.Id})
        </td>
    </tr>
}

</table>
    </div>

@section Scripts{

    <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <script>
        $('document').ready(function () {
            $('.del').on('click', function (evt) {
                evt.preventDefault();
                var x = $('.del').attr('value');

                $.ajax({
                    url: '@Url.Action("Remove", "Home")',
                    method: 'post',
                    data: JSON.stringify({ 'id': x }),
                    contentType: 'application/json chartset=utf-8',
                    dataType: 'html',
                    success: function (data) {
                        $('#results').html(data);
                    },
                    error: function () { alert('error'); }
                });
            });
        });
    </script>

    }

以下是部分视图_p1.cshtml：

@model IEnumerable<test1.Models.Sample>

<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Id)
        </th>
            <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Id)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class="edit", value=item.Id}) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id }, new { @class="del", value=item.Id})
        </td>
    </tr>
}

</table>

当我在第一次加载时加载页面时，所有加载都很好。当我单击delete到delete时，记录删除记录并将页面显示更新。但令人恐惧的是，当我查看源视图时，它仍会在源视图上显示已删除的记录，但是当我刷新页面时它会消失。但它是一个ajax调用，所以它应该刷新有记录的部分。除此之外，假设我没有刷新页面，那么如果我单击任何删除按钮，它会查找view并抛出错误。 Here is video that will visually show what happens

Answer 1

删除项目后，您需要将更新的列表设置回会话。

[HttpPost]
 public ActionResult Remove(int id)
 {
    List<Sample> lst = (List<Sample>)Session["obj1"];

     foreach (var item in lst)
     {
          if (item.Id == id)
          {
              lst.Remove(item);
               break;
           }
     }
     Session["obj1"]=lst;
     return PartialView("_p1", lst);
 }

同样针对您的第二个问题，您在加载页面时注册了click事件。该编码用于具有del类的任何当前元素。它不适用于以后添加到DOM的任何元素。您需要使用jQuery on事件委派方法来添加click事件代码，以便它可以用于将来的元素（稍后动态注入DOM）。

$(document).ready(function () {
    $(document).on('click','.del', function (e) {
       e.preventDefault();
       //do your ajax code here


    });
});

为什么我的会话对象的更新不会在页面上显示？

1 个答案: