View, View Controller, Model Controller, Model (VVCMCM) Pattern

Anton Pious Alfred

Rate me:

3.00/5 (1 vote)

18 Mar 2012CPOL11 min read

18.6K

200

The MVC Pattern was first conceptualized assuming all the three actors were present at one place. Since Web Applications have both a client and a server this needs to be applied differently without technology bias.

VVCMCMSystem.zip
- VVCMCMSystem
  - VVCMCM
    - App_Data
    - bin
    - Model
      - EntityDTO.cs
    - ModelAsynOperation.cs
    - ModelControllerHandler.cs
    - ModelControllers
      - Entity.cs
    - obj
      - Debug
        
        Refactor
        
        TempPE
        
        VVCMCM.csproj.FileListAbsolute.txt
        
        VVCMCM.dll
        
        VVCMCM.pdb
    - Properties
      - AssemblyInfo.cs
    - Scripts
      - Core.js
      - JqGrid
        
        i18n
        
        grid.locale-en.js
        
        jquery.jqGrid.min.js
      - jquery-1.4.2.js
      - jquery-1.4.2-vsdoc.js
      - JqueryUI
        
        jquery-ui-1.8.1.custom.min.js
    - Themes
      - jqgrid
        
        ui.jqgrid.css
      - start
        
        images
        
        ui-bg_flat_55_999999_40x100.png
        
        ui-bg_flat_75_aaaaaa_40x100.png
        
        ui-bg_glass_45_0078ae_1x400.png
        
        ui-bg_glass_55_f8da4e_1x400.png
        
        ui-bg_glass_75_79c9ec_1x400.png
        
        ui-bg_gloss-wave_45_e14f1c_500x100.png
        
        ui-bg_gloss-wave_50_6eac2c_500x100.png
        
        ui-bg_gloss-wave_75_2191c0_500x100.png
        
        ui-bg_inset-hard_100_fcfdfd_1x100.png
        
        ui-icons_0078ae_256x240.png
        
        ui-icons_056b93_256x240.png
        
        ui-icons_d8e7f3_256x240.png
        
        ui-icons_e0fdff_256x240.png
        
        ui-icons_f5e175_256x240.png
        
        ui-icons_f7a50d_256x240.png
        
        ui-icons_fcd113_256x240.png
        
        jquery-ui-1.8.4.custom.css
      - ui-lightness
        
        images
        
        ui-bg_diagonals-thick_18_b81900_40x40.png
        
        ui-bg_diagonals-thick_20_666666_40x40.png
        
        ui-bg_flat_10_000000_40x100.png
        
        ui-bg_glass_100_f6f6f6_1x400.png
        
        ui-bg_glass_100_fdf5ce_1x400.png
        
        ui-bg_glass_65_ffffff_1x400.png
        
        ui-bg_gloss-wave_35_f6a828_500x100.png
        
        ui-bg_highlight-soft_100_eeeeee_1x100.png
        
        ui-bg_highlight-soft_75_ffe45c_1x100.png
        
        ui-icons_222222_256x240.png
        
        ui-icons_228ef1_256x240.png
        
        ui-icons_ef8c08_256x240.png
        
        ui-icons_ffd27a_256x240.png
        
        ui-icons_ffffff_256x240.png
        
        jquery-ui-1.8.4.custom.css
    - ViewControllers
      - Entity.js
    - ViewEvents
      - Entity.js
    - Views
      - EntityExplorer.htm
    - VVCMCM.csproj
    - VVCMCM.csproj.user
    - Web.config
  - VVCMCMSystem.sln
  - VVCMCMSystem.suo

.ui-jqgrid
{
	position:relative;
	font-size:11px;
	}
.ui-jqgrid .ui-jqgrid-view
{
	position:relative;
	left:0;
	top:0;
	padding:.0em;
	}
.ui-jqgrid .ui-jqgrid-titlebar
{
	padding:.3em .2em .2em .3em;
	position:relative;
	border-left:0 none;
	border-right:0 none;
	border-top:0 none;
	}
