locked
Javascript Anchor tag and MVC URL redirection RRS feed

  • Question

  • User-1609546788 posted

    Hi,

    In Layout.chtml have two Divs like youtube one for Full view and another for icon view.

    --Full Side bar View

    <div id="nav1" class="sidenav" style="display:inline-block;">
    <a href="@Url.Action("Index", "Test2")" title="Test1" class="links">

    <span>--Side bar Image</span>


    </a></div>

    --Icon Side bar 

     <div id="nav2" class="sidenav1" style="display:none">
    <a href="@Url.Action("Index", "Test2")" title="Test2" class="links" >
    <span>
    --Icon Image
    </span>
    </a>

    </div>

    -------------------------------------

    And at top i have a toggle button which is maintaining both the views.

    When i click on Icon View -hyperlink Click it is going to Test2 controller but showing full Side bar View visible , not showing Icon view.

    How to maintain this?

    Thursday, July 4, 2019 11:16 AM

Answers

  • User665608656 posted

    Hi andry,

    According to your description, I found that you have modified your issue.

    The icon view and side bar view all point to the Test2 page, right?

    I have made the following modifications to my code,you can refer to it. I hope it will help you.

     Layout.cshtml:

    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#Button1").click(function () {
                    if ($("#nav1").css("display") == "inline-block") {
                        $("#nav1").css("display", "none");
                        $("#nav2").css("display", "inline-block");
                        newwin("icon");
                    } else {
                        $("#nav1").css("display", "inline-block");
                        $("#nav2").css("display", "none");
                        newwin("side");
    
                    }
    
                });
    
            });
            function newwin(type) {
                window.location.href = '@Url.Action("Index", "Test2")?type=' + type;
                }
        </script>
        @RenderSection("Scripts", false/*required*/)
    </head>
    <body>
        <div>
            <div>
                <input id="Button1" type="button" value="button" />
                <div>
                    <div id="nav1" class="sidenav" style="display:inline-block;">
                        <a href="" title="Test1" class="links" id="a1" onclick='newwin("side")'>
                            <span>
                                --Side bar Image
                            </span>
                        </a>
                    </div>
                    <div id="nav2" class="sidenav1" style="display:none">
                        <a href="" title="Test2" class="links" id="a2" onclick='newwin("icon")'>
                            <span>
                                --Icon Image
                            </span>
                        </a>
                    </div>
                </div>
            </div>
            @RenderBody()
        </div>
    </body>
    </html>
    

    Test2Controller.cs:

     public ActionResult Index()
            {
                if (!string.IsNullOrEmpty(Request.QueryString["type"]))
                {
                    if (Request.QueryString["type"].ToString() == "icon")
                    {
                        StringBuilder cstext = new StringBuilder();
                        cstext.Append("<script type=\"text/javascript\">");
                        cstext.Append(" window.onload=function(){");
                        cstext.Append("$('#nav1').css('display', 'none');");
                        cstext.Append("$('#nav2').css('display', 'inline-block');}");
                        cstext.Append(" </script>");
                        HttpContext.Response.Output.Write(cstext);
                    }
                    else
                    {
                        StringBuilder cstext = new StringBuilder();
                        cstext.Append("<script type=\"text/javascript\">");
                        cstext.Append(" window.onload=function(){");
                        cstext.Append("$('#nav1').css('display', 'inline-block');");
                        cstext.Append("$('#nav2').css('display', 'none');}");
                        cstext.Append(" </script>");
                        HttpContext.Response.Output.Write(cstext);
                    }
                }
                return View();
            }

    Test2-Index.cshtml:

    @{
        ViewBag.Title = "View";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
     
    <h2>Test2 Content</h2>
    <img src="~/Images1/pic3.png" />

    The result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 5, 2019 9:36 AM

All replies

  • User-1038772411 posted

    Hello, andry18

    i think your problem is that to give inline  style="display:none" Tag.

    And Also in <a> url means first param is Actionname and second is controller 

    Like : <a href="@Url.Action("ActionName", "ControllerName")"

    Please check it carefully hope you will get your solution. or please describe your question breifly so someone can help you properly.

    Thanks.

    Thursday, July 4, 2019 12:54 PM
  • User665608656 posted

    Hi andry,

    andry18

    When i click on Icon View -hyperlink Click it is going to Test2 controller but showing full Side bar View visible , not showing Icon view.

    This issue arises because when you click on icon view, the page will jump to the view of Test2, then the page will refresh.

    Even if you hide the full Side Bar view and display icon view using JS on the Layout.cshtml , the page will also return to the default status of full Side bar view display at the beginning. 

    If you want to ensure that the content of Anchor tag is consistent with that of controller, you can add JS statements to the view of Test2 to ensure that the page has just entered the view of Test2 and the layout page shows icon view.

    For more detailed, you could refer to the following code:

    Layout.cshtml:

    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#Button1").click(function () {
                    if ($("#nav1").css("display") == "inline-block") {
                        $("#nav1").css("display", "none");
                        $("#nav2").css("display", "inline-block");
                    } else {
                        $("#nav1").css("display", "inline-block");
                        $("#nav2").css("display", "none");
                    }
    
                });
            })
        </script>
        @RenderSection("Scripts", false/*required*/)
    </head>
    <body>
        <div>
            <div>
                <input id="Button1" type="button" value="button" />
                <div>
                    <div id="nav1" class="sidenav" style="display:inline-block;">
                        <a href="@Url.Action("Index", "Test1")" title="Test1" class="links">
    
                            <span>
                                --Side bar Image
                            </span>
    
    
                        </a>
                    </div>
                    <div id="nav2" class="sidenav1" style="display:none">
                        <a href="@Url.Action("Index", "Test2")" title="Test2" class="links">
                            <span>
                                --Icon Image
                            </span>
                        </a>
    
                    </div>
                </div>
            </div>
            @RenderBody()
        </div>
    </body>
    </html>
    

    Test2--Index.cshtml:

    @{
        ViewBag.Title = "View";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    @section Scripts
    {
        <script  type="text/javascript">
            $(function () {
                $("#nav1").css("display", "none");
                $("#nav2").css("display", "inline-block");
            })
        </script>
    }
    <h2>Here is Test2</h2>
    <img src="~/Images1/pic3.png" />

    The result of this work demo:

    Best Regards,

    YongQing.

    Friday, July 5, 2019 2:07 AM
  • User-1609546788 posted

    If you want to ensure that the content of Anchor tag is consistent with that of controller, you can add JS statements to the view of Test2 to ensure that the page has just entered the view of Test2 and the layout page shows icon view.

    Hi Yongqing Yu

    Thx for reply.I have Layout.cshtml page and Test2.cshtml page.

    When i am moving from Icon view i have to show Icon view Only and when i move from Side bar view i have to show side bar view only in Test2.cshtml page.

    With above code it will not maintain the state (Sidebar or IconView In layour.cshtml) in Test2.cshtml.

    Please check youtube navigation from Sidebar and Icon view.

    Friday, July 5, 2019 6:07 AM
  • User-1609546788 posted

    Hi 

    Yes  style="display:none" required for intial load. Like in youtube we have sidebar navigation and IconView Navigation.

    I am using layout.cshtml and Test.cshtml Pages.

    Friday, July 5, 2019 6:10 AM
  • User665608656 posted

    Hi andry,

    According to your description, I found that you have modified your issue.

    The icon view and side bar view all point to the Test2 page, right?

    I have made the following modifications to my code,you can refer to it. I hope it will help you.

     Layout.cshtml:

    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#Button1").click(function () {
                    if ($("#nav1").css("display") == "inline-block") {
                        $("#nav1").css("display", "none");
                        $("#nav2").css("display", "inline-block");
                        newwin("icon");
                    } else {
                        $("#nav1").css("display", "inline-block");
                        $("#nav2").css("display", "none");
                        newwin("side");
    
                    }
    
                });
    
            });
            function newwin(type) {
                window.location.href = '@Url.Action("Index", "Test2")?type=' + type;
                }
        </script>
        @RenderSection("Scripts", false/*required*/)
    </head>
    <body>
        <div>
            <div>
                <input id="Button1" type="button" value="button" />
                <div>
                    <div id="nav1" class="sidenav" style="display:inline-block;">
                        <a href="" title="Test1" class="links" id="a1" onclick='newwin("side")'>
                            <span>
                                --Side bar Image
                            </span>
                        </a>
                    </div>
                    <div id="nav2" class="sidenav1" style="display:none">
                        <a href="" title="Test2" class="links" id="a2" onclick='newwin("icon")'>
                            <span>
                                --Icon Image
                            </span>
                        </a>
                    </div>
                </div>
            </div>
            @RenderBody()
        </div>
    </body>
    </html>
    

    Test2Controller.cs:

     public ActionResult Index()
            {
                if (!string.IsNullOrEmpty(Request.QueryString["type"]))
                {
                    if (Request.QueryString["type"].ToString() == "icon")
                    {
                        StringBuilder cstext = new StringBuilder();
                        cstext.Append("<script type=\"text/javascript\">");
                        cstext.Append(" window.onload=function(){");
                        cstext.Append("$('#nav1').css('display', 'none');");
                        cstext.Append("$('#nav2').css('display', 'inline-block');}");
                        cstext.Append(" </script>");
                        HttpContext.Response.Output.Write(cstext);
                    }
                    else
                    {
                        StringBuilder cstext = new StringBuilder();
                        cstext.Append("<script type=\"text/javascript\">");
                        cstext.Append(" window.onload=function(){");
                        cstext.Append("$('#nav1').css('display', 'inline-block');");
                        cstext.Append("$('#nav2').css('display', 'none');}");
                        cstext.Append(" </script>");
                        HttpContext.Response.Output.Write(cstext);
                    }
                }
                return View();
            }

    Test2-Index.cshtml:

    @{
        ViewBag.Title = "View";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
     
    <h2>Test2 Content</h2>
    <img src="~/Images1/pic3.png" />

    The result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 5, 2019 9:36 AM