Pass javascript variable to @Url.Action in ASP MVC

Question

In my view i have two divs with controller and action method name in data-url attribute. When the page gets loaded, i am looping through these div classes and getting the name of the constructor and action method to pass to ajax call. However now im having hard time using @Url.Action method to generate the url to make the ajax call. Does anyone know how i can pass javascript variable in @Url.Action. In my code, i am setting the data-url value in partialDivUrl variable. Now in my ajax call i want to be able to do @Url.Action(partialDivUrl) or something similar to this which creates the right url. I am trying to load partial view and please do not suggest to use @Html.Action, @Html.Partial or @Html.Render..etc..since the action method is async method.

Here is the html:

<div class="partialContents" data-url="/Work/LoadEmployeePartial"></div>
<div class="partialContents" data-url="/Work/LoadSupervisorPartial"></div>


<script type="text/javascript">
 $(document).ready(function (e) {
    $(".partialContents").each(function (index, item) {
        var partialDivUrl = $(item).data("url");

        $.ajax({
            url: partialDivUrl, <----- want to use @Url.Action here
            type: 'GET',
            data: {employeeId: @Model.EmployeeId},
            contentType: 'application/json',
            success: function (data) {
                if (data != null) {
                    $(item).html(data);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                    alert("Unexpected error.")
            }
        });
    });
});
</script>

sorry, but this code doesn't work? I checked a project of mine where I used the razor istruction @Url.Action to populate the attribute ulr of the ajax call and in the web page genereted I dind't see the entire url but only a string like this 'Controller/MethodCalled', just like the value that you pass in the data-url attribute. — nmbrphi
– nmbrphi, Commented Oct 19, 2017 at 12:48
@nmbrphi you are right, you only get 'controller/action method name'. That's why i want to use '@Url.Action' to populate the right url instead of hard coding domain name in my ajax call like this codevar partialDivUrl = 'domainName' +$(item).data("url") . Hope that makes sense. — sanjeev
– sanjeev, Commented Oct 19, 2017 at 12:57

ADyson · Accepted Answer · 2017-10-19 13:05:38Z

I think you need to put the Url.Action call in place of the hard-coded values in the data-url properties.

Your suggestion to do @Url.Action(partialDivUrl) doesn't really make sense - even if you could pass a JS variable into it dynamically in this way, it's not the correct value to use. Url.Action doesn't take in an arbitrary URL string and try to validate it, instead it takes in an action name, and optionally a controller name, and returns the correctly routed URL string for the action given. If you replace those hard-coded values with the URL generated by ActionURL, then by the time the ajax runs you'll already have the correct URL pertaining to the div which was clicked.

For example:

<div class="partialContents" data-url='@Url.Action("LoadEmployeePartial", "Work")'></div>
<div class="partialContents" data-url='@Url.Action("LoadSupervisorPartial", "Work")'></div>

assuming those are the correct action and controller names, respectively - you can change them to the correct values for your application, if not.

See https://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.action(v=vs.118).aspx#M:System.Web.Mvc.UrlHelper.Action%28System.String,System.String%29 for more details of the Url.Action helper method.

Collectives™ on Stack Overflow

Pass javascript variable to @Url.Action in ASP MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related