当前位置:首页 > Web开发 > 正文

代表当前访问的Controller

2024-03-31 Web开发

https://www.cnblogs.com/OceanEyes/p/using-bootstrap-components.html

Bootstrap为我们供给了十几种的可复用组件,包孕字体图标、下拉菜单、导航、警告框、弹出框、输入框组等。在你的Web Application中使用这些组件,将为用户供给一致和简单易用的用户体验。

Bootstrap组件素质上是结合了各类现有Bootstrap元素以及添加了一些奇特Class来实现。将继续探索Bootstrap丰富的组件以及将它结合到ASP.NET MVC项目中。

Bootstrap 导航条

Bootstrap导航条作为"明星组件"之一,被使用在大大都基于Bootstrap Framework的网站上。为了更好的展示Bootstrap导航条,我在ASP.NET MVC的_Layout.cshtml构造页创建一个fixed-top导航条,固然它是响应式的——在小尺寸、低辨别率的设备上打开时,它将会只展示一个按钮并带有3个子菜单,当点击按钮时垂直展示他们。在网页上显示如下:

在移动设备上显示如下:

在ASP.NET MVC默认的_Layouts.cshtml构造页中已经帮我们实现了上述成果,打开它对其稍作改削,如下代码片段所示:

 View Code

此中class为.navbar-fixed-top可以让导航条固定在顶部,还可包罗一个 .container 或 .container-fluid 容器,从而让导航条居中,并在两侧添加内补(padding)

注意,我使用了2个局部视图(_BackendMenuPartial和LoginPartial)来生成余下的导航条(使用.navbar-collapse类在低辨别率设备中折叠),此中局部视图逻辑是基于当前访谒的用户是否登陆来控制是否显示。

首先,添加如下代码在_BackendMenuPartial视图中,这将会在导航条中孕育产生一个搜索框:

 View Code

因为Bootstrap导航条作为整个网站的大众部分,要实现快速搜索那么必需要知道当前所处于哪个Controller,这样才华提高检索效率。所以上述代码中,增加了一个Id为fromcontroller隐藏字段,代表当前访谒的Controller。

当点击搜索时,发送HTTP POST请求到Index Action下。然后按照通报过来的fromcontroller来swith到具体的Action来执行搜索,具体的搜索逻辑代码如下:

 View Code

具体搜索的Action如下:

 View Code

列表组

列表组是灵活又强大的组件,不只能用于显示一组简单的元素,还能结合其他元素创建一组庞大的定制内容。上面的搜索为我们重定向到Result视图,在此视图中,它为我们显示了搜索功效,为了更好的展示功效,我们可以使用列表组来显示搜索到的产品,视图中的代码如下所示:

@model IEnumerable<Bootstrap.Data.Models.Products> @{ ViewBag.Title = "搜索产品"; } <div> <div> <h1>产品功效 <small>搜索条件: "@ViewBag.SearchQuery"</small></h1> </div> <ul> @foreach (var item in Model) { <a href="http://www.mamicode.com/@Url.Action("Edit","Products", new { [email protected]})">@item.ProductName <span>@item.UnitsInStock</span></a> } </ul> </div>

在上述代码中,为无序列表(<ul>)的class设置为list-group,并且每一个<li>的class为list-group-item,这是一个最简单的列表组。

徽章

徽章用来高亮条目,可以很夺目的显示新的或者未读的条目数量,为一个元素设置徽章仅仅只需要添加<span>元素并设置它的class为badge。所以,在上述代码的根本上稍作改削,添加徽章,暗示库存个数,如下HTML所示:

<a href="http://www.mamicode.com/@Url.Action("Edit","Products", new { [email protected]})"> @item.ProductName <span>@item.UnitsInStock</span> </a>

显示的功效为如下截图:

技术图片

媒体东西

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/30353.html