Why this sample ASP.NET + Jquery + javascript custom MVC doesn't show something?
I tried to integrate this javascript mvc sample http://www.alexatnet.com/content/m开发者_StackOverflowodel-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:
<script src="Scripts/jquery-1.4.1.js" type="text/javascript">
to:
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
you don't have the HTML DOM elements in your code anywhere:
<select id="list" size="10" style="width: 15em"></select><br/>
<button id="plusBtn"> + </button>
<button id="minusBtn"> - </button>
these are the elements that are being selected and passed as 'list', 'addButton', and 'delButton' when calling new ListView(..). without them in the document, the javascript doesn't have anything to work with.
加载中,请稍侯......
精彩评论