This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ASP.NET MVC: Intro to MVC using Binding JSON objects to Models | |
This post is designed to assist in jump-starting your MVC (model-view-control) project binding JSON to models (using Ajax posts). I feel that this is a vital skill to any journeyman ASP.NET MVC developer. Before we start note that all examples using Xamarin (Mono 3.2.0) - this should be opened in Visual Studio 2010+. | |
If you're new to MVC, here is a brief explanation. This design pattern is designed to keep your code into specific parts dedicated for specific usage. Models are designed to represent your data objects. The controller works with/manipulates models (backend, server side code). It then generates a View (rendered HTML) that is presented to the user on their web browser. The Model and Controller are written in C# for this project. The View is rendered in pure HTML with Javascript. | |
Create a new MVC project and call it "bindingJSON" (using the standard, no authentication). Now, inspect the object you need to model. Using an object orien |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm install -g karma | |
npm install -g karma-cli |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html lang="en"> | |
<head> | |
<!-- in Stylesheets, a class can be prefixed with a "." and an ID with a "#" --> | |
<style type="text/css"> | |
/* assign the entire HTML body an ID of "home" */ | |
#home { | |
font-weight: bold; | |
font-color: black; | |
} | |
/* you only need to worry about this "class" */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* A brief intro to Modern HTML and CSS | |
*/ | |
<table></table>'s have been replaced by <div></div>'s for body layout. This allows for more flexibility in modern browser | |
rendering engines (and uses less memory to compute positioning). Tables are now used for data output | |
(such as charts, grids, raw data, etc). | |
To style these divs and give them a meaning, there are a variety of HTML styles that can be applied. | |
These are traditionally stored in an external stylesheet inside of the <head></head> HTML tags, ie: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Create namespace objects for each Backbone object type */ | |
App = new Object() || {}; | |
App.Models = new Object() || {}; | |
App.Views = new Object() || {}; | |
App.Routers = new Object() || {}; | |
App.Collections = new Object() || {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* use namespace for storage */ | |
App.Models.BaseModel = Backbone.Model.extend({ | |
defaults: { | |
id: 1, | |
name: "BaseModel" | |
} | |
}); | |
App.Views.BaseView = Backbone.View.extend({ | |
el: undefined, | |
model: undefined |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* use namespace for storage */ | |
var myModel = new App.Models.BaseModel({ | |
comment: "Test!" | |
}); | |
var myView = new App.Views.BaseView({ | |
el: $('body'), | |
model: myModel | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Create namespace objects for each Backbone object type */ | |
App = new Object() || {}; | |
App.Models = new Object() || {}; | |
App.Views = new Object() || {}; | |
App.Routers = new Object() || {}; | |
App.Collections = new Object() || {}; | |
App.ActiveModels = new Object() || {}; | |
App.ActiveViews = new Object() || {}; | |
App.ActiveRouters = new Object() || {}; | |
App.ActiveCollections = new Object() || {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
App = new Object() || {}; | |
App.Models = new Object() || {}; | |
App.Collections = new Object() || {}; | |
App.Views = new Object() || {}; | |
App.Models.TableRow = Backbone.Model.extend({ | |
}); |
OlderNewer