C＃MVC：用ajax顯示列表項目

我想用AJAX顯示列表項目。首先，當你進入頁面時，你會看到列表中的第一項。單擊「下一步」後，AJAX將使用列表中的下一個項目刷新其div。C＃MVC：用ajax顯示列表項目

控制器

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>

UPDATE

控制器

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>

想不到一個好辦法。

有什麼建議嗎？

來源

2015-05-09 Saar Kuriel

爲什麼你有'Ajax.BeginForm（）'？ - 它看起來像你做一個GET，而不是一個職位。您的索引方法需要一個參數來接受所需物品的索引，並且您需要在每次呼叫中增加該值 –

以及誰將增加該值？ –

最好的辦法是擺脫過時的'Ajax'助手，並使用jquery。包含一個最初設置爲零的javascript變量，並將其每次調用增加一次。如果你不清楚，讓我知道，我會發布並回答 –

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

來源

2015-05-09 10:15:26

C＃MVC：用ajax顯示列表項目

回答

相關問題