ASP.NET MVC 项目模板在移动设备上无法调整为 100%

问题描述 投票：0回答：1

我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。

我在视图上使用数据表：

@model IEnumerable<iziConference.Models.EventAttendee>

<h2>Participantes.</h2>
<br />
<button><a style="text-decoration: none" href='@Url.Action("Create", new { eventId = ViewBag.EventId })'>Criar Participante</a></button>
<button id="at-btn-refresh"> Actualizar</button>
<input id="eventId" type="hidden" value="@ViewBag.EventId">
<table id="at-attendees-list" cellpadding="10" border="1" class="row-border stripe">
    <thead>
        <tr>
            <th>ID</th>
            <th>Tipo</th>
            <th>Nome</th>
            <th>Email</th>
            <th>Estado  </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr id="[email protected]_Id">
                <td style="padding: 5px">
                    @Html.DisplayFor(modelItem => item.Attendee.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.AttendeeType)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Attendee.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Attendee.Email)
                </td>
                <td>
                    @if (item.IsActive)
                    {
                        <button id="[email protected]_Id" class="at-btn-active-state active" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="false" data-show-confirmation-alert="true">Desactivar</button>
                    }
                    else
                    {
                        <button id="[email protected]_Id" class="at-btn-active-state inactive" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="true" data-show-confirmation-alert="true">Activar</button>
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

由脚本加载：

var _atteendeesList = "at-attendees-list";

 $("#" + _atteendeesList).DataTable({
    "paging": false,
    "info": false,
    "language": {
        "search": "Pesquisar:",
        "info": "Participantes inscritos: _PAGES_"
    }
 });

使用默认的_Layout.cshtml：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>izigo Conference - Gestor de Conteúdos</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <header>
        <div class="content-wrapper">
            <section id="login">
                @Html.Partial(MVC.Account.Views._LoginPartial)
            </section>
            <div style="padding: 10px;">
                @if (Request.IsAuthenticated)
                {
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", MVC.Home.Index())</li>
                            <li>@Html.ActionLink("Participantes", MVC.Attendee.Index())</li>
                            <li>@Html.ActionLink("Check-in", MVC.Checkin.Index())</li>
                        </ul>
                    </nav>
                }
            </div>
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer style="padding-left: 25px;">
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - <a href="https://www.izigo.pt/conference" target="_blank">izigo Conference</a> - <i>Powered by</i><a href="https://www.izigo.pt" target="_blank">izigo.pt</a></p>
            </div>
        </div>
    </footer>

    @Scripts.Render("~/bundles/jquery", "~/bundles/iziconference")
    @RenderSection("scripts", required: false)
</body>
</html>
css asp.net-mvc
1个回答
0
投票

研究了 dataTables 库的选项后，我找到了一个创建响应式解决方案的选项：

我已经包含了响应表结构和columnDefs的选项，以选择哪些选项在移动设备中保持可见：

$("#" + _atteendeesList).DataTable({
"responsive": true,
"columnDefs": [
    { responsivePriority: 1, targets: 0 },
    { responsivePriority: 2, targets: -1 }
    ],
"paging": false,
"info": false,
"language": {
    "search": "Pesquisar:",
    "info": "Participantes inscritos: _PAGES_"
    }
});

我还必须在捆绑包中包含数据表扩展的 js 和 css 响应式库（可在此处下载：https://datatables.net/download/）：

            bundles.Add(new ScriptBundle("~/bundles/iziconference").Include(
                    "~/Content/Scripts/datatables.min.js",
                    "~/Content/Scripts/dataTables.responsive.min.js")); // add-on


            bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/Styles/datatables.min.css",
                    "~/Content/Styles/responsive.dataTables.min.css"));
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.