Web Development

var ticker = $.connection.stockTickerMini, // the generated client-side hub proxy
    up = '▲',
    down = '▼',
    $stockTable = $('#stockTable'),
    $stockTableBody = $stockTable.find('tbody'),
    rowTemplate = '<tr data-symbol="{Symbol}"><td>{Symbol}</td><td>{Price}</td><td>{DayOpen}</td><td>{Direction} {Change}</td><td>{PercentChange}</td></tr>';

function formatStock(stock) {
        return $.extend(stock, {
            Price: stock.Price.toFixed(2),
            PercentChange: (stock.PercentChange * 100).toFixed(2) + '%',
            Direction: stock.Change === 0 ? '' : stock.Change >= 0 ? up : down
        });
    }

@using (@Html.BeginForm("Index", "Home"))
{
    <div id="divData">
        @{
            var grid = new WebGrid(Model, rowsPerPage: 20);

<pre>
        @grid.GetHtml(
        tableStyle: "webgrid-table",
        headerStyle: "webgrid-header",
        footerStyle: "webgrid-footer",
        alternatingRowStyle: "webgrid-alternating-row",
        selectedRowStyle: "webgrid-selected-row",
        rowStyle: "webgrid-row-style",
        mode: WebGridPagerModes.All,
        columns:
        grid.Columns
        (
            grid.Column(columnName: "RowId", header: "Row Id", format: @<text>@item.RowId</text>),
            grid.Column(columnName: "SiteId", header: "Site Id", format: @<text>@item.SiteId</text>),
        ))

        //other columns ommitted
    }

@section scripts
{
    <script src="/Scripts/jquery-3.1.1.min.js"></script>
    <script src="/Scripts/jquery.signalR-2.1.2.js"></script>
    <script src="~/signalr/hubs"></script>

    <script type="text/javascript">
        $(function () {

               $(function () {

                    var conn = $.hubConnection("<a href="http://000.000.00.00:8094/signalr">http://000.000.00.00:8094/signalr</a>");
                    var proxy = conn.createHubProxy('dashboardHub')

                    proxy.on('notifyAllClientsOfChanges', function (model) {

                        console.log("notifyAllClientsOfChanges received");

                        //Here I want to either Add or Update the row who's Id matches the Model's id.

                        // 1) See if the row exists in the table

                        // 2) If the row exists, update it from the model passed in

                        // 3) If the row does not exist, add it

                    });
                });
    </script>
}