How to Activate a Li Element from the url

Question

How to Activate a Li Element from the url

Navigation

#1 by (0 votes)

0

Hi, I have a list of 3 elements and I need to know how I can put an element of that class="active" list from a call with @UrlAction. Thanks in advance

INDEX WHERE THE LISTING IS THE ELEMENT IS TRACKING

@{if (!User.Identity.IsAuthenticated)
    {
        <div class="mi-copa-box mt-4">
            <div class="row">
                <div class="col-3">
                    <ul class="copa-box-list">
                        <li id="#mi_copa_box" class="active"><i class="fas fa-laptop"></i> @Resources.Resource.mi_copa_box</li>
                        <li id="#registrate"><i class="fas fa-sign-in-alt"></i> @Resources.Resource.registrate</li>
                        <li id="#tracking"><i class="fas fa-plane"></i> @Resources.Resource.tracking</li>
                    </ul>
                </div>
                <div class="col-9 form-content">
                    <div class="box" id="mi_copa_box" style="display: block">
                        @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class = "form-mi-copa-box" }))
                        {
                            @Html.AntiForgeryToken()
                            <div class="col-4">
                                <div style="box-sizing: border-box; padding-left: 20px; padding-right: 7px">
                                    <label for="txtUsuario" class="text-center small">@Resources.Resource.nombreusuario</label>
                                    <input id="txtUsuario" type="email" class="form-control form-control-sm" name="Email" />
                                </div>
                            </div>
                            <div class="col-4">
                                <div style="box-sizing: border-box; padding-left: 7px; padding-left: 15px">
                                    <label for="txtPassword" class="text-center small">@Resources.Resource.contrasena</label>
                                    <input id="txtPassword" type="password" class="form-control form-control-sm" name="Password" />
                                </div>
                            </div>
                            <div class="col-4">
                                <div style="box-sizing: border-box; padding: 20px; padding-top: 10px;">
                                    <input style="width: 70%; margin-left: 15%" type="submit" class="btn btn-primary btn-sm" value="@Resources.Resource.ingresar" />
                                    <a href="@(Url.Action("ContrasenaOlvidada","Home"))" class="text-center w-100 small float-left underline" style="margin-top: 10px;">@Resources.Resource.olvidosucontrasena</a>
                                </div>
                            </div>
                        }
                    </div>
                    <div class="box" id="registrate">
                        <div class="col-9">
                            <p class="gray" style="box-sizing: border-box;font-size: 0.9rem;padding-top: 4.3rem;padding: 40px 80px 0px;">@Resources.Resource.registrateencopabox</p>
                        </div>
                        <div class="col-3 p-4">
                            <a href="@(Url.Action("Registrate","Account"))" class="btn btn-primary btn-sm w-100 mt-4">@Resources.Resource.crearCuenta</a>
                        </div>
                    </div>
                    <div class="box" id="tracking" style="padding-top: 2.2rem" name="tracking">
                        <div class="col-4">
                            <label for="txtTracking" class="w-100 text-center" style="font-size: 0.9rem;padding-top: 4px;">@Resources.Resource.ingresaTracking</label>
                        </div>
                        <div class="col-4">
                            <input id="txtTracking" type="text" class="form-control form-control-sm" name="tracking" />
                        </div>
                        <div class="col-4 px-5">
                            <input type="button" class="btn btn-primary btn-sm w-100" value="@Resources.Resource.buscar" onclick="enviarTracking();" />
                        </div>

                    </div>
                    <div id="tracking-result" class="box" style="padding-top: 2.2rem; display:none;">
                        <div class="col-12">
                            <div id="screen">
                                <ul>
                                    <li id="marca-origen"><i class="fas fa-check"></i></li>
                                    <li id="marca-transito"><i class="fas fa-check"></i></li>
                                    <li id="marca-destino"><i class="fas fa-check"></i></li>
                                </ul>
                                <div class="row pt-2">
                                    <div class="col-4"><label id="origen-tracking" class="etiqueta-tracking">@Resources.Resource.recibido</label><label id="fecha-origen-tracking" class="etiqueta-tracking"></label></div>
                                    <div class="col-4"><label id="transito-tracking" class="etiqueta-tracking">@Resources.Resource.transito</label><label id="fecha-transito-tracking" class="etiqueta-tracking"></label></div>
                                    <div class="col-4"><label id="destino-tracking" class="etiqueta-tracking">@Resources.Resource.listoretiro</label><label id="fecha-destino-tracking" class="etiqueta-tracking"></label></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    }
    else
    {

        <div class="mi-copa-box mi-copa-box-autenticado mt-4">
            <div class="row" style="min-height:134px;">
                <div class="col-3">
                    <ul class="copa-box-list">
                        <li id="#mi_copa_box" class="active"><i class="fas fa-laptop"></i> @Resources.Resource.mi_copa_box</li>
                        <li id="#tracking"><i class="fas fa-plane"></i> @Resources.Resource.tracking</li>
                    </ul>
                </div>
                <div class="col-9 form-content">
                    <div class="box" id="mi_copa_box" style="display: block">
                        @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class = "form-mi-copa-box" }))
                        {
                            @Html.AntiForgeryToken()
                            <div class="col-9">
                                <div style="box-sizing: border-box; padding-left: 20px; padding-right: 7px">
                                    <p class="text-center font-weight-bold">@($"{Resources.Resource.hola} {User.Identity.GetFieldValue("Nombre")},")</p>
                                    <p>@Resources.Resource.infoperfil <a href="@(Url.Action("Index", "AreaPrivada"))">@Resources.Resource.aqui</a></p>
                                </div>
                            </div>
                            <div class="col-3">

                                <a href="@(Url.Action("Index","AreaPrivada"))" class="btn btn-primary btn-sm w-100 mt-5">@Resources.Resource.mi_copa_box</a>

                            </div>
                        }
                    </div>
                    <div class="box" id="tracking" style="padding-top: 3rem">
                        <div class="col-4">
                            <label for="txtTracking" class="gray w-100 text-center" style="font-size: 0.9rem;padding-top: 4px;">@Resources.Resource.ingresaTracking</label>
                        </div>
                        <div class="col-4">
                            <input id="txtTracking" type="text" class="form-control form-control-sm" name="usuario" />
                        </div>
                        <div class="col-4 px-5">
                            <input type="button" class="btn btn-primary btn-sm w-100" value="Buscar" onclick="enviarTracking();" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

    }

}

