如何添加一個搜索欄到asp.net mvc中的佈局視圖？

在默認的ASP.NET MVC應用程序，我試圖添加一個搜索框（其中有一個提交按鈕，將重定向到我的搜索控制器的索引操作）。現在我遇到的問題是html/css在這種情況下工作的方式。看看我的視圖代碼在這裏。如何添加一個搜索欄到asp.net mvc中的佈局視圖？

<!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>

現在這是我的瀏覽器的這個觀點。

現在我只想讓搜索框和搜索按鈕水平對齊，因爲我的「測試」一詞是我也不想讓黑色導航欄變大（此導航欄的大小較小在我們打開默認mvc應用程序時得到的默認代碼中）。那麼如何解決這個HTML？

來源

2016-07-30 MikeJoe

而不是使用navbar-collapse collapse爲<div>它持有您的搜索控件，您應該使用navbar-left。

所以更改此設置：

<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-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>

輸出：

來源

2016-07-30 18:22:14

如何添加一個搜索欄到asp.net mvc中的佈局視圖？

回答

相關問題