@model mesoft.gridview.Models.CustomersViewModel <!-- GRIDVIEW--> <div> <!-- GridView Header--> <div> <!--GridView的头的左边部分--> <div> <div> <div> <input placeholder="Search" type="search"> <span> <button type="button"> <span></span> <span>Search</span> </button> </span> </div> </div> </div> <!-- GridView的头右边部分--> <div> <!-- 这里添加任何筛选操作--> @{ string[] cityFilters = {"Istanbul", "Trabzon", "Ankara", "Izmir", "Samsun", "Erzurum"}; } 根据城市筛选: <div> <button type="button" data-toggle="dropdown"> Select City <span></span> </button> <ul role="menu"> @foreach (var city in cityFilters) { <li><a href="#" data-filter-column="City" data-filter-value="@city" data-filter-operator="@mesoft.gridview.Models.FilterOperator.Equals" data-filter-conjunction="@mesoft.gridview.Models.FilterConjunction.And">@city</a></li> } <li></li> <li><a href="#" data-filter-column="City" data-filter-value="All">All</a></li> </ul> </div> </div> </div> <!-- GridView ViewPort--> <div data-getdata-function="@Url.Action("GetCustomers", "Home")" data-default-pagesize="10"> <div> @*Data Will Load Here*@ </div> <div> <img src="https://www.jb51.net/~/content/images/loading.gif" /> </div> </div> <!-- GridView的分页区域--> <div> @Html.DisplayFor(x => x.PagingInfo, "Pager") </div> </div>
About.cshtml
@{ ViewBag.Title = "About"; } <h2>@ViewBag.Title.</h2> <h3>@ViewBag.Message</h3> <p>#</p>
Contact.cshtml
@{ ViewBag.Title = "Contact"; } <h2>@ViewBag.Title.</h2> <h3>@ViewBag.Message</h3> <address> <strong>Support:</strong> <a href="https://www.jb51.net/827937686@qq.com">827937686@qq.com</a><br /> </address>
Index.cshtml
@model mesoft.gridview.Models.CustomersViewModel @{ ViewBag.Title = "Home Page"; } <div> <h1>Gridview</h1> <p>简单易用，开发简单</p> <p><a href="#">Learn more »</a></p> </div> <!-- GRIDVIEW Area--> <div> @Html.Partial("_GridViewPartial") </div> @section Scripts { <script> $('.gridview1').meGridView(); //$('.gridview2').meGridView(); </script> }
Shared文件夹下：
_Layout.cshtml
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title -GridView的用法示例应用程序</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <div> <div> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span></span> <span></span> <span></span> </button> @Html.ActionLink("GridView", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div> <ul> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> @*@Html.Partial("_LoginPartial")*@ </div> </div> </div> <div> @RenderBody() <hr /> <footer> <p>© @DateTime.Now.Year - WuLex</p> </footer> </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body> </html>
运行结果如图:
为大家附3个精彩的专题：