如何在ASP.NET MVC中向布局视图添加搜索栏？

Question

In default ASP.NET MVC application, I am trying to add a search box(which has a submit button, that will redirect to my search controller's index action). 在默认的ASP.NET MVC应用程序中，我试图添加一个搜索框（具有提交按钮，该按钮将重定向到搜索控制器的index操作）。 Now the problem that I have is with the way html/css works in this case. 现在，在这种情况下，我遇到的问题是html / css的工作方式。 Take a look at my view code here. 在这里查看我的视图代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Test</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Test", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                @using (Html.BeginForm("Index", "Search", FormMethod.Get))
            {
                    <ul class="nav navbar-nav">
                        <li>@Html.TextBox("id", ViewBag.CurrentFilter as string)</li>
                        <li><input type="submit" value="Search" /></li>
                    </ul>
                }
            </div>
            <div class="navbar-collapse collapse">
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Test</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Now here is the view for this in my browser. 现在，这是我的浏览器中的视图。

Now I just want the search box and search button to be aligned horizontally as my "Test" word is and also I don't want that black navigation bar to become big(the size of this navigation bar is less in the default code that we get when we open the default mvc application) in doing so. 现在，我只希望搜索框和搜索按钮像我的“测试”一词一样水平对齐，而且我也不希望黑色导航栏变大（默认代码中该导航栏的大小要小于我们在打开默认的mvc应用程序时获取）。 So how do I fix this html? 那么，我该如何修复该html？

Answer 1

Instead of using navbar-collapse collapse for the <div> which holds your search controls you should use navbar-left . 代替对保存搜索控件的<div>使用navbar-collapse collapse ，应使用navbar-left 。

So change this: 所以改变这个：

<div class="navbar-collapse collapse">
    @using (Html.BeginForm("Index", "Search", FormMethod.Get))
    {
        <ul class="nav navbar-nav">
            <li>@Html.TextBox("id", ViewBag.CurrentFilter as string)</li>
            <li><input type="submit" value="Search" /></li>
        </ul>
    }
</div>

To this: 对此：

<div class="navbar-left" style="margin-top:8px;">
    @using (Html.BeginForm("Index", "Search", FormMethod.Get))
    {
        <ul class="nav navbar-nav">
            <li>@Html.TextBox("id", ViewBag.CurrentFilter as string)</li>
            <li><input type="submit" value="Search" /></li>
        </ul>
    }
</div>

Output: 输出：

如何在ASP.NET MVC中向布局视图添加搜索栏？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-30 18:22:14

如何在ASP.NET MVC中向布局视图添加搜索栏？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-30 18:22:14

解决方案1
0 已采纳 2016-07-30 18:22:14