SECTION WITH THE LINK TO TRACKING

@ Resources.Resource.respuestafaq5 @ Resources.Resource.tracking

javascript html mvc

asked by Dario Gonzalez 19.10.2018 в 11:09

source

1 answer

Validate inputs type Email are equal AngularJs Stop sequence in php

score 0 · Answer 1

You have several options to do what you want, one would be to use a ternary operator with the object ViewContext

For example

<ul class="copa-box-list">
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Menu" ? "active" : "")">@Html.ActionLink("Menu1", "Index", "Home")</li>
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Menu2" ? "active" : "")">@Html.ActionLink("Menu2", "Menu2", "Home")</li>
    <li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Menu3" ? "active" : "")">@Html.ActionLink("Menu3", "Menu3", "Home")</li>
</ul>

In the example, I use the ternary operator to check the current route, if it coincides with Menu I add the class active to the first li, otherwise, I do not (and so I check it in the other two items of the menu).

Another possibility is to create a Custom HtmlHelper to perform this validation, take one of the Prof answer in StackOverflow in English that I found very interesting

Extension:

public static MvcHtmlString LiActionLink(this HtmlHelper html, string text, string action, string controller)
{
    var context = html.ViewContext;
    if (context.Controller.ControllerContext.IsChildAction)
        context = html.ViewContext.ParentActionViewContext;
    var routeValues = context.RouteData.Values;
    var currentAction = routeValues["action"].ToString();
    var currentController = routeValues["controller"].ToString();

    var str = String.Format("<li role=\"presentation\"{0}>{1}</li>",
        currentAction.Equals(action, StringComparison.InvariantCulture) &&
        currentController.Equals(controller, StringComparison.InvariantCulture) ?
        " class=\"active\"" :
        String.Empty, html.ActionLink(text, action, controller).ToHtmlString()
    );
    return new MvcHtmlString(str);
}

Usage:

<ul class="nav navbar-nav">
    @Html.LiActionLink("About", "About", "Home")
    @Html.LiActionLink("Contact", "Contact", "Home")
</ul>

In your case, you should use it in the following way:

<ul class="copa-box-list">
    @Html.LiActionLink("Menu1", "Index", "Home")
    @Html.LiActionLink("Menu2", "Menu2", "Home")
    @Html.LiActionLink("Menu3", "Menu3", "Home")
</ul>