locked
Second Menu at Top of View RRS feed

  • Question

  • User2074931137 posted

    The code (immediately) below is a menu that I improvised to run along top of view (full view code at bottom).  The items appear on the computer but do not appear on the phone.  What is the correct way to have a menu within a view at the top of a view or elsewhere so that it appears on both computer and phone?

    <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Seniority", "IndexSeniority", "Contact")</li> <li>@Html.ActionLink("Inactive", "IndexInactive", "Contact")</li> </ul> </div> 

    GUI as it appears to user (PDF) on...

    Phone

    Computer

    @model IEnumerable<fvm.Models.Contact>
    
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Seniority", "IndexSeniority", "Contact")</li>
            <li>@Html.ActionLink("Inactive", "IndexInactive", "Contact")</li>
        </ul>
    </div>
    
    @{
        ViewBag.Title = "Contact - Active";
    }
    
    <h2>Employees</h2>
    
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    
    @using (Html.BeginForm("index", "Contact"))
    
    {
    <p>
        Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
        <input type="submit" value="Search">
    </p>
    }
    @Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameLastSort, currentFilter = ViewBag.CurrentFilter })
    
    <table class="table">
        <tr>
            <th>
                @Html.ActionLink("Employee", "Index", new { sortOrder = ViewBag.NameFirstSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                Contact: Primary
            </th>
            <th>
                Secondary
            </th>
            <th>
                @Html.ActionLink("Seniority", "Index", new { sortOrder = ViewBag.SenioritySort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                Employee ID
            </th>
            <th>
                @Html.ActionLink("AM Report", "Index", new { sortOrder = ViewBag.ReportAMSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                @Html.ActionLink("PM Report", "Index", new { sortOrder = ViewBag.ReportPMSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                @Html.ActionLink("Guaranteed Hours", "Index", new { sortOrder = ViewBag.GuaranteedHoursSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th></th>
        </tr>
    
        @foreach (var item in Model) {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactDesignator1String)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactPhone1)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactPhone2)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactSeniority)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactDesignator2String)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactReportAM)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactReportPM)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactHoursGuaranteed)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id=item.ContactID }) |
                    @Html.ActionLink("Details", "Details", new { id=item.ContactID }) |
                    @Html.ActionLink("Delete", "Delete", new { id=item.ContactID })
                </td>
            </tr>
            }
    
        </table>
    

    Monday, March 11, 2019 6:46 PM

Answers

  • User409696431 posted

    We can't compare the phone and computer from pictures.  We don't know what menus are in the phone's three bar dropdown.

    Nor can we see the CSS and media queries to see how the menu changes on a phone, or what the classes you gave your new menu items do.

    Publish a page, and give us a link to that page.  Then we can see what you are doing and give suggestions.

    If you don't do that, all I can say is: Don't give your new menu classes that make it vanish on a phone.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 11, 2019 10:54 PM
  • User1520731567 posted

    Hi 3v3rhart,

    According to your requirement ,I suggest you could use RenderSection in Layout view and normal view.

    For example:

    In Layout:

    ...
    <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("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> @RenderSection("headul", required: false)
    //add RenderSection to create a Placeholder,so that you could add extra menu in normal view
    </ul> </div> </div> </div> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> </footer> </div> @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body>
    ...

    In View:

    @model IEnumerable<fvm.Models.Contact>
    
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Seniority", "IndexSeniority", "Contact")</li>
            <li>@Html.ActionLink("Inactive", "IndexInactive", "Contact")</li>
        </ul>
    </div>
    
    @section headul
    {
        <li>@Html.ActionLink("Seniority", "IndexSeniority", "Contact")</li>
        <li>@Html.ActionLink("Inactive", "IndexInactive", "Contact")</li>
    }
    
    @{
        ViewBag.Title = "Contact - Active";
    }
    
    <h2>Employees</h2>
    
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    
    @using (Html.BeginForm("index", "Contact"))
    
    {
    <p>
        Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
        <input type="submit" value="Search">
    </p>
    }
    @Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameLastSort, currentFilter = ViewBag.CurrentFilter })
    
    <table class="table">
        <tr>
            <th>
                @Html.ActionLink("Employee", "Index", new { sortOrder = ViewBag.NameFirstSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                Contact: Primary
            </th>
            <th>
                Secondary
            </th>
            <th>
                @Html.ActionLink("Seniority", "Index", new { sortOrder = ViewBag.SenioritySort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                Employee ID
            </th>
            <th>
                @Html.ActionLink("AM Report", "Index", new { sortOrder = ViewBag.ReportAMSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                @Html.ActionLink("PM Report", "Index", new { sortOrder = ViewBag.ReportPMSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                @Html.ActionLink("Guaranteed Hours", "Index", new { sortOrder = ViewBag.GuaranteedHoursSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th></th>
        </tr>
    
        @foreach (var item in Model) {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactDesignator1String)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactPhone1)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactPhone2)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactSeniority)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactDesignator2String)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactReportAM)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactReportPM)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactHoursGuaranteed)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id=item.ContactID }) |
                    @Html.ActionLink("Details", "Details", new { id=item.ContactID }) |
                    @Html.ActionLink("Delete", "Delete", new { id=item.ContactID })
                </td>
            </tr>
            }
    
        </table>

    How it works:

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 12, 2019 5:37 AM

