在BootStrap模型中尋呼Pop UP Asp.Net MVC

Question

我是ASP.Net MVC的新手。我顯示了一些使用BootStrap模型彈出的數據。基本上通常爲每個循環顯示數據。問題是如何在這些使用PagedList.MVC或任何其他想法的情況下應用分頁。

感謝您的幫助。

Answer 1

以下是使用WebGrid和twitter bootstrap的示例。

控制器：

public class Info 
{ 
    public string Number { get; set; } 
    public string Description { get; set; } 
} 

public class HomeController : Controller 
{ 
    public ActionResult ModalPopup() 
    { 
     if (Request.IsAjaxRequest()) 
      return PartialView("~/Views/Home/_GetPartial.cshtml", GetItems()); 
     else 
      return View(); 
    } 

    public PartialViewResult _GetPartial() 
    { 
     return PartialView("~/Views/Home/_GetPartial.cshtml",GetItems()); 
    } 

    private List<Info> GetItems() 
    { 
     var item1 = new Info { Description = "Item 1", Number = "1" }; 
     var item2 = new Info { Description = "Item 2", Number = "2" }; 
     var item3 = new Info { Description = "Item 3", Number = "3" }; 

     var item4 = new Info { Description = "Item 4", Number = "4" }; 
     var item5 = new Info { Description = "Item 5", Number = "5" }; 
     var item6 = new Info { Description = "Item 6", Number = "6" }; 

     var item7 = new Info { Description = "Item 7", Number = "7" }; 
     var item8 = new Info { Description = "Item 8", Number = "8" }; 
     var item9 = new Info { Description = "Item 9", Number = "9" }; 

     return new List<Info> { item1, item2, item3, item4, item5, item6, item7, item8, item9 }; 
    } 
} 

_GetPartial.cshtml（局部視圖）：

@model IEnumerable<WebApplication7.Controllers.Info> 


@{ 
    WebGrid grid = new WebGrid(Model, canPage: true, canSort: false, rowsPerPage: 3, ajaxUpdateContainerId: "grid"); 
} 
<div id="grid"> 
    @if (Model.Any()) 
    { 
     @grid.GetHtml(
tableStyle: "table", 
columns: grid.Columns(
    grid.Column("Nr", "Nr", format: @<text> @item.Number 
    </text>, style: "p13"), 
    grid.Column("Description","Description", format: @<text> @item.Description</text>))) 
    } 
</div> 

主視圖（ModalPopup.cshtml）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 

<script type="text/javascript"> 
    $(function() { 
     $("#showModal").click(function() { 
      $('#myModal').modal('show'); 
     }); 
    }); 
</script> 
<input type="button" value="Show Modal" id="showModal" /> 
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 

      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">Grid inside modal popup</h4> 
      </div> 
      <div class="modal-body"> 
       @Html.Action("_GetPartial","Home") 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
      </div> 

     </div> 
    </div> 
</div> 

，這是它的外觀：