.ui-jqgrid .ui-jqgrid-title
{
	float:left;
	margin:.1em 0 .2em;
	}
.ui-jqgrid .ui-jqgrid-titlebar-close
{
	position:absolute;
	top:50%;
	width:19px;
	margin:-10px 0 0 0;
	padding:1px;
	height:18px;
	}
.ui-jqgrid .ui-jqgrid-titlebar-close span
{
	display:block;
	margin:1px;
	}
.ui-jqgrid .ui-jqgrid-titlebar-close:hover
{
	padding:0;
	}
.ui-jqgrid .ui-jqgrid-hdiv
{
	position:relative;
	margin:0;
	padding:0;
	overflow-x:hidden;
	overflow-y:auto;
	border-left:0 none!important;
	border-top:0 none!important;
	border-right:0 none!important;
	}
.ui-jqgrid .ui-jqgrid-hbox
{
	float:left;
	padding-right:20px;
	}
.ui-jqgrid .ui-jqgrid-htable
{
	table-layout:fixed;
	margin:0;
	}
.ui-jqgrid .ui-jqgrid-htable th
{
	height:22px;
	padding:0 2px 0 2px;
	}
.ui-jqgrid .ui-jqgrid-htable th div
{
	overflow:hidden;
	position:relative;
	height:17px;
	}
.ui-th-column,.ui-jqgrid .ui-jqgrid-htable th.ui-th-column
{
	overflow:hidden;
	white-space:nowrap;
	text-align:center;
	border-top:0 none;
	border-bottom:0 none;
	}
.ui-th-ltr,.ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr
{
	border-left:0 none;
	}
.ui-th-rtl,.ui-jqgrid .ui-jqgrid-htable th.ui-th-rtl
{
	border-right:0 none;
	}
.ui-jqgrid .ui-th-div-ie
{
	white-space:nowrap;
	zoom:1;
	height:17px;
	}
.ui-jqgrid .ui-jqgrid-resize
{
	height:20px!important;
	position:relative;
	cursor:e-resize;
	display:inline;
	overflow:hidden;
	}
.ui-jqgrid .ui-grid-ico-sort
{
	overflow:hidden;
	position:absolute;
	display:inline;
	cursor:pointer!important;
	}
.ui-jqgrid .ui-icon-asc
{
	margin-top:-3px;
	height:12px;
	}
.ui-jqgrid .ui-icon-desc
{
	margin-top:3px;
	height:12px;
	}
.ui-jqgrid .ui-i-asc
{
	margin-top:0;
	height:16px;
	}
.ui-jqgrid .ui-i-desc
{
	margin-top:0;
	margin-left:13px;
	height:16px;
	}
.ui-jqgrid .ui-jqgrid-sortable
{
	cursor:pointer;
	}
.ui-jqgrid tr.ui-search-toolbar th
{
	border-top-width:1px!important;
	border-top-color:inherit!important;
	border-top-style:ridge!important;
	}
tr.ui-search-toolbar input
{
	margin:1px 0 0 0;
	}
tr.ui-search-toolbar select
{
	margin:1px 0 0 0;
	}
.ui-jqgrid .ui-jqgrid-bdiv
{
	position:relative;
	margin:0;
	padding:0;
	overflow:auto;
	text-align:left;
	}
.ui-jqgrid .ui-jqgrid-btable
{
	table-layout:fixed;
	margin:0;
	}
.ui-jqgrid tr.jqgrow td
{
	font-weight:normal;
	overflow:hidden;
	white-space:pre;
	height:22px;
	padding:0 2px 0 2px;
	border-bottom-width:1px;
	border-bottom-color:inherit;
	border-bottom-style:solid;
	}
.ui-jqgrid tr.ui-row-ltr td
{
	text-align:left;
	border-right-width:1px;
	border-right-color:inherit;
	border-right-style:solid;
	}
.ui-jqgrid tr.ui-row-rtl td
{
	text-align:right;
	border-left-width:1px;
	border-left-color:inherit;
	border-left-style:solid;
	}
