How to run Url.Content via Client?

Asked

Viewed 968 times

2

In ASP.NET MVC it is possible to run the @Url.Content views and controllers. This variable returns the relative level at which the site is.

My question is: how to execute the Url.Content via Javascript? There is some form in MVC?

EDITED

Example of @Url.Content in the C#

<img src="@Url.Content("~/Content/img/teste.jpg")" />

Result per environment

| DEV | /Content/img/teste.jpg" |
| PRD | /NovoSite/Content/img/teste.jpg" |

In my case, the production environment is inside a "Novosite" folder, using the @Url.Content I don’t have to worry about this. But if I’m going to do something with javascript/jquery example

$("#element").html('<img src="/Content/img/teste.jpg" />');

It will only work in my Dev environment, and I need to change the path every time I deploy

javascript asp.net-mvc
  • 2

    Tiago, could you add an excerpt of code showing what you want to do? I think I get it, but I want to make sure.

  • Just to clarify: You want to know this because you will need to use this path in some other function javascript, right? You can tell us more about this?

  • @Andrecalil put the example code but in chsarp

  • 1

    @Vitorcanova this same, I added more details in the post, thanks

3 answers

1

Use the pseudo element text so that the Razor engine can consider C# expressions within Javascript code. In your case, try as follows:

<text>
    $("#element").html('<img src="@Url.Content("~/Content/img/teste.jpg")" />');
</text>

  • I can do this even if the javascript function is inside a file . js? That is without being direct by View

  • 1

    Look, I believe that the Javascript code in this case has to be in the View, because Razor only parses code in *.cshtml files, in case you are programming in C# (cshtml = "Csharp HTML").

  • But you can also create a function within a *.js file referenced by your View, and then call this function from within your view, passing as parameter the URL already analyzed by Razor as the code snippet that I showed. Something like this: // file.js Function definaUrlDaImagem(url) { $("#element"). html('<img src="' + url + '" />'); } // View.cshtml <text> definaUrlDaImagem(@Url.Content("~/Content/img/test.jpg"); </text>

1


Use instead of ~ one . to indicate which is relative to the HTML position.

$("#element").html('<img src="./Content/img/teste.jpg" />');

If your page is on /NovoSite/ will stay: NovoSite/Content/img/teste.jpg

Or just don’t put the / at the beginning, it will also act as a relative address.

  • 1

    Thanks Gabriel the point (.) in front worked perfectly

  • Nice to help you @Tiago

0

Tiago, you already have some good solutions there. I will add an alternative that is how I work. It is usually useful to store your site’s root address in some variable. I inject this into HTML, this way:

<input type="hidden" id="_urlRoot" value="@Url.Content("~/")" />

If you prefer direct in JS:

var urlRoot = '@Url.Content("~/")';

To access, I leave a function similar to this in a common JS file:

    function setURL(path) {
        return $('#_urlRoot').val() + path;
    }

And the use:

$("#element").html('<img src="' + setU('Content/img/teste.jpg') + '" />');

  • Hello André I ended up using the Gabriel solution, placing the point in front of the src="bar. /Content/img/test.jpg", thanks for the reply

Browser other questions tagged javascript asp.net-mvc

You are not signed in. Login or sign up in order to post.