c# - <form>中的Asp.net core设置后台

Question

大家好，我们正在和 friend 一起学习如何编码，我们刚刚从后端转向前端。一开始我们遇到了一个我们无法解决的问题。我们希望在这种形式的背景中有一张图片:

<form asp-controller="Notes" asp-action="Index" method="get">
        <p1>
            Hashtag: @Html.DropDownList("noteHashtag", "All")
            Name: <input type="text" name="SearchString">
            <input type="submit" value="Filter" />
        </p1>
    </form>

我们尝试做一些事情，比如添加到 p1 或形成这样的东西:

style="background-image:url(//images///images/SearchBg.jpg)"

但它不起作用。我们在 ASP.NET core 1.0.0 中学习。 感谢回复

Answer 1

这很可能是因为您通过相对 URL 定位图像，该 URL 将相对于它出现在的 View 。

这通常可以通过使用 Url.Content() 来解决。通过使用绝对路径来避免任何相对路径问题的辅助方法:

<form ... style="background: url('@Url.Content("~/images/images/SearchBg.jpg")');">
   <!-- Your content here -->
</form>

备选方案:考虑使用 CSS 样式

在这种情况下，您可以通过不相对于定义它们的 View 来引用您的图像，而是在您的 CSS 文件中引用它们来解决您的相对路径问题。

考虑在您的 CSS 文件中创建类似于以下内容的样式:

.search-background {
    /* Ensure that the relative URL used is from your CSS file to the target image! */
    background: url('/images/searchBg.jpeg');
}

只要您的 URL 在那里是正确的，那么您只需将 class 属性添加到您的表单以正确解析图像并应用背景应该没有问题:

<form ... class='search-background'>
    <!-- Your content here -->
</form>