.ui-jqgrid td.jqgrid-rownum
{
	padding:0 2px 0 2px;
	margin:0;border:0 none;
	}
.ui-jqgrid .ui-jqgrid-resize-mark
{
	width:2px;
	left:0;
	background-color:#777;
	cursor:e-resize;
	cursor:col-resize;
	position:absolute;
	top:0;
	height:100px;
	overflow:hidden;
	display:none;
	border:0 none;
	}
.ui-jqgrid .ui-jqgrid-sdiv
{
	position:relative;
	margin:0;
	padding:0;
	overflow:hidden;
	border-left:0 none!important;
	border-top:0 none!important;
	border-right:0 none!important;
	}
.ui-jqgrid .ui-jqgrid-ftable
{
	table-layout:fixed;
	margin-bottom:0;
	}
.ui-jqgrid tr.footrow td
{
	font-weight:bold;
	overflow:hidden;
	white-space:nowrap;
	height:21px;
	padding:0 2px 0 2px;
	border-top-width:1px;
	border-top-color:inherit;
	border-top-style:solid;
	}
.ui-jqgrid tr.footrow-ltr td
{
	text-align:left;
	border-right-width:1px;
	border-right-color:inherit;
	border-right-style:solid;
	}
.ui-jqgrid tr.footrow-rtl td
{
	text-align:right;
	border-left-width:1px;
	border-left-color:inherit;
	border-left-style:solid;
	}
.ui-jqgrid .ui-jqgrid-pager
{
	border-left:0 none!important;
	border-right:0 none!important;
	border-bottom:0 none!important;
	margin:0!important;
	padding:0!important;
	position:relative;
	height:25px;
	white-space:nowrap;
	overflow:hidden;
	}
.ui-jqgrid .ui-pager-control
{
	position:relative;
	}
.ui-jqgrid .ui-pg-table
{
	position:relative;
	padding-bottom:2px;
	width:auto;
	margin:0;
	}
.ui-jqgrid .ui-pg-table td
{
	font-weight:normal;
	vertical-align:middle;
	padding:1px;
	}
.ui-jqgrid .ui-pg-button
{
	height:19px!important;
	}
.ui-jqgrid .ui-pg-button span
{
	display:block;
	margin:1px;
	float:left;
	}
.ui-jqgrid .ui-pg-button:hover
{
	padding:0;
	}
.ui-jqgrid .ui-state-disabled:hover
{
	padding:1px;
	}
.ui-jqgrid .ui-pg-input
{
	height:13px;
	font-size:.8em;
	margin:0;
	}
.ui-jqgrid .ui-pg-selbox
{
	font-size:.8em;
	line-height:18px;
	display:block;
	height:18px;
	margin:0;
	}
.ui-jqgrid .ui-separator
{
	height:18px;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	margin:1px;
	float:right;
	}
.ui-jqgrid .ui-paging-info
{
	font-weight:normal;
	height:19px;
	margin-top:3px;
	margin-right:4px;
	}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div
{
	padding:1px 0;
	float:left;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	position:relative;
	}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-button
{
	cursor:pointer;
	}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon
{
	float:left;margin:0 2px;
	}
.ui-jqgrid td input,.ui-jqgrid td select .ui-jqgrid td textarea
{
	margin:0;
	}
.ui-jqgrid td textarea
{
	width:auto;
	height:auto;
	}
.ui-jqgrid .ui-jqgrid-toppager
{
	border-left:0 none!important;
	border-right:0 none!important;
	border-top:0 none!important;
	margin:0!important;
	padding:0!important;
	position:relative;
	height:25px!important;
	white-space:nowrap;
	overflow:hidden;
	}
.ui-jqgrid .ui-jqgrid-btable .ui-sgcollapsed span
{
	display:block;
	}
.ui-jqgrid .ui-subgrid
{
	margin:0;
	padding:0;
	width:100%;
	}
