Javascript Anchor Tag and Url Redirecting to MVC action.

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";

}

Answer 1

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.

Answer 2

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

Answer 3

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?