CODEWITHSUNDEEP
htmlcssasp.net-mvcasp.net-mvc-4razor
MikeJoe
MikeJoe

Reputation: 101

How to add a search bar to layout view in asp.net mvc?

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). Now the problem that I have is with the way html/css works in this case. 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. enter image description here

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. So how do I fix this html?

Upvotes: 0

Views: 10764

Answers (1)

Denys Wessels
Denys Wessels

Reputation: 17049

Instead of using navbar-collapse collapse for the <div> which holds your search controls you should use 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:

Aligning search box in bootstrap navbar

Upvotes: 2

Related Questions