MVVM – Web site using ASP.NET Primer
Purpose: The purpose of this document is to illustrate how to how to apply MVVM (Model-View-ViewModel) architectural pattern when developing Product catalog Web site using ASP.NET
Challenge: You may need to develop a modern application integrated with Microsoft Dynamics AX 2012 for the purposes of demonstration, POC or to be deployed in production environment. The question is what technology and architectural pattern to use in order to facilitate application development and maintenance efforts
Solution: In this scenario we'll develop Web site using ASP.NET
Walkthrough:
First off let's create a new project using Visual C# > ASP.NET Empty Web Site template
New Project
Then we'll apply MVVM (Model-View-ViewModel) architectural pattern for development of Product catalog Web site
Solution Explorer
Now let's review how I implemented Model, View and ViewModel
The model encapsulates business logic and data. Please see below how I define Product object (function) which has 2 attributes: ID and Name as a part of the model
The view model encapsulates presentation logic and state. Please see below how I define ObservableArray of products with respective function(s) (GetProducts) as a part of the view model
Model and ViewModel: JS (JavaScript.js)
function Product(id, name) {
var self = this;
self.id = ko.observable(id);
self.name = ko.observable(name);
}
function ProductViewModel() {
var self = this;
self.products = ko.observableArray();
self.GetProducts = function () {
self.products.push(new Product("X", "AlexProductX"));
}
}
|
Please note that Model and ViewModel definition is done in JavaScript (JS)
MVVM (Model-View-ViewModel) pattern implementation is different in JavaScript (JS) comparing to classic object-oriented languages such as C#.NET. Please note that JavaScript (JS) has objects which can contain data and methods that act upon that data. Objects can contain other objects. JavaScript (JS) does not have classes, but it does have constructors which do what classes do, including acting as containers for class variables and methods. JavaScript (JS) does not have class-oriented inheritance, but it does have prototype-oriented inheritance
Now let's review a view
Important to mention is that in order to link view and view model by means of binding I used the capabilities of knockout.js JavaScript (JS) library
Knockout (ko) is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user's actions or when an external data source changes), Knockout (ko) can help you implement it more simply and maintainably
Please find more info about Knockout (ko) JavaScript (JS) library here: http://knockoutjs.com
The view encapsulates the UI and any UI logic. Please see below how I iterate through the list of products and map view model object properties with elements of UI for display
View: HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Product Catalog</title>
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/knockout-2.3.0.js"></script>
<script src="/js/JavaScript.js"></script>
<script>
$(document).ready(function () {
var productViewModel = new ProductViewModel();
productViewModel.GetProducts();
ko.applyBindings(productViewModel);
})
</script>
<link href="/css/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<h1>Product Catalog</h1>
<table>
<tbody data-bind="foreach: products">
<tr>
<td id="id" data-bind="text: id"></td>
<td id="name" data-bind="text: name"></td>
</tr>
</tbody>
</table>
</body>
</html>
|
Please note that I also used JQuery JavaScript (JS) library because it is needed to be able to use $document variable. jQuery is a multi-browser (cf. cross-browser) JavaScript library designed to simplify the client-side scripting of HTML.
Please find more info about JQuery JavaScript (JS) library here: http://jquery.com
Please note that I created a CSS file to define a style
Style: CSS (StyleSheet.css)
table {
margin-top: 50px;
margin-left: 50px;
}
td {
border-width:1px;
border-style: solid;
height: 100px;
text-align: center;
}
#id {
width: 100px;
color: white;
background-color: black;
}
#name {
width: 400px;
color: black;
background-color: white;
}
|
Please note that I defined different styles to display product ID and Name
As the result our Product catalog application will look like below
Result
Please review the following article to learn how to quickly connect your application to Microsoft Dynamics AX 2012 Demo VM to test out the integration: http://ax2012aifintegration.blogspot.com/2013/04/microsoft-dynamics-ax-2012-windows-8.html
In case you are developing a mobile application for production please review the best practice guidance on Developing Mobile apps for Microsoft Dynamics AX 2012 here: http://www.microsoft.com/en-us/download/details.aspx?id=38413
Summary: This document describes how to apply MVVM (Model-View-ViewModel) architectural pattern when developing Product catalog sample Web Site using ASP.NET.
Tags: MVVM, Model-View-ViewModel, Web Site, ASP.NET, HTML5, JavaScript, JS, Microsoft Dynamics AX 2012.
Note: This document is intended for information purposes only, presented as it is with no warranties from the author. This document may be updated with more content to better outline the concepts and describe the examples.
No comments:
Post a Comment