locked
Javascript Anchor Tag and Url Redirecting to MVC action. RRS feed

  • Question

  • User-1609546788 posted

    Hi Team

    <div id="div1" class="dd" style="display:none;">

    <a href="@Url.Action("Index", "Test")" onclick="return open1();" title="Test" class="links" id="tstLink">

    </div>

    Is it possible to change the style for div1 to display block before redirecting to MVC action.

    As it is not working.after redirection div1 showing  display none only.

    function open1() {

                document.getElementById("div1").style.display = "inline-block";

                //window.location = "Test/Index";

    }

    Wednesday, June 12, 2019 9:09 AM

Answers

  • User475983607 posted

    This is the expected behavior because windows.location causes a full page refresh.   Pass a parameter to the Index action that tells action or view how to render the HTML.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 12, 2019 10:13 AM
  • User1520731567 posted

    Hi andry18,

    According to your code:

    <div id="div1" class="dd" style="display:none;">

    <a href="@Url.Action("Index", "Test")" onclick="return open1();" title="Test" class="links" id="tstLink">

    </div>

    First,I can't see anything in your code,How did you trigger the onclick event?

    So,I modify a little in your html:

    <div id="div1" class="dd" style="display:none;">1111111</div>
    <a href="@Url.Action("FroalaEditor", "Main")" onclick="return open1();" title="Test" class="links" id="tstLink" /> qqqqqqqqqq

    Actually, your div1 did display block,but <a> will redirect to the other page quickly,as the speed is too fast for you to see,like the picture:

    If you would like to show div1 after clicking and redirect to the other action,I suggest you could add setTimeout function to wait some time,

    for example:

    <script>
        function open1() {
        event.preventDefault(); //prevent the default redirect event in <a>
        document.getElementById("div1").style.display = "inline-block";
    
         //window.location.href = "Test/Index";
         setTimeout(function () { window.location = yourul; }, 5000);
        }
    </script>

    like the picture:

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 13, 2019 7:16 AM

All replies

  • User475983607 posted

    This is the expected behavior because windows.location causes a full page refresh.   Pass a parameter to the Index action that tells action or view how to render the HTML.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 12, 2019 10:13 AM
  • User1520731567 posted

    Hi andry18,

    According to your code:

    <div id="div1" class="dd" style="display:none;">

    <a href="@Url.Action("Index", "Test")" onclick="return open1();" title="Test" class="links" id="tstLink">

    </div>

    First,I can't see anything in your code,How did you trigger the onclick event?

    So,I modify a little in your html:

    <div id="div1" class="dd" style="display:none;">1111111</div>
    <a href="@Url.Action("FroalaEditor", "Main")" onclick="return open1();" title="Test" class="links" id="tstLink" /> qqqqqqqqqq

    Actually, your div1 did display block,but <a> will redirect to the other page quickly,as the speed is too fast for you to see,like the picture:

    If you would like to show div1 after clicking and redirect to the other action,I suggest you could add setTimeout function to wait some time,

    for example:

    <script>
        function open1() {
        event.preventDefault(); //prevent the default redirect event in <a>
        document.getElementById("div1").style.display = "inline-block";
    
         //window.location.href = "Test/Index";
         setTimeout(function () { window.location = yourul; }, 5000);
        }
    </script>

    like the picture:

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 13, 2019 7:16 AM
  • 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", "Test1")" 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 8:53 AM