I'm currently looking at putting together a website with ASP.NET MVC that gives the viewer the ability to move around from page to page (view to view) without it being refreshed each time.
The way I'm currently thinking of doing it treating views as 'areas' (or mini master pages) and using partial views in the place of views. I'll then switch the partial views in and out as needed using AJAX calls to the controller (which will load the partial view) and JavaScript.
I feel like I could have explained this better but I'm not quite sure how to phrase it, so hopefully this diagram will help somewhat:
Here's a look at my current folder structure. Index.vbhtml is acting as the aformentioned 'area'.
Views/
Accounts/
Partials/
ViewAccount.vbhtml
CreateAccount.vbhtml
Index.vbhtml
I'm loading my partials views in using a JS function along the lines of: nav.navigateToView("Action", "Controller")
For example: nav.navigateToView("ViewAccount", "Accounts" will load the ViewAccount.vbhtml partial view onto my page.
What I'd like to know is: Is there currently a defined method for doing this, or perhaps a library I can use to aid me? If not, could you give some helpful advice on how to achieve this? I'm not convinced the method I've described will be adequate.
Apologies if this question has already been asked! I've had a tough time trying to find anything relevant on this topic. Am I missing something simple?
Thanks,Aaron.
From the description you have provided, I think what you are describing is a single page application (SPA). Needless to say, there is a bunch of articles available so sorry for not being more specific.
One approach would be to use Angular.js which is a Javascript framework, described here and here (and thousands of other sites).
ASP.NET Single Page Application (SPA) helps you build applications that include significant client-side interactions using HTML 5, CSS 3 and JavaScript. It’s now easier than ever before to getting started writing highly interactive web applications.
Please see this site.
Related
(firstly thanks for the help and time looking at this) -
OK so there are allot of frame works out there and i've been going round in circles trying to find the right language to do what I need -
I'm looking to create a web page (personal site) - which is only one page but when clicking on links (such as blog and projects) it then removes the main content on the page and re-populates it with the blog main content ect -
Ideally there would be some type of animation transition between pages -
From looking at some portfolio sites a good example of what I am trying to create is https://jasonliao.co.nz/
Any help here would be great -
Ideally to know:
what is this method called (loading pages without refreshing the page)
Can this be done using vanilla JS? (i'd love to get amazing as one language before throwing in frameworks on top of it) -
Yes I am kinda new to this side of development so any help is really appreciated - thanks,
Wally
I recommend start by learning basic JS (Java Script) then once your confident then move onto JQuery. Udemy would have a few basic courses.
What your asking is really broad as many languages and frameworks could do it. Its more what your use to or features your site will require. eg do you require back-end functions if so then you will need to use something like PHP or Node
This guy was probably using Angular or React for this. It is single page application (SPA). Whole app is loaded in the browser and if it needs some data, it will send HTTP requests to the servers and get data as JSON. If you want to make similar things with vanilla JS, you must use Ajax and do alot of DOM manipulation to achieve the same thing :)
I'm trying to learn angular by building this small web app that has this layout:
Simply, the Header's going to say "first app!"
each content nav button is going to be a different category (sports, music, etc) and each one is going to pull some public api and display it in a list on the content page in a table. I think I'm ganna have some search and filtering features and bread crumb if I decide to get fancy and add submenus.
Anyways, I understand the gist of Angular and I went through the phoneCat app tutorial on the angular site: https://docs.angularjs.org/tutorial and I have been watching bits and pieces of youtube videos on angular as well.
Unfortunately I'm still confused when it comes to transposing the concepts of routing/modules/services/directives/etc... into making an actual web app/site
I'm looking for someone to kind of give me a super high level view of how they would make this app using angular and explain it like I'm a total noob and maybe offer some simple rule of thumb tricks to think about angular in terms of web app components (eg. when I think of the data in a json file and I want to display it, what could I think of that in terms of angular concepts (data/model/view?) or ie: you'll be using ng-repeat a lot, etc.)
Here are some questions I have off the bat:
How many .html files should I have (views?) Do I make a .html for each content page?
The Header, Nav and bread crumb (if I use sub menus) will always be displayed to the user. Does this mean I have a index.html page with <div ng-view></div> in the body and then have a main.html with the header/nav/breadcrumb, and then have content1.html / content2.html/ content3.html etc separate? If this is true then how do I use more than one ng-view? Or is this where the concept of routing comes in? Could someone explain how I would set up these pages from a ng-view/routing perspective at the simplest level?
What does angular.module() do? and when do I use it? I see it at the top of controllers, routing, and services files, etc...
Could someone use an example when and how they use a service / factory?
I feel like this is asking a lot for someone to explain. I'm not very computer-sciency minded and I feel stuck in this place where I feel like I can almost build a really cool app but just need to put all the pieces in the right place.
Thanks
Great questions, I know I had my fare share when I first started. I am going to answer each question with a link that will give you detailed information of each.
yes, you make a html page for each content page(aka view)
Yes, your index page will contain all the static content, and you will use your ng-view directive to state the area that is dynamic. ng-views are the only way to make set dynamic content. You can use: switches, hide/show, and ng-repeats. For multiple views I would suggest you either user a combination of ng-views and in the views use a switch. If saving the state is very important, than I suggest you look at angular-ui https://github.com/angular-ui/ui-router
Angular.module() is a way to separate/ modularize your code. This means that it is only used in the parts that you explicitly state. When used the dependencies stated will be injected.
A great example of how to use the factory module, is in the angularjs tutorial from the official site. I would also suggest some great videos from egghead.io -https://www.youtube.com/watch?v=HvTZbQ_hUZY
If you are looking into a mobile solution, you might want to check out Ionicframework. It is angularjs but with added magic for mobile.
So I've been doing a lot of learning on Backbone, Sass, RoR, Bootstrap, etc. and I am extremely frustrated that no sources I've found (including in Tuts+ and Code School) mention any way of putting it all together...I have no clue how to style a web page if all of the contents I want in the page are being built through backbone...so if I want to click on the "About" page on a website, have all that page's Backbone contents styled correctly when appended to the DOM.
Secondly, I'm not sure how I should be creating these web pages for a website; should I be creating the whole page in Backbone and then keep that on the server until someone clicks on, for example, that "About" page and then have the whole page loaded into the view? Or am I totally misunderstanding one of the ways you can use Backbone? Along with this then, how am I supposed to communicate Backbone to a Ruby Server? just using Ajax?
I'm looking for sources and anyone who can help me understand this stuff in clear terms!
Thanks so much,
-Stu.
Presuming that you want to build a single page app it is important to understand each one responsibilities:
Rails
Create a full stack application that runs on server
Create a consumable API
Manage assets pipeline
...
Backbone
To manage your frontend javascript application
Decouple data from the views using Models
Connect an API over a RESTful JSON interface
...
Keep in mind this is a oversimplification of both...
Rails will handle the backend, retrieving an API to be consumed by Backbone. The Rails assets pipeline will deliver all files that Backbone needs, including the css that will style you app.
It might be somehow confusing since you will hear concepts that eventually will clash between them, like in both ends will have Models, Views and Router, but they will live live independently from each other, one will work on the server-side (Rails) and the other on the client-side (Backbone).
To give an example:
Rails would render:
domain
|-index.html
|-js/*.js
|-css/*.css
`-api/*.json
Backbone would use the DOM (index.html) and the js scripts to execute logic, append the views into the DOM and Read/Write data using ajax through the API.
Another confusing thing would be views, since Rails will generate those for you, and backbone will also have their own views, so the usual setup:
In the client-side, Backbone will be have at least the following parts:
Router — it will orchestrate your app, binding an event a route, let's say /#about page and create a view and pass the respective model:
Model — it will request data from the API and dispatch an event when done
View — it will use a template to render the model data
In this case Rails would manage the page assets and provide the API, Backbone would have it own router, models, views and templates to render the page on the client-side.
This also means that the way you combine both it could be only answered regarding the project specificities, and there a lot of ways to use both.
That said, IMHO it's really important to first understand how a full Backbone app works,
then use something like backbone-rails gem, to see how both can be managed in a consistente way.
I know what you mean--there's a lot of random tutorials out there for Backbone but not a lot that put it all together. To a certain extent that's just how it is, unfortunately, but I'd say once you're past learning the basics from Code School and others, the hands down best resource for how to actually build complicated apps is:
BackboneRails: http://www.backbonerails.com/
It covers the stack you're talking about mostly. The first few screencasts are free and then subsequent ones are paid but well worth it. Building on the skills I've learned from BackboneRails and I've built several fairly complicated apps that turned out great. Good luck!
I am trying to use Backbone to make different views/models for different html pages, but I want to be able to separate the models and views if possible without making it an SPA... Anyone have any clue as to how I would go about this? To make it more "answerable" maybe this question can be answered - How do I use require.js and backbone.js without making it an SPA... how do I layout the page because I know this line gets added to the html page to call require:
<script data-main="js/mainU.js" src="js/libs/require.min.js"></script>
Backbone was designed for single page apps. On frameworks website it's demonstrated on a lot of examples. But if you want to do so just write more single page apps and load the required Backbone files inside that apps.
I'm pretty new to Sencha Touch and am trying to make a simple application that has a login form and makes calls and fetch results into lists.
My question is, how should I create the structure of the application? Should it all be inside one .html file? or should I different pages for each list and the login page? If so, how can I change views from one page to another and get transition effects?
There is actually a generator which you can use to generate the canonical app structure. From the Sencha download, go to the jsbuilder directory, then run a command similar to this:
./sencha.sh generate app MyApp path/to/myapp
Also, this slide set demonstrates the structure, though you may have to dig for more of the philosophy for why things are where:
http://www.sencha.com/conference/sessions/session.php?sid=322
And here's the example app talked about in the discussion:
http://cl.ly/1d1S282O1Y2c3N1v1j1i
It's fine to use a single HTML file to get things started, but in the long run it's worth making the application structure consistent with 'best practices' so that others can look at, and understand, your code subsequently.
Sencha Touch generators (coming in v1.1) place the launch logic in a file called app.js and then have files for each model, view and controller (in respective directories).
While you may not be building a fully fledged MVC application from the start, you should probably still use these conventions. Take a look at the Twitter and Kiva apps in the SDK (and at http://dev.sencha.com/deploy/touch/examples/ ) foor good examples.
The index.html file can link to each file individually, but of course for production, you are also advised to look at the JSBuilder tool to package and minify them all so that the device can fetch them in one single HTTP request.
I would break it up by major function (i.e. purpose). For mobile apps, you want to avoid having unnecessary postbacks / loading multiple pages and views if you can help it.
If your mobile app has one purpose, I would keep it on one html page and only break up the JavaScript files as you need to keep it organized.
If it has two purposes (e.g. 1-to ENTER a bunch of information, and 2-to display reports on your data), then I would break it up into two html files.
For example, if you have a mobile app that takes you through a series of wizard steps to perform data entry (i.e. single purpose), I would house that whole wizard inside of an Ext.Panel (on a single page), and swap out each content Ext.Panel "step" of the wizard as the user progresses through the wizard.
Start with the simplest thing and refactor later. I've just done an app in Sencha Touch and it gets quite bewildering looking at the example files. I found the easiest way to learn was to create a single html file and as soon as something became unwieldy or obviously needed a refactor I started creating subsequent files.