JQuery should this be considered a hard-coded value?

Question

I am looking at the following jQuery call:

$.get('/Home/GetResult', null, function (data) { alert(data); }); 

I see that this is called a “hard-coded” way to do this compared to:

 $.get('@Url.Action("GetResult", "Home")', function (data) { alert(data); }); 

which, as I see it, is called not a hard coded way.

Can someone please explain to me what it is? It seems that both methods have equally hard-coded ways to call this, because you have explicit Controller and Method names in both.

Does anyone know why it is called hardcoded and the other is not. It's better?

Answer 1

If we hardcode the URL, we will lose the ability to change our routing scheme later. Therefore, always use the URL Helper methods. If you use the URL helper, the Helper method will take care of the change, you do not need to go and make changes in 100 places. Also, you don’t need to worry about how much ../ I have to add as a prefix when the same method is called from the home page and inner page

Checkout these answers Darin

stack overflow

stack overflow

Answer 2

"/ Home / GetResult" is considered "hardcoded" because the developer injected the configuration value directly into the code, where it is more difficult to change it in the future.

The specific values ​​of the hard-code URL are worse, because if this view (and the controller action associated with it) moves to another "area" in the application, "/ Home / GetResult" will break. The @ Url.Action method is better because it will not.

Answer 3

I like Peter J answer . Besides,

You must have the url as part of the href or as an attribute of the html element.

 Eg <a data-getresult="@Url.Action("GetResult", "Home")">click</a> 

And then

 var clickAction = $(this).attr('data-getresult'); $.get(clickAction, null, function (data) { alert(data); }); 

Wrap the function above and bind it to the click event through the attribute name.

Answer 4

To just answer your question, yes, I look at both of the examples that you specified as "hardcoded". Second, @ Url.Action LESS is hard-coded . This implies less specificity. If you change the root of your project, the second will work, and the first will break, as mentioned in @Peter J. In addition, I believe that the second will work if you use regions and change the name of the region, and the first will break.

To be a little more useful, I use the third approach. I had exactly your question a month ago, and thanks to ASP.NET MVC AJAX calls without static controller URLs (magic strings) I have a process that works fine for me.

Index.cshtml

 <input data-action='@Url.Action(Mvc.AutoComplete.PostalCode())' type='text' name='postalCode' class='autoComplete'><input> <input data-action='@Url.Action(Mvc.AutoComplete.ProductCategory())' type='text' name='productCategory' class='autoComplete'><input> 

main.js

 $('input.autoComplete').each(function () { var el = $(this); el.autocomplete({source: el.data('action')}); }); 

Voila! Compile-time verification and clear separation of responsibilities using T4MVC and HTML5 data attributes. The controller definition is read from the widget that uses it. Great for partial views that may appear several times on a page.

I highly recommend using T4MVC, which is "Mvc". The syntax you see in the example. If you are trying to avoid hard coding, it is about as dynamic as you can do it. I use T4MVC ( http://t4mvc.codeplex.com/ ), so I can avoid the "magic lines" to refer to controllers and actions in my views. T4MVC is not perfect, but it is a big improvement. There are still hardcoded values ​​inside the hidden T4MVC files, but you will never see them, they are automatically generated from your controllers and the compilation time is checked.

Also, as @Valamas already suggested here, I then use the data attributes for the HTML elements to pass these URLs from my views into javascript.

I especially use this approach to data attributes when I have AJAX requests on my page. One page can easily have 10 URL dependencies, and it's hard to tell when links are broken by user testing, which may not have the full coverage of conditional functions. But hooray! T4MVC throws errors at compilation time when links do not exist, and if your code is organized with all checks of data attributes in init, javascript throws errors at loading when there are no corresponding data attributes (and you will not receive runtime errors for variables undefined). This offers much earlier / easier detection of grip defects, even if you are not testing the javascript block (and I do not).

Usually I have a standard heading on every page that includes current globally useful information (e.g. UserId) as data attributes of a BODY element or on the display: there is no SPAN with a known identifier.

Then, as a rule, I load all the data from the attributes in one place at the top of my javascript code (or every javascript file that it needs).

What is the advantage of this? Now you have one place to see that all the necessary built-in data parameters are provided to your javascript. Your javascript does not reference undefined variables, so if you use the javascript IDE, you will not get false errors. Developers looking at your javascript don't scratch their heads trying to find the mystery variable declaration in other javascript files; especially troublesome when they are not ASP.NET MVC developers. In this note, if you have separate language commands, implementation responsibilities are clearer (javascript developers do not change your views when they change naming conventions or vice versa). In addition, variables are defined at a well-known time during the life cycle of the client page, which is a big advantage for javascript debugging. And your view does not contain javascript spattered all over the page, where a slight HTML defect on the middle page can unexpectedly cause javascript to crash completely.

In addition, as shown in the example, this is the only way to fly for partial views that may occur more than once on a page. You can clearly associate embedded data with individual HTML widgets that use it. If you connected javascript directly to the view, you mistakenly redefined the variables.

The list of benefits goes on and on, but basically it comes down to sharing responsibilities. Everything else follows from this.

Answer 5

They would have achieved the same, most of that time.

Essentially, if you have a simple MVC site without any areas, and you use the default route definition, you will not notice big changes. But if you set up a route definition or use areas in your application, you are likely to run into problems. Where possible, it is recommended that you use the soft coding method. This becomes problematic if you need to paste the URL into a JavaScript file. However, in this case, it usually indicates a problem with your implementation, and the code in your JS files should accept the URL that it will use as a parameter, and not embed it in your external JS files.