A paggina AJAX con vista parziale

Question

Non riesco a capire come ottenere una vista parziale per eseguire il rendering di un elenco di pagine usando ajax.

Il più vicino che ho preso al lavoro è l'esempio da Using paging in partial view, asp.net mvc

praticamente sto cercando di creare una pagina con un elenco di commenti per utente in cui la pagina può essere modificato nello stesso modo come il scheda risposte nella pagina degli utenti di StackOverflow.

L'impaginazione funziona bene sul primo clic del cercapersone, ma poi la vista parziale è tutto ciò che viene restituito quando faccio nuovamente clic sul cercapersone.

controllore:

public class ProductController : Controller 
{ 
    public IQueryable<Product> products = new List<Product> { 
    new Product{ProductId = 1, Name = "p1"}, 
    new Product{ProductId = 2, Name = "p2"}, 
     new Product{ProductId = 3, Name = "p3"}, 
     new Product{ProductId = 4, Name = "p4"}, 
     new Product{ProductId = 5, Name = "p5"} 
    }.AsQueryable(); 

    public object Index() 
    {   
     return View(); 
    } 

    public object Products(int? page) 
    { 
     var pageNumber = page ?? 1; // if no page was specified in the querystring, default to the first page (1) 
     var onePageOfProducts = products.ToPagedList(pageNumber, 3); // will only contain 25 products max because of the pageSize 

     ViewBag.OnePageOfProducts = onePageOfProducts; 
     return PartialView("_Products"); 
    } 
} 

Visualizzazioni:

Index.cshtml:

<link href="/Content/PagedList.css" rel="stylesheet" type="text/css" /> 

<h2>List of Products</h2> 

<div id="products">  
    @Html.Action("Products", "Product") 
</div> 


@section scripts{ 

    <script type="text/javascript"> 
    $(function() { 
    $('#myPager').on('click', 'a', function() { 
     $.ajax({ 
      url: this.href, 
      type: 'GET', 
      cache: false, 
      success: function(result) { 
       $('#products').html(result); 
      } 
     }); 
     return false; 
    }); 
    }); 
    </script> 
    } 

_Products.cshtml:

@using PagedList.Mvc; 
@using PagedList; 


<ul> 
    @foreach(var product in ViewBag.OnePageOfProducts){ 
     <li>@product.Name</li> 
    } 
</ul> 

<!-- output a paging control that lets the user navigation to the previous page, next page, etc --> 
<div id="myPager"> 
    @Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Products", new { page })) 
</div> 

Girl

public class Product 
{ 
    public int ProductId { get; set; } 
    public string Name { get; set; } 
} 

Qualcuno può mostrarmi cosa sto facendo male?

Answer 1

ho finito per usare l'esempio ajax discreto dalla sorgente pagedlist [https://github.com/troygoode/PagedList][1]

vista parziale:

@using PagedList; 
@using PagedList.Mvc;  

<ul id="names" start="@ViewBag.Names.FirstItemOnPage"> 
    @foreach(var i in ViewBag.Names){ 
     <li>@i</li> 
    } 
</ul> 

@Html.PagedListPager((IPagedList)ViewBag.Names, page => Url.Action("Index", new { page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions(){ HttpMethod = "GET", UpdateTargetId = "unobtrusive"})) 

Indice:

@{ 
    ViewBag.Title = "Unobtrusive Ajax"; 
} 
@using PagedList; 
@using PagedList.Mvc; 

@Styles.Render("~/Content/PagedList.css") 

<h2>Unobtrusive Ajax</h2> 

<p>Example of paging a list:</p> 
<div id="unobtrusive"> 
    @Html.Partial("UnobtrusiveAjax_Partial") 
</div> 

Controller:

public class UnobtrusiveAjaxController : BaseController 
    { 
     // Unobtrusive Ajax 
     public ActionResult Index(int? page) 
     { 
      var listPaged = GetPagedNames(page); // GetPagedNames is found in BaseController 
      if (listPaged == null) 
       return HttpNotFound(); 

      ViewBag.Names = listPaged; 
      return Request.IsAjaxRequest() 
       ? (ActionResult)PartialView("UnobtrusiveAjax_Partial") 
       : View(); 
     } 
    } 

Answer 2

Per ogni evenienza, dal momento che la domanda originale non ha avuto risposta. Immagino che il problema era che i click handler non venivano riattaccati ai nuovi elementi del cercapersone generati dalla richiesta AJAX. Anche in questo caso non mi piace la soluzione AJAX non invasiva, poiché l'id del cercapersone è codificato nella vista nidificata mentre passarla in qualche altro modo può essere troppo macchinoso. ?

<script type="text/javascript"> 
    // better not to clutter global scope of course, just for brevity sake 
    var attachHandlers = function() { 
     $('#myPager a').click(function() { 
      $('#myPager').load(this.href, function() { 
       attachHandlers(); 
      }); 
      return false; 
     }); 
    }; 

    $(document).ready(function() { 
     attachHandlers(); 
    }); 
</script>