C# MVC：使用 ajax 显示列表项答案

【问题标题】：C# MVC: displaying list items with ajaxC# MVC：使用 ajax 显示列表项
【发布时间】：2015-05-09 08:48:40
【问题描述】：

我正在尝试使用 AJAX 显示列表项。首先，当您进入该页面时，您将看到列表的第一项。单击“下一步”后，AJAX 将使用列表中的下一项刷新其 div。

控制器

public ActionResult Index()
    {
        if (Request.IsAjaxRequest())
        {
          return PartialView(_attractions.Last());
        }

        return View(_attractions.First());
    }

查看

@using System.Web.Mvc.Ajax;
@model EasyTripNow.Models.Attraction

@{
    ViewBag.Title = "Index";
}

    @Html.Partial("_Attraction", Model)

    @using (Ajax.BeginForm(
        new AjaxOptions()
        {
            HttpMethod = "get",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "newAttraction"
        }))
    {
        <input type="submit" value="Next"/>
    }

景点局部视图

@model EasyTripNow.Models.Attraction

<html>

<head>
    <title>Hi</title>
</head>
<body>
<div id="newAttraction">
    <h4>Attraction</h4>
    @Html.EditorForModel(Model)
    <p>
        @Html.ActionLink("Edit", "Edit", new {id = Model.ID}) |
        @Html.ActionLink("Back to List", "Index")
    </p>
</div>
</body>
</html>

更新

控制器

   public ActionResult Index(int? index)
   {

        if (Request.IsAjaxRequest())
        {
            return PartialView(_attractionList.ElementAt(index.Value)); // next element in the list
        }

        return View(_attractionList.First());
    }

查看

@model EasyTripNow.Models.Attraction

@{
    ViewBag.Title = "Index";
}
<html>


<head>
    <title>Hi</title>
</head>

<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="attraction">
    @Html.Partial("_Attraction", Model)
    <button id="next" type="button">Next</button>
</div>

<script>
    var idx = 0;
    var container = $('#attraction');
    var url = '@Url.Action("Index")';
    $('#next').click(function() {
        idx++; // increment
        $.get(url, { index: idx }, function(response) {
            container.empty().append(response);
        });
    });
</script>
</body>
</html>

景点部分视图：

@model EasyTripNow.Models.Attraction

<html>

<head>
    <title>Hi</title>
</head>
<body>
    <h4>Attraction</h4>
    @Html.DisplayFor(m => m.ID)
    <p>
        @Html.ActionLink("Edit", "Edit", new {id = Model.ID}) |
        @Html.ActionLink("Back to List", "Index")
    </p>
</body>
</html>

想不出好办法。

有什么建议吗？

【问题讨论】：

你为什么有Ajax.BeginForm()？ - 它看起来像你在做一个 GET，而不是一个帖子。您的 index 方法需要一个参数来接受您想要的项目的索引，并且您需要在每次调用中增加该值
谁会增加这个值？
最好的办法是摆脱过时的Ajax 助手，只使用jquery。包括一个最初设置为零的 javascript 变量，并在每次调用时递增它。如果您不清楚，请告诉我，我会发布并回答
对 javascript 和 jquery 不太熟悉，这就是我使用帮助程序的原因。您可以发布答案吗？非常感谢！！！！！！

标签： javascript c# jquery ajax asp.net-mvc

【解决方案1】：

Index() 方法需要有一个参数来标识要在部分视图中返回的项目的索引（将其重命名为 Details() 可能更合适）

public ActionResult Index(int? index)
{
    if (Request.IsAjaxRequest())
    {
        return PartialView("_Attraction", _attractionList.ElementAt(index.Value));
    }
   return View(_attractionList.First());
}

在视图中

@model EasyTripNow.Models.Attraction
....
<div id="attraction">
    @Html.Partial("_Attraction", Model)
</div>
<button type="button" id="next">Next</button>

<script>
    var idx = 0;
    var container = $('#attraction');
    var url = '@Url.Action("Index")';
    $('#next').click(function() {
        idx++; // increment
        $.get(url, { index: idx }, function(response) {
          container.empty().append(response);
        });
    });
</script>

【讨论】：