TypeScript integration with T4MVC

Within my ASP.NET MVC (5) project, I utilize T4MVC to avoid using magic strings in my views.

While this approach works well, there are instances where I require URLs in my JavaScript or TypeScript code, particularly for AJAX requests.

Currently, I rely on Razor code within my views to assign URLs to JavaScript variables:

window['myJavaScripVariableName'] = '@Url.Action(MVC.Progress.MyActionMethodName())';

These variables are then accessed in .js and .ts files like so:

$.get(window['myJavaScripVariableName'], { operationCategory: this.operationCategory })
    .done((data) => {...}

However, managing multiple URLs in this manner can become tedious, not to mention the risk of typos when referencing them.

Is there a way to dynamically generate URLs in JavaScript / TypeScript without hardcoding them?

Answer №1

It quickly became monotonous as I had to deal with numerous URLs, not to mention the risk of making a typo in my JavaScript variable name in one of its two instances.

To resolve this issue, consider utilizing C# -> TypeScript Code Generation. There are several options available for C#, with one of the most popular choices being

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

It seems like KineticJS is removing elements from the canvas that I would prefer to keep

My website features an HTML5 canvas where I showcase a variety of images, text, and shapes using JavaScript functions. The text and shapes are created with the following JavaScript functions: function drawGameElements(){ /* Draw a line for the ' ...

What are the steps for customizing the interface in TypeScript?

After fixing a type error related to adding custom functions to the gun chain by including bind():any within IGunChainReference in @types/gun/index.ts, I am wondering how to transfer this modification to one of my project files. I have not been able to fi ...

Async await expressions route hung

I have been in the process of transitioning my application to utilize async/await instead of callbacks for query requests on the backend. Progress has been smooth so far, but I have encountered a problem. When trying to fetch a get route, my page is hangin ...

Error Message: A key is being provided to the classes property that is not implemented in the current context

Trying to customize Material-UI styles with makeStyles() as outlined in the documentation but encountering a warning when passing a classname in the parent component that is not specified in useStyles. The warning message reads: Warning: Material-UI: th ...

Creating a two-dimensional canvas within a div element using the console

I have some code that currently generates an image in the console when I hit F12. However, I would like to display this image inside a more user-friendly area such as a div on the webpage. I attempted to create a <div class = "mylog"> to place the i ...

"Exploring the Power of VueJS Classes and Conditions

Is it possible to add a Class based on a Child's Class Condition in the menu? For example: <ul :class="{ 'open' : ThereIsClassInChild }"> <li v-for="item in list" :class="{ 'active' : $route.name == item.routeName }" ...

Establishing a variable to serve as a function invocation

Is there a way I can assign a variable to either .prev() or .next()? Here is an example of what I am trying to do: if(x == y) var shift = '.prev()'; else var shift = '.next()'; $("li.active").removeClass('a ...

Is it possible to utilize tsc --watch exclusively for type checking alongside esbuild?

When I execute tsc --noEmit --incremental, it takes approximately 17 seconds to complete. To improve the speed, tsc provides watch mode which now only takes around 2 seconds. This is my current script: // type checking tsc --noEmit --incremental // build ...

Ensuring the custom element receives focus only when the necessary hidden field remains unfilled

I have a form that includes a hidden required input element. The value of this input will be dynamically set using JavaScript based on certain calculations. If the value is empty and the form is submitted, I want the .focusable div to receive focus instea ...

Autofill feature for styling with CSS within a JavaScript document

Is there a way to enable CSS autocomplete in JavaScript for VS Code? I can easily work with CSS, but the auto suggestions are not showing up when coding in JS. For instance, when typing document.queryselector("myclass")., nothing shows up after the dot li ...

Issue with Vue.js: Difficulty sending an array of values to an endpoint

I am currently in the process of learning Vue in order to complete my project, which has a Java Spring backend. The endpoint I am working with expects an object with the following values: LocalDate date; Long buyerId; Long supplierId; List<OrderDetails ...

The textures in three.js material do not interact with lighting sources

I am curious about whether a textured geometry can be successfully lit in three.js. In my current scene, I have noticed that all materials receive lighting effectively when using spotLight and directionalLight, except for those that have a texture applied ...

Sending information between components in VueJS

I recently created something new for myself, but I encountered a problem. Let me explain further. The component is named components/HomeComponent.vue Here is the code: HomeComponent.vue <script> export default { name: "HomeComponent", data() ...

What is the process for obtaining the link to attached files in an email?

How can I send an email with attached images and display them within the email? Is there a way to obtain the links of these attached images for embedding in the email? Keep in mind that using remote images may result in the email being flagged as spam by ...

Div scrolling allows for parallel viewing of PDFs in a side by side arrangement

I have two scrollable elements on my webpage: one positioned on the left side and the other on the right side. The left element is a regular div, while the right element is an object containing an embedded PDF. <object width="100%" height=&quo ...

Challenges I'm Facing with my Vue.js API Integration using axios

I am currently working on a bookstore application using Vue.js. The book data is stored in this API . However, I am encountering issues displaying the information on my HTML page with the provided function and I am struggling to identify the root cause: ...

A tutorial on how to switch out a font-awesome icon simply by clicking on it - collapsible content

I have some HTML code with a script for my website that allows text to be collapsed or expanded by clicking on a font awesome arrow. I am looking to have an arrow that points up when clicked to collapse the text and points down when clicked to expand the t ...

What is the method for enabling imports from .ts files without file extensions?

While trying to open a Svelte project with TypeScript, I encountered an issue where all imports from .ts files were showing "Cannot resolve symbol" errors. https://i.stack.imgur.com/FCVxX.png The errors disappear when the .ts extension is added to the im ...

Improving the Performance of Your Image Slider in ReactJS

Currently, I am working on creating an image carousel from scratch using ReactJS. Here is the progress I have made so far: https://codesandbox.io/embed/optimistic-elbakyan-4vzer?fontsize=14&hidenavigation=1&theme=dark When you drag the mouse to c ...

The challenge of losing the 'this' scope during a Vue + Vuex + Phaser reactive call

During my attempt to develop a game using Vue + Vuex, I encountered an interesting challenge. I realized that the most interactive aspect of the game needed to be built with Phaser instead. As a result, I made the decision to utilize Phaser for that specif ...