How to render partial view inside href tag in .NET MVC application

Question

I want to render partial view on href tag but it is not working. Can anyone please suggest where I am going wrong?

Appreciate you guidance and help.

In _Layout.cshtml

 <li>

   <a class="btn btn-outline-primary ml-3" href="#">Login / Signup</a>
   </li>
     @Html.Partial("_LoginPartial")

I want to render _LoginPartial on click of Login/Signup .

Please suggest me.

Answer 1

There are some possibilities:

• You could render it by calling an action on the controller that returns the partial view.
• You could just render it as you did, but hide it with css. When the user click on the button you show the partial view via javascript.

The second is the easer than first one. For sample:

For sample, you could add a view and make it hidden by adding display:none via css.

<li>
   <a id="loginButton" class="btn btn-outline-primary ml-3" href="#">Login / Signup</a>
</li>

<div id="loginView" style="display:none;">
   @Html.Partial("_LoginPartial")
</div>

And add a click event on the login button on the javascript/jquery:

$("#loginButton").on("click", function() {
   $("#loginView").toggle();
});

The toggle function will show if the element is hidden and vice-versa.