Question

我正在尝试使用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>

想不到一个好办法。

有什么建议吗？

Answer 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>

C＃MVC：使用ajax显示列表项

1 个答案: