c# - 将左列添加到 MVC Net Core 元素模板 View 中，该 View 会随着用户向下滚动而消失

Question

我已经创建了一个 MVC Core Net 元素模板。我从脚手架创建了一个产品索引表。

如何在左侧添加一列，如红框所示？这不是侧面导航栏，而只是该页面特定类别的左侧一列。当用户向下滚动时，左栏应该消失。它不应该被修复。

Column Left Image

@model IPagedList<ElectronicsStore.Models.Product>
@{
    ViewBag.Title = "Products";
    int counter = 0;
}
@using X.PagedList;
@using X.PagedList.Mvc.Core;


<table class="table" >
    <thead>
        <tr>
            <th class="col3">
                @*@Html.DisplayNameFor(model => model.FirstOrDefault().ProductName)*@
            </th>
            <th class="col4">
                @*@Html.DisplayNameFor(model => model.FirstOrDefault().ProductDescription)*@
            </th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in ViewBag.OnePageOfProducts)
        {
        <tr>
            <td class="col3">

                    <a href='@Url.Action("Details","Products" , new { id=item.ProductId })'>
                        <img src="~/images/@(item.ImageLocation)"  data-holder-rendered="true" >
                    </a>
                    <div class="caption">

            </td>
            @*<td class="col3">
                <img src="~/images/@(item.ImageLocation)" data-holder-rendered="true" />

            </td>*@
            <td class="col4">

                    <br />
                    @item.ProductName

            </td>
        </tr>
        }
    </tbody>
</table>



@Html.PagedListPager((IPagedList)ViewBag.OnePageOfProducts, page => Url.Action("Index", new { page }))

c# html css asp.net-mvc asp.net-core

Answer 1

您可以使用 bootstrap 4 提供的侧边栏菜单，它是 stylist您需要包含 Bootstrap 和 jQuery 的 js，请通过链接

注意:代码仅供演示:

please refer this for css,js and other stuff

@model IPagedList<ElectronicsStore.Models.Product>@{
ViewBag.Title = Products";
int counter = 0;
}
@using X.PagedList;
@using X.PagedList.Mvc.Core;


<div id="wrapper">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        Start Bootstrap
                    </a>
                </li>
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Shortcuts</a>
                </li>
                <li>
                    <a href="#">Overview</a>
                </li>
                <li>
                    <a href="#">Events</a>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
        <!-- put you code here -->

                <a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Toggle Menu</a>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>