All replies

  • User475983607 posted

    Click the button with the 3 lines to see the menu items on your phone.

    Monday, March 11, 2019 7:13 PM
  • User2074931137 posted

    The question is a little bit different than the one you answered.

    I understand the pull down menus on the computer can be accessed on the phone through the small black icon with the three white lines in the upper right corner of the phone screen.

    I needed to have another menu selection within the view.

    If you compare the computer screen to the phone screen at links in the original question you will see the difference between the two.

    There may be a completely different way of doing this properly.  I'm just not sure what it is.

    Monday, March 11, 2019 8:45 PM
  • User409696431 posted

    We can't compare the phone and computer from pictures.  We don't know what menus are in the phone's three bar dropdown.

    Nor can we see the CSS and media queries to see how the menu changes on a phone, or what the classes you gave your new menu items do.

    Publish a page, and give us a link to that page.  Then we can see what you are doing and give suggestions.

    If you don't do that, all I can say is: Don't give your new menu classes that make it vanish on a phone.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 11, 2019 10:54 PM
  • User1520731567 posted

    Hi 3v3rhart,

    According to your requirement ,I suggest you could use RenderSection in Layout view and normal view.

    For example:

    In Layout:

    ...
    <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("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> @RenderSection("headul", required: false)
    //add RenderSection to create a Placeholder,so that you could add extra menu in normal view
    </ul> </div> </div> </div> <div class="container body-content"> @RenderBody() <hr /> <footer> <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> </footer> </div> @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </body>
    ...

    In View:

    @model IEnumerable<fvm.Models.Contact>
    
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Seniority", "IndexSeniority", "Contact")</li>
            <li>@Html.ActionLink("Inactive", "IndexInactive", "Contact")</li>
        </ul>
    </div>
    
    @section headul
    {
        <li>@Html.ActionLink("Seniority", "IndexSeniority", "Contact")</li>
        <li>@Html.ActionLink("Inactive", "IndexInactive", "Contact")</li>
    }
    
    @{
        ViewBag.Title = "Contact - Active";
    }
    
    <h2>Employees</h2>
    
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    
    @using (Html.BeginForm("index", "Contact"))
    
    {
    <p>
        Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string)
        <input type="submit" value="Search">
    </p>
    }
    @Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameLastSort, currentFilter = ViewBag.CurrentFilter })
    
    <table class="table">
        <tr>
            <th>
                @Html.ActionLink("Employee", "Index", new { sortOrder = ViewBag.NameFirstSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                Contact: Primary
            </th>
            <th>
                Secondary
            </th>
            <th>
                @Html.ActionLink("Seniority", "Index", new { sortOrder = ViewBag.SenioritySort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                Employee ID
            </th>
            <th>
                @Html.ActionLink("AM Report", "Index", new { sortOrder = ViewBag.ReportAMSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                @Html.ActionLink("PM Report", "Index", new { sortOrder = ViewBag.ReportPMSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th>
                @Html.ActionLink("Guaranteed Hours", "Index", new { sortOrder = ViewBag.GuaranteedHoursSort, currentFilter = ViewBag.CurrentFilter })
            </th>
            <th></th>
        </tr>
    
        @foreach (var item in Model) {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactDesignator1String)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactPhone1)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactPhone2)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactSeniority)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactDesignator2String)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactReportAM)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactReportPM)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ContactHoursGuaranteed)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id=item.ContactID }) |
                    @Html.ActionLink("Details", "Details", new { id=item.ContactID }) |
                    @Html.ActionLink("Delete", "Delete", new { id=item.ContactID })
                </td>
            </tr>
            }
    
        </table>

    How it works:

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 12, 2019 5:37 AM