How to perform Html.Action on javascript event?

Question

I have a div within a cshtml file that shows the view from another action, as follows:

<div id="tabs-1ua">
  @Html.Action("Index", "Admin")
</div>

This loads fine on initial page load. In a separate js file, I have an event catcher for the div as follows:

$("a[href='#tabs-1ua']").click(function (event, ui) {

    $("#tabs-1ua").val("@Html.Action('Index', 'Admin')");

});

As can be seen above, the val parameter is the same Razor code that appears in the original div. However, this doesn't get me the desired outcome of the action being performed each time that div event is activated. What is the correct way to activate the razor code each time the event occurs? I made sure the event is captured by testing with alerts, so that's not the issue.

Thank you.

@BviLLe_Kid currently, the div still shows the same content as from the initial load, even though I can confirm that the content should have changed. — ITWorker
– ITWorker, Commented Jul 27, 2016 at 14:31
Have you debugged? Is the action being hit with a breakpoint? — Grizzly
– Grizzly, Commented Jul 27, 2016 at 14:32
@BviLLe_Kid I just debugged and saw the action gets hit only on the initial load of the page, but not when the click event occurs. — ITWorker
– ITWorker, Commented Jul 27, 2016 at 14:37
Okay, then you definitely need to look into ajax. That is your best bet to do calls to the server (controller) with JavaScript — Grizzly
– Grizzly, Commented Jul 27, 2016 at 14:44

Agustin Castro · Accepted Answer · 2016-07-27 15:09:02Z

2

You can try to load the desired content asynchronously using ajax, doing something like this:

$("a[href='#tabs-1ua']").click(function (event, ui) {

   $.ajax({
       url: "/Admin/Index",
       data: {}
   }).done(function (htmlResponse) {
       $("#tabs-1ua").html(htmlResponse)
   });
});

This loads the result of the action inside the div with id=tabs-1ua.

Maybe this is a simpler approach, let me know if i can be of further help

answered Jul 27, 2016 at 15:09

Agustin Castro

2815 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Agustin Castro Over a year ago

You´re welome, glad it helped, happy coding!

Collectives™ on Stack Overflow

How to perform Html.Action on javascript event?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related