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>

这就是它的外观：

在BootStrap模型中分页弹出Asp.Net MVC

1 个答案: