Building a Chat Web App With Signal R, Part 2: Listing 6

PersonManager.js

/// <reference path="jquery.signalR-1.0.0-rc1.js" />

$(function () {
    function personViewModel(id, firstName, lastName, email, owner) {
        this.id = id;
        this.firstName = ko.observable(firstName);
        this.lastName = ko.observable(lastName);
        this.email = ko.observable(email);
        this.removePerson = function () {
            owner.deletePerson(this.id)
        }

        var self = this;

        this.firstName.subscribe(function (newValue) {
            owner.updatePerson(ko.toJS(self));
        });

        this.lastName.subscribe(function (newValue) {
            owner.updatePerson(ko.toJS(self));
        });

        this.email.subscribe(function (newValue) {
            owner.updatePerson(ko.toJS(self));
        });
    }

    function peopleViewModel() {
        this.hub = $.connection.personHub;
        this.people = ko.observableArray([]);
        this.newPersonFirstName = ko.observable();
        this.newPersonLastName = ko.observable();
        this.newPersonEmail = ko.observable();
        var people = this.people;
        var self = this;
        var notify = true;

        this.init = function () {
            this.hub.server.getAll();
        }

        this.hub.client.allPeopleRetrieved = function (allPeople) {
            var mappedPeople = $.map(allPeople, function (person) {
                return new personViewModel(person.Id, person.FirstName,
                    person.LastName, person.Email, self)
            });

            people(mappedPeople);
        }

        this.hub.client.personUpdated = function (updatedPerson) {
            var person = ko.utils.arrayFilter(people(),
                function(value) {
                    return value.id == updatedPerson.Id;
                })[0];
            notify = false;
            person.firstName(updatedPerson.FirstName);
            person.lastName(updatedPerson.LastName);
            person.email(updatedPerson.Email);
            notify = true;
        };

        this.hub.client.raiseError = function (error) {
            $("#error").text(error);
        }

        this.hub.client.personCreated = function (newPerson) {
            people.push(new personViewModel(newPerson.Id, newPerson.FirstName, newPerson.LastName,
                newPerson.Email, self));
        };

        this.hub.client.personRemoved = function (id) {
            var person = ko.utils.arrayFilter(people(), function(value) {
                return value.id == id;
            })[0];
            people.remove(person);
        }

        this.createPerson = function () {
            var person = { firstName: this.newPersonFirstName(), lastname: this.newPersonLastName(), email: this.newPersonEmail() };
            this.hub.server.add(person).done(function () {
                console.log('Person saved!');
            }).fail(function (error) {
                console.warn(error);
            });
            this.newPersonEmail('');
            this.newPersonFirstName('');
            this.newPersonLastName('');
        }
       
        this.deletePerson = function (id) {
            this.hub.server.delete(id);
        }

        this.updatePerson = function (person) {
            if (notify) {
                this.hub.server.update(person);
            }
        }
    }

    var viewModel = new peopleViewModel();
    ko.applyBindings(viewModel);

    $.connection.hub.start(function () {
        viewModel.init();
    });
});

About the Author

Eric Vogel is a Senior Software Developer for Red Cedar Solutions Group in Okemos, Michigan. He is the president of the Greater Lansing User Group for .NET. Eric enjoys learning about software architecture and craftsmanship, and is always looking for ways to create more robust and testable applications. Contact him at [email protected].

comments powered by Disqus

Featured

  • Telerik UI for Blazor Updated

    Progress announced an update to its Telerik UI for Blazor components, targeting Microsoft's open source Blazor framework that lets C# coders create web apps without having to rely upon JavaScript.

  • Infragistics Unveils UI Components for Blazor

    Infragistics, specializing in third-party UI/UX controls and tools, unveiled a new offering targeting Blazor, Microsoft's red-hot open source framework that allows for C#-based web development instead of traditional mainstay JavaScript.

  • AWS Open Sources Tool for Porting .NET Framework Apps to .NET Core

    Leading cloud computing platform Amazon Web Services open sourced the it announced in July for helping users port old .NET Framework applications to the new .NET Core framework.

  • Uno Platform Ports Windows Calculator to Linux

    Uno Platform has ported the famed Windows Calculator, open sourced last year, to Linux as part of a continuing "proof point" effort to demonstrate the reach of what it describes as the sole UI offering available to target Windows, WebAssembly, iOS, macOS, Android and Linux with single-codebase applications coded in C# and XAML.

  • ASP.NET Core OData 8 Preview Supports .NET 5, but with Breaking Changes

    ASP.NET Core OData, which debuted in July 2018, is out in a v8.0 preview that for the first time supports the upcoming .NET 5 milestone release.

Upcoming Events