TypeScript in MVC - asp.net-mvc

Im bulding a website using MVC4. Recently I've read about TypeScript. It looks really nice however I cannot find any use for it in a MVC website. Am I missing something? Do you use it? Where?

TypeScript is a pre-compiler for JavaScript. Hence you can use TypeScript only as a replacement for JavaScript (server-side, e.g. Node.js, or client-side, i.e. in the browser).
As you are probably writing MVC4 code with C#, TypeScript will be of no use for you in relation to MVC4.
Regarding the client-side it's somewhat different.
I guess the main point you need to know is that TypeScript is not (yet) just another language on the server, that you can exchange with C#.

I find it quite useful for building largish apps with lots of logic on the client. The interfaces help avoid some errors. It compiles to javascript so you could use it instead of javascript. If you're just writing a couple of lines I wouldn't bother though.

You can link to the generated javascript files from TS files directly in the script bundles or HTML. If you want to automatically link to many JS files, use require JS. This will save you having to link to many js files.

Related

Angular 4 ng-controllers

I am building an Asp.net website with Angular 4 and bootstrap. Being a .net developer, I would like to have all the html in the .cshtml files. Earlier I have used Angular 1.0 version and we use the ng-controller and all the services call will be made from there. Trying to find documentation on using controllers but couldn't find any? Do we have ng-controllers in Angular 4? If not whats the best alternative. Also I dont want to use "TemplateUrl" in the component to render the cshtml content. In few cases, cshtml will have dynamic content and don't want an additional http request made.
Thanks in advance.
Thats right what Usman told you. At Angular 2/4 your App structure is completly new. You got a Template which is controlled by the #Component, where is linked with the attribute: 'template: "Page.html"'. There is also the templateURL Which is also an attribute of #Component. Use this if you want to specify your templateURL in your Typescript File. And another thing: Your Scope has changed a bit so think about it if you try to call javascript code in your template.
hope it helped.
There is no ng-controllers in Angular 2/4. You have components (kind of, but not exactly, controllers in AngularJs). There is no clean way of using server side views with Angular 2/4 unless you want to use server side rendering of Javascript using nodejs.
Have a look at this post https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/
This is based on Microsoft's JavaScript services library which does server side compilation for cshtml files. Steve Sanderson has a nice post (though a bit older now) about setting up Angular with ASP.NET
hope this helps.

.NET 4.5 System.Web.Optimization bundling use on CDN

I'm building a CDN, and looking for a ways to utilize .NET minification/bundling mechanism (System.Web.Optimization) there.
The question is how can I return minified bundle from MVC controller.
Note: I'm looking to use native .NET 4.5 capabilities, I do not want 3rd party solutions.
I'm only looking for ways to utilize this on CDN side. Not on client application side.
Additional question: If the above is possible at all, please explain how can I take advantage of caching, which is normally achieved through adding unique query string parameter to request.
The asp.net bundling and minification uses WebGrease internally.
Grab it off nuget and add just start using it. It looks like the codeplex site doesnt have any examples on there so you will need to look at the source code or download/decompile the asp.net source code to see how they use it.
For the query string parameter I believe that is mainly to prevent/aid client side caching it doesnt neccessarily have anything to do with your server side.
You haven't said how you plant to serve up the JS files from your custom CDN so I can't help much with the caching, I would highly suggest not serving them through mvc though, there will be a lot of extra things happening in the pipeline that you dont really need if all you're doing is serving static files.
Perhaps look at having some process that parses the files and sticks them in a certain directory that IIS can serve directly without delegating to asp.net

Correct Way to Code ASP.NET MVC HTML Helper That Requires an External JavaScript Library

I am getting ready to code a number of HTML helpers for UI elements in an ASP.NET MVC 3 project. I expect many of the helpers to depend on code that is located in external javascript libraries. These could be custom javascript libraries that I write, or they could reference 3rd party libraries like jQuery and jQueryUI. For example, I might write HTML.RichM.DataPicker(...) that would require the page to have jQuery and jQueryUI referenced and some code executed in the document ready function. Getting code into the document ready function is pretty straightforward I guess -- I could simply inject a new script block into the output with the contents of the function, even though that would mean I might have a page peppered with document ready functions all over.
The other part of this is making sure that the jQuery and jQuery UI libraries (in my example) are referenced and included. Is there an "MVC way" to add the code references to the view page or the layout/master if they are not already there, or must I instruct users of my HTML helpers that they need to add references manually for any required javascript files? Of course, I could just instruct them to include all possible external library references in the master or layout page, but that seems like overkill. In ASP.NET Web Forms, for example, I might have used RegisterClientStartupScript or RegisterStartupScript to do this from my custom control.
Thanks for any suggestions!
I think the easiest way is to include the dependant scripts in the header, that's maybe not what you want to do, but I think it's the easiest way.
I suggest you using a tool like SquishIt to bundle your JS files together, that way, you will not have to load like 20 js files, it will be more efficient and cleaner.

Combine, minimize and gzip for CSS and JavaScript files for ASP.NET MVC

Good day!
I'm looking for solution to combine, minimize and gzip CSS and JavaScript files. It seems they come in two forms:
In form of ASP.NET handler\module with processing files on the fly (with caching results)
In form of VS build tasks (to perform processing while building)
Generally I'm ok with either.
I've looked on a number of solutions (and I use ASP.NET handler from this article http://www.codeproject.com/KB/aspnet/httpcompression.aspx a lot), but maybe something "must have" came out and I've missed it.
Thanks in advance!
Here's my advice to you: use build tasks and HTTP cache the output.
In terms of build tasks, you'll want to check out your favorite JavaScript minifier (my favorite is Google Closure Minifier) that has a command line utility that you can just plug into your project file, MSBUILD file or NANT file. Same deal with CSS (I personally use Yahoo! YUI Compressor). If you're into using LESS, you can certainly combine this with the YUI compressor. To optimize images, I'd use optipng. There's directions on how these guys work on their individual sites.
Now, after you have these files all nice and optimized, you'll want to output them using a handler or controller action for MVC. To set the expiration so that subsequent requests will default to the file downloaded on the first request, you'll want this to run in your code:
Response.ExpiresAbsolute = DateTime.Now.AddYears(1);
More than likely you'll want a cache-buster strategy so that you can change the content files. You'd do this by passing a random parameter to your handler. There are a few different ways to go about this... just Google it.
Hope this helps.
I'm using the telerik mvc components for small-medium sites. It was simple to add and configure with NuGet.
Moth can (among other things) handle all your javascript / css requests on the fly. See Wiki: Javascript.
Best of all, it can also put all javascript at the bottom of the page, including parts you write in your partial views! Wiki: Inline script.

Why are there so many javascript files in my empty MVC 2 project?

When creating an empty MVC 2 project, I have a lot of javascript files in my Scripts folder. Why? Will removing them affect my application?
No removing them won't affect anything, unless they are being used in pages. However you said this is an empty MVC project so you'll be fine.
They're there for you to use, to make your life easier. For example, JQuery is included.
Take for example JQuery file, It provieds functions which has solutions for crossbrowser related issues which makes developement easy. Similarly other files has functions whcih are providing readymade functionalities which can be used for rapid developement.
Unfortunatly as JS is traveling to browsers its downloaded on the client. Its suprising for not JS people as its not like .NET api where one or more dll is sufficient for all the api and developer dont have to worry(some times :)) about from where they are coming.
I will suggest you to study included JS files and include/use only those which you really wanted to use.

Resources