asp .net中自动完成的布局问题

本文关键字：布局 问题 net asp | 更新日期: 2023-09-27 18:03:31

我遵循这个教程:pluralsight.com/training/Player?author=scott-allen&name=mvc4-building-m6-ajax&mode=live&clip=0&course=mvc4-building。当我添加自动完成功能时，我遇到了表单布局的问题。在搜索之前，它看起来像这样https://i.stack.imgur.com/RH2WM.png。当我开始键入搜索表单，我得到预期的列表，但它看起来不太好:https://i.stack.imgur.com/TWbea.png。这是我的索引。cshtml

@model IEnumerable<MvcApp.Models.Car>
<p>
    @Html.ActionLink("Create New", "Create")
</p>

<form method="get" action="@Url.Action("Index")" data-mz-ajax="true" data-mz-target="#carsList">
    <input type="search" name="searchString" data-mz-autocomplete="@Url.Action("AutoComplete")" />
    <input type="submit" name="Search By Name" value="Search" />
</form>
@Html.Partial("_Cars", Model)

这是我的_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@Page.Title</title>
@RenderSection("head", required: false)
@Styles.Render("~/Content/bootstrap")
@Styles.Render("~/Content/css")
</head>
<body>
<header>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="row">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Główna","Index","Home")</li>
                    <li>@Html.ActionLink("O stronie", "About", "Home")</li>
                    <li>@Html.ActionLink("Kontakt","Contact","Home")</li>
                    <li>@Html.ActionLink("Lista samochodów","Index","Cars")</li>
                </ul>
            </div>
        </div>

    </nav>
    <div class="jumbotron" id="header-jumbotron">
        <h2>ABC</h2>
    </div>
</header>
@RenderBody()
@Scripts.Render("~/bundles/mz")
@Scripts.Render("~/bundles/bootstrap")

我猜这是css的问题，但我没有任何经验。我该如何改进它?我希望这个列表能在pluralsight教程(或google搜索)中显示

asp .net中自动完成的布局问题

我看不到你的目标(除非我错过了什么)。试试这个:

<div id="carsList">
    <form method="get" action="@Url.Action("Index")" data-mz-ajax="true" data-mz-target="#carsList">
        <input type="search" name="searchString" data-mz-autocomplete="@Url.Action("AutoComplete")" />
        <input type="submit" name="Search By Name" value="Search" />
    </form>
</div>

在jquery中，您可以设置是否替换或追加div。您也可以在需要的地方移动div。

相关文章：