Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.
SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript. For the traditional ASP.NET developer, it can be difficult to make the leap. Luckily, there are many open source JavaScript frameworks that make it easier to create SPAs.
In this article, I’ll walk through creating a simple SPA app. Along the way, I’ll introduce some fundamental concepts for building SPAs, including the Model-View-Controller (MVC) and Model-View-ViewModel (MVVM) patterns, data binding and routing.
The sample app I created is a simple movie database, shown in Figure 1. The far-left column of the page displays a list of genres. Clicking on a genre brings up a list of movies within that genre. Clicking the Edit button next to an entry lets you change that entry. After making edits, you can click Save to submit the update to the server, or Cancel to revert the changes.
The MVC and MVVM Patterns
The MVC pattern dates back to the 1980s and early graphical UIs. The goal of MVC is to factor the code into three separate responsibilities, shown in Figure 7. Here’s what they do:
- The model represents the domain data and business logic.
- The view displays the model.
- The controller receives user input and updates the model.
A more recent variant of MVC is the MVVM pattern (see Figure 8). In MVVM:
- The model still represents the domain data.
- The view model is an abstract representation of the view.
- The view displays the view model and sends user input to the view model.
https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
相关推荐
Using Silverlight and XAML in MVC MVP MVVM patterns Using Silverlight and XAML in MVC MVP MVVM patterns Using Silverlight and XAML in MVC MVP MVVM patterns
it compared to other patterns such MVP and MVC. In Chapter 1, WPF and Silverlight will be explored in some detail and their respective features highlighted. Chapter 2introduces the foundation of ...
it compared to other patterns such MVP and MVC. In Chapter 1, WPF and Silverlight will be explored in some detail and their respective features highlighted. Chapter 2 introduces the foundation of the ...
Learn how modern architectural patterns—such as MVC, MVP, and MVVM—are useful from the perspective of a modern web application developer. This book also walks experienced JavaScript developers ...
MVC Model–View–Controller (MVC)是一种把信息展现逻辑和用户交互分离的计算机用户界面开发模式;...后来通过《Design Patterns: Elements of Reusable Object-Oriented Software》这本书的深入介绍,才使得mvc彻底流
iOSDesignPatternSamples 这是由许多设计模式制作的Github用户搜索演示应用程序。 应用结构 SearchViewController ...... UserRepositoryViewController ...... RepositoryViewController ...... 此外,添加/删除内存中...
MVC模式 列表活动 MVVM 模式 外观图案 安卓媒体框架 桥接模式 适配器视图/适配器 工厂方法 模板模式 装饰模式 单例模式 输入法管理器 Android 中的独特模式: 名称 类型 用 关联 高级链接 视图持有人模式 布局性能 ...
Magellan的介绍,这是WPF的开源导航框架。
The name RIBs is short for Router, Interactor and Builder, which are core components of this architecture. This framework is designed for mobile apps with a large number of engineers and nested ...
模型-视图-视图模型(MVVM) 针对Windows Presentation Application(WPF)的MVC和Model View Presenter(MVP)的量身定制的版本 重构技术 好吧,大多数时候我们都在进行一些重构,目的是为了改进源代码,以避免...