Why this sample ASP.NET + Jquery + javascript custom MVC doesn't show something?

Question

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>

Dave Thieben · Accepted Answer · 2010-10-06 13:59:22Z

1

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>

answered Oct 6, 2010 at 13:59

Dave Thieben

5,4462 gold badges31 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user310291 Over a year ago

Thanks a lot :) I created by hand that's why I forgot because Visual Studio crashes when I try to drag and drop the script :)

user310291 Over a year ago

Nevertheless there is something weird: contrary to the original site, when I add an item, the whole page refresh and so everything reinitialize.

Dave Thieben Over a year ago

I think that is due to the <button> tags, which operate as submit buttons. Try changing them to <input type="button" />

Dave Thieben · Accepted Answer · 2010-10-05 14:59:02Z

1

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.

answered Oct 5, 2010 at 14:59

Dave Thieben

5,4462 gold badges31 silver badges40 bronze badges

1 Comment

user310291 Over a year ago

Thanks I have added missing html listbox but now no javascript seems to execute to initialize the listbox nor the buttons seem to work

Collectives™ on Stack Overflow

Why this sample ASP.NET + Jquery + javascript custom MVC doesn't show something?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related