.ui-jqgrid .ui-subgrid table
{
	table-layout:fixed;
	}
.ui-jqgrid .ui-subgrid tr.ui-subtblcell td
{
	height:18px;
	border-right-width:1px;
	border-right-color:inherit;
	border-right-style:solid;
	border-bottom-width:1px;
	border-bottom-color:inherit;
	border-bottom-style:solid;
	}
.ui-jqgrid .ui-subgrid td.subgrid-data
{
	border-top:0 none!important;
	}
.ui-jqgrid .ui-subgrid td.subgrid-cell
{
	border-width:0 0 1px 0;
	}
.ui-jqgrid .ui-th-subgrid
{
	height:20px;
	}
.ui-jqgrid .loading
{
	position:absolute;
	top:45%;
	left:45%;
	width:auto;
	z-index:101;
	padding:6px;
	margin:5px;
	text-align:center;
	font-weight:bold;
	display:none;
	border-width:2px!important;
	}
.ui-jqgrid .jqgrid-overlay
{
	display:none;
	z-index:100;
	}
* html .jqgrid-overlay
{
	width:expression(this.parentNode.offsetWidth+'px');
	height:expression(this.parentNode.offsetHeight+'px');
	}
* .jqgrid-overlay iframe
{
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	width:expression(this.parentNode.offsetWidth+'px');
	height:expression(this.parentNode.offsetHeight+'px');
	}
.ui-jqgrid .ui-userdata
{
	border-left:0 none;
	border-right:0 none;
	height:21px;
	overflow:hidden;
	}
.ui-jqdialog
{
	display:none;
	width:300px;
	position:absolute;
	padding:.2em;
	font-size:11px;
	overflow:visible;
	}
.ui-jqdialog .ui-jqdialog-titlebar
{
	padding:.3em .2em;
	position:relative;
	}
.ui-jqdialog .ui-jqdialog-title
{
	margin:.1em 0 .2em;
	}
.ui-jqdialog .ui-jqdialog-titlebar-close
{
	position:absolute;
	top:50%;
	width:19px;
	margin:-10px 0 0 0;
	padding:1px;
	height:18px;
	}
.ui-jqdialog .ui-jqdialog-titlebar-close span
{
	display:block;
	margin:1px;
	}
.ui-jqdialog .ui-jqdialog-titlebar-close:hover,.ui-jqdialog .ui-jqdialog-titlebar-close:focus
{
	padding:0;
	}
.ui-jqdialog-content,.ui-jqdialog .ui-jqdialog-content
{
	border:0;
	padding:.3em .2em;
	background:none;
	height:auto;
	}
.ui-jqdialog .ui-jqconfirm
{
	padding:.4em 1em;
	border-width:3px;
	position:absolute;
	bottom:10px;
	right:10px;
	overflow:visible;
	display:none;
	height:80px;
	width:220px;
	text-align:center;
	}
.ui-jqdialog-content .FormGrid
{
	margin:0;
	}
.ui-jqdialog-content .EditTable
{
	width:100%;
	margin-bottom:0;
	}
.ui-jqdialog-content .DelTable
{
	width:100%;margin-bottom:0;
	}
.EditTable td input,.EditTable td select,.EditTable td textarea
{
	margin:0;
	}
.EditTable td textarea
{
	width:auto;
	height:auto;
	}
.ui-jqdialog-content td.EditButton
{
	text-align:right;
	border-top:0 none;
	border-left:0 none;
	border-right:0 none;
	padding-bottom:5px;
	padding-top:5px;
	}
.ui-jqdialog-content td.navButton
{
	text-align:center;
	border-left:0 none;
	border-top:0 none;
	border-right:0 none;
	padding-bottom:5px;
	padding-top:5px;
	}
.ui-jqdialog-content .CaptionTD
{
	text-align:left;
	vertical-align:top;
	border-left:0 none;
	border-right:0 none;
	border-bottom:0 none;
	padding:1px;
	white-space:nowrap;
	}
.ui-jqdialog-content .DataTD
{
	padding:1px;
	border-left:0 none;
	border-right:0 none;
	border-bottom:0 none;
	vertical-align:top;
	}
.ui-jqdialog-content .form-view-data
{
	white-space:pre;
	}
.fm-button
{
	display:inline-block;
	margin:0 4px 0 0;
	padding:.4em .5em;
	text-decoration:none!important;
	cursor:pointer;
	position:relative;
	text-align:center;
	zoom:1;
	}
.fm-button-icon-left
{
	padding-left:1.9em;
	}
.fm-button-icon-right
{
	padding-right:1.9em;
	}
.fm-button-icon-left .ui-icon
{
	right:auto;
	left:.2em;
	margin-left:0;
	position:absolute;
	top:50%;
	margin-top:-8px;
	}
.fm-button-icon-right .ui-icon
{
	left:auto;
	right:.2em;
	margin-left:0;
	position:absolute;
	top:50%;
	margin-top:-8px;
	}
#nData,#pData
{
	float:left;
	margin:3px;
	padding:0;
	width:15px;
	}
.ui-jqgrid .selected-row,div.ui-jqgrid .selected-row td
{
	font-style:normal;
	border-left:0 none;
	}
.ui-jqgrid .tree-wrap
{
	float:left;
	position:relative;
	height:18px;
	white-space:nowrap;
	overflow:hidden;
	}
.ui-jqgrid .tree-minus
{
	position:absolute;
	height:18px;
	width:18px;
	overflow:hidden;
	}
.ui-jqgrid .tree-plus
{
	position:absolute;
	height:18px;
	width:18px;
	overflow:hidden;
	}
.ui-jqgrid .tree-leaf
{
	position:absolute;
	height:18px;
	width:18px;
	overflow:hidden;
	}
.ui-jqgrid .treeclick
{
	cursor:pointer;
	}
.jqmOverlay
{
	background-color:#000;
	}
* iframe.jqm
{
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	width:expression(this.parentNode.offsetWidth+'px');
	height:expression(this.parentNode.offsetHeight+'px');
	}
.ui-jqgrid-dnd tr td
{
	border-right-width:1px;
	border-right-color:inherit;
	border-right-style:solid;
	height:20px;
	}
.ui-jqgrid .ui-jqgrid-title-rtl
{
	float:right;margin:.1em 0 .2em;
	}
.ui-jqgrid .ui-jqgrid-hbox-rtl
{
	float:right;padding-left:20px;
	}
.ui-jqgrid .ui-jqgrid-resize-ltr
{
	float:right;
	margin:-2px -2px -2px 0;
	}
.ui-jqgrid .ui-jqgrid-resize-rtl
{
	float:left;
	margin:-2px 0 -1px -3px;
	}
.ui-jqgrid .ui-sort-rtl
{
	left:0;
	}
.ui-jqgrid .tree-wrap-ltr
{
	float:left;
	}
.ui-jqgrid .tree-wrap-rtl
{
	float:right;
	}
.ui-jqgrid .ui-ellipsis
{
	text-overflow:ellipsis;
	-moz-binding:url('ellipsis-xbl.xml#ellipsis');
	}
.ui-searchFilter
{
	display:none;
	position:absolute;
	z-index:770;
	overflow:visible;
	}
.ui-searchFilter table
{
	position:relative;
	margin:0;
	width:auto;
	}
.ui-searchFilter table td
{
	margin:0;
	padding:1px;
	}
.ui-searchFilter table td input,.ui-searchFilter table td select
{
	margin:.1em;
	}
.ui-searchFilter .ui-state-default
{
	cursor:pointer;
	}
.ui-searchFilter .divider
{
	height:1px;
	}
.ui-searchFilter .divider div
{
	background-color:black;
	height:1px;
	}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Anton Pious Alfred

Architect Riversand Technologies Inc

India

Head of Engineering at Riversand Technologies Inc.

View, View Controller, Model Controller, Model (VVCMCM) Pattern

License

Comments and Discussions