I've just started with ASP.NET 4.0 Web Forms and I want to try create a really simple SPA - contacts application, the purpose is to enable the client to add / remove contacts and watch them.
So I've thought about what I need to this application, but I don't know if it exists in ASP.NET. Actually I need two templates which I can switch between them whenever I want to and manipulate data using AJAX. Additional part - I use only jQuery - not MVC framework.
My questions are:
Are there templates in Web Forms? I heard about something inside 'Ajax Control Toolkit' but I don't want to use any external code (only jQuery as external code). As I said before, I want to include in the page two templates which I can switch between them and manipulate data when I get data from the ajax requests.
While I want to remove / add / get data, where do the ajax requests go to? should I create a web service which handle this requests? are there another options?
1: No, webforms is a server/client intensive process which invalidates the whole premise of SPA where server interaction is kept to a minimum and most data is sent down on the initial request.
2: Yes any webservices can be used for SPA in Ajax.
Related
I am trying to build a single-page application with an ASP.Core + Angular 4 stack. The server is supposed to provide view components, which will be rendered client-side and populated with additional data.
The best way to create components would be utilising ViewComponent mechanic on the server, which allows me to effectively create HTML layouts and populate my HTML components with data from DB. Alas, I have not yet found a way to transfer the data to my Angular 4 client app. The ViewComponents are not static resources, meaning I (most likely) can't transfer it as JSON-data, and even if I could, I'd have to teach my client how to unwrap it back into html, which would increase the load on the client.
I have confirmed that JQuery calls can be made to receive IViewComponentResult responses, but I am yet to find a way on how to achieve same results in an Angular component. Any help would be appreciated.
Usually with this stack you use .NET Core as the backend meaning you use it to write the Web API code which interacts with the database. The Angular side of things would have services which call the Web API via http methods and present/manipulate the data in component.html/.css/.ts files.
You can read through a guide such as this to get an idea of the structure and flow of the stack. Everything you mentioned in your 2nd paragraph can be achieved through this architecture without the worry of transferring ViewComponents.
Lets say I have a standalone ASP.NET Core Web API as its own project (since I don't want to merge it w/ my MVC app)
I now want to create an MVC web application (another project, but same solution) that will make calls to the API. I am aware that for ajax requests I will directly call the API through JavaScript which is straight forward.
However, I am a bit confused as to how the MVC controller would make calls to the same API to populate the ViewModel and send to the View when a user requests a page i.e. http://myurl/books/1
I am aware that if I was using something like Angular which is fully client-side I wouldn't be running into this issue.
That's a good question. There's three different approaches that I can think of:
The first is to call the same API from your MVC controller with a HTTPClient object. Might seem a bit weird calling "yourself" on the server side but it works. In my opinion this isn't a great solution, because you're losing type-checking and you'll also making an unnecessary call over the network, and you also have to parse and convert the response back from WebAPI to your .net objects.
The second approach is to move all of the logic that's inside the API into a new project and compile it all down to a DLL. Your Web Api can then call the code inside the library and your MVC project can do it too. A pretty good approach.
The third approach is to do what you've suggested - don't populate the Model at all on the server side inside your MVC project and just do it all from the client side. Yes, this will work great with Angular but you can also do this yourself using bog-standard JQuery or Knockout. This approach means much more client side javascript to write (use Typescript!) but you'll end up with a much nicer separation of concerns and cleaner solution.
First time asp.net webAPI + angular project. From many examples I've seen online I've found there are basically two ways for handling the views.
The first (which I have seen in many tutorials and courses) - use APIcontrollers only, so that the view are generated by angular. That means my project structure would have a folder 'app' and it will contain the html files (probably inside a 'view' folder). The routing will be done using angular routes. I will only have APIControllers in the project (without the regular Controller object).
Example project: https://github.com/DanWahlin/CustomerManagerStandard
The second - using Controllers to generate the views, using Razor (cshtml files), and angular incorporated into those (i.e ng-click inside the cshtml). There's no special 'app' folder for angular etc.
example project : https://github.com/Wintellect/Angular-MVC-Cookbook/tree/master/CRUDOperations
So, I'm wondering what are the pros and cons for each method, and when shall I use which one. Examples projects would be great as well.
I can only assume that the first method is more modular and differentiate server and client. However, using it means I'm loosing razor (Do I even need it?)
Thanks!
I actually had to make this decision a few months back myself.
This comes down to what you feel is more comfortable. I chose to do angular and WebAPI controls only. It makes me think in terms of true separation of concerns just easier, angular is your presentation layer and webapi is your services. This also gives you the freedom to do the compression/formatting of the actual html pages(instead of the cshtml pages which you really have no control over).
One more pro for WebAPI only is scalability, you would really only need one webserver for the webpages but you can scale out your WebAPI, this will allow you WebAPI to be your api as well as your clients as well.
Razor is just a view engine and in my experience angular does a good job of templating and directives to bear the cost of losing razor. You'll probably end up writing pure HTML in your razor files anyways once you get a hang of directives which means you'll have more of an issue adding a new view. Who wants to create a new controller, new action and a new view, and then have to do that in angular. It just ends up being easier and less complex to let server serve the html files, and let angular do all your routing and logic for you.
I believe too that the html files get cached too so you will see less round trips as you navigate page to page in angular.
As a person who works at a Microsoft shop and loves AngularJS for nearly all my front-end, the sooner you get away from mixing Razor and AngularJS, the better, especially if you are going for a SPA.
The only time I would recommend using Razor at all would be to generate the landing page (and possibly login page/admin area). It does give a nice way to provide authentication to access the app and then use Web Api Authorization attributes to do the rest of the authentication.
I am new to .NET and ideally want to make several layers of abstraction for making a fairly complex website. Being the first layer handling login, authentication, etc, with another layer handling the built in apps (how they look, predefined functions, database connections), and the lower level will be specific app implementation details.
This favors uniformity as all apps will inherit from one place allowing for easier maintenance and rapid development of all the smaller apps once the overhead abstraction layers handle their responsibilities.
The only problem is I am not 100% sure where to start with .NET ASP webpage inheritance. I tried Google and searching but I may not be looking for the right thing. I am hoping with someone with experience on the matter may direct me towards resources to make this kind of webpage inheritance/abstraction easier!
I am using Visual Studio 2010.
Edit:
I also want to add the purpose to my question: Another individual is creating the base of the website which will handle authentication, portal, UI look, etc
I want to make an app base that uses their website framework and adds onto it standards that every app must meet, function library, any addition UI overrides not applicable from portal, etc.
From there a third layer that will directly inherit from the above app base framework (abstraction) and further specify based on the guide lines made.
I appreciate the feedback so far!
In ASP.NET you have 4 common ways to reuse code/abstractions to serve you application-wide
The first way is just using a base page, which will inherit the standard asp.net Page and share the common logic for all of your pages, as explained here
The second way is using a master page: a master page defines a common design (html / css - wise) for all the pages that use it throughout the application. It can also be accessed programmatically by pages that use it, and therefore share a common logic
The third way is using an http module: An http module is basically a class, which is responsible for handling an HTTP request before its handled by the expected pages code on the server, and it allows you to add any common logic you want your application to use (such as authentication / authorization handling, getting relevant user information from the DB, etc)
Global.asax: contains application/session wide event handlers, which allow you to handle those events in once place (everything from application starting to a user session ending)
Using modules and base page is the preferred way, if you want to build few applications, sharing common behaviour. A master page can be used as well, of course, if you want them to share the same design as well.
That's quite a broad question. Welcome to ASP.NET!
I would suggest researching these topics:
Web page inheritance -> Master Pages,
Skinning -> App_Themes,
separation of responsibilities -> MVP design
pattern for the Web Forms platform, or MVC if you have a choice.
Login, roles -> Membership
This is a question of a more general nature. I'm building a system that can create dynamically forms and reports during runtime. For that purpose we're using data dictionary for storing data and XML definitions as blueprints for creating forms and reports as needed. We're using WWF Rule Engine for necessary business logic.
Right now I'm evaluating what would be the best approach to upgrade my system to allow creating web applications from my XML definition. I'm thinking of creating master page that would have a menu of defined forms and clicking on them would render them to the user.
Web forms are different beast than win forms. What is the best approach for this?
I'd go here with ASP.NET MVC if possible - you could create the form on client side for better performance (for example using jQuery).
On the other side - you can create the forms in the View and send it to the user according to the blueprint. It's plain HTML creation.
Anyhow, if you're using ASP.NET Web forms you can iterate through the XML, interpret it and add then add to the form. It would be more complicated I think.