I tried to integrate this javascript mvc sample http://www.alexatnet.com/content/model-view-controller-mvc-javascript into an asp.net page, I’m complete beginner at jquery and nothing shows up, why ?
Update: I have added missing html listbox but now no javascript seems to execute to initialize the listbox nor the buttons seem to work
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="javascriptmvc01._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script language="JavaScript" type="text/javascript">
/**
* The Model. Model stores items and notifies
* observers about changes.
*/
var ListModel = function (items) {
this._items = items;
this._selectedIndex = -1;
this.itemAdded = new Event(this);
this.itemRemoved = new Event(this);
this.selectedIndexChanged = new Event(this);
};
ListModel.prototype = {
getItems: function () {
return [].concat(this._items);
},
addItem: function (item) {
this._items.push(item);
this.itemAdded.notify({ item: item });
},
removeItemAt: function (index) {
var item = this._items[index];
this._items.splice(index, 1);
this.itemRemoved.notify({ item: item });
if (index == this._selectedIndex)
this.setSelectedIndex(-1);
},
getSelectedIndex: function () {
return this._selectedIndex;
},
setSelectedIndex: function (index) {
var previousIndex = this._selectedIndex;
this._selectedIndex = index;
this.selectedIndexChanged.notify({ previous: previousIndex });
}
};
var Event = function (sender) {
this._sender = sender;
this._listeners = [];
};
Event.prototype = {
attach: function (listener) {
this._listeners.push(listener);
},
notify: function (args) {
for (var i = 0; i < this._listeners.length; i++) {
this._listeners[i](this._sender, args);
}
}
};
var ListView = function (model, controller, elements) {
this._model = model;
this._controller = controller;
this._elements = elements;
var _this = this;
// attach model listeners
this._model.itemAdded.attach(function () {
_this.rebuildList();
});
this._model.itemRemoved.attach(function () {
_this.rebuildList();
});
// attach listeners to HTML controls
this._elements.list.change(function (e) {
_this._controller.updateSelected(e);
});
};
ListView.prototype = {
show: function () {
this.rebuildList();
var e = this._elements;
var _this = this;
e.addButton.click(function () { _this._controller.addItem() });
e.delButton.click(function () { _this._controller.delItem() });
},
rebuildList: function () {
var list = this._elements.list;
list.html('');
var items = this._model.getItems();
for (var key in items)
list.append($('<option>' + items[key] + '</option>'))
this._model.setSelectedIndex(-1);
}
};
var ListController = function (model) {
this._model = model;
};
ListController.prototype = {
addItem: function () {
var item = prompt('Add item:', '');
if (item)
this._model.addItem(item);
},
delItem: function () {
var index = this._model.getSelectedIndex();
if (index != -1)
this._model.removeItemAt(this._model.getSelectedIndex());
},
updateSelected: function (e) {
this._model.setSelectedIndex(e.target.selectedIndex);
}
};
$(function () {
var model = new ListModel(['PHP', 'JavaScript']);
var view = new ListView(model, new ListController(model),
{
'list': $('#list'),
'addButton': $('#plusBtn'),
'delButton': $('#minusBtn')
}
);
view.show();
});
</script>
<select id="list" size="10" style="width: 15em"></select><br/>
<button id="plusBtn"> + </button>
<button id="minusBtn"> - </button>
</div>
</form>
</body>
</html>
change:
to: