ASP .NET Core how to generate razor Urls in javascript files?

Question

I have a lot of javascript functions that i want to separate by logic into multiple javascript files. The problem is that all my ajax functions urls are generated by razor.

 $.get('@Url.Page("Index","ViewReferenceRecordsPartial")', { productionRecordId: productionRecordId }, function (response) {

        $('#details').html(response)
        stopLoading(element);
    })

How can i keep my function like this on a js file?

UPDATE

Here is a temporary solution until there is a more maintainable solution which is pretty quick to do using data attributes.

in a js file i have this function

function viewReferenceRecords(element, productionRecordId) {
    startLoading(element);
    $.get($(element).data('url'), { productionRecordId: productionRecordId }, function (response) {

        $('#details').html(response)

        stopLoading(element);
    })
}

on my table I have a button that calls this function

<button data-url="@Url.Page("Index","ViewReferenceRecordsPartial")" onclick="viewReferenceRecords(this, @Model.Id)">Details</button>

it's very simple and easy, just store the Url generated by razor on a data attribute on the element and pass it to the function in the js file and retrieve the string generated on the data attribute.

Does this answer your question? How to embed Razor C# code in a .js file? — EkoostikMartin
– EkoostikMartin, Commented Nov 30, 2019 at 18:57
This is the first solution i saw, i was trying to see if i could find another way — Jackal
– Jackal, Commented Nov 30, 2019 at 18:59

Matt U · Accepted Answer · 2019-11-30 19:54:56Z

0

I typically use the revealing module pattern for things like this. You can read about it here: https://gist.github.com/zcaceres/bb0eec99c02dda6aac0e041d0d4d7bf2

It's sort of like namespacing, but in JavaScript. Then you can pass in parameters. I would do it like this:

JS file

var MeaningfulModuleName = MeaningfulModuleName || (function () {
    var _partialUrl = null;
    return {
        init: function (partialUrl) { _partialUrl = partialUrl; },
        loadPartial: function (targetSelector, productionRecordId) {
            $.get(_partialUrl, { productionRecordId: productionRecordId }, function (response) {
                $(targetSelector).html(response);
                // ...
            }
        }
    }
});

Then in your razor view, you create a script tag at the bottom of the page with this:

<script type="text/javascript">
    $(document).ready(() = {
        MeaningfulModuleName.init(@'Url.Page("Index", "ViewReferenceRecordsPartial")');

        // Some event occurs
        MeaningfulModuleName.loadPartial('#details', productionRecordId);
    }
</script>

Where MeaningfulModuleName is whatever name makes sense to you for this particular JS file.

This solves it for me, and I think it makes the JS look a bit cleaner, too. Everything is organized into "modules". Also, I apologize if the code doesn't work perfectly. I wrote this on my phone. :)

edited Nov 30, 2019 at 19:54

answered Nov 30, 2019 at 19:01

Matt U

5,12811 silver badges28 bronze badges

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

4 Comments

Jackal Over a year ago

it gives me exception that MeaningfulModuleName is not defined on the js file

Matt U Over a year ago

I updated my answer to include var on the first line of the JS file.

Jackal Over a year ago

still couldn't manage to get this working, on the actual page says MeaningfulModuleName.init is not a function. For the time being i went with the data attributes approach cause it's quick and works

Ryan Over a year ago

@Jackal Could you share your solution which uses data attributes as an anwser?

Collectives™ on Stack Overflow

ASP .NET Core how to generate razor Urls in javascript files?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related