Database change notification to signalr via mvc4 controller

I have created a NerdDinner like application using the NerdDinner tutorial available online by ScottGu. I want to add SignalR to my application such that every time a new dinner is created, the value of dinners displayed on the home page should be updated.

I have a create method in my HomeController

    [HttpPost]
    public ActionResult Create(Dinner dinner)
    {
        if (ModelState.IsValid)
        {
            nerdDinners.Dinners.Add(dinner);

            nerdDinners.SaveChanges();
        }
        return RedirectToAction("Index");
    }

And my Hub class is as below:

[HubName("DinnerHub")]
public class NewDinnerHub : Hub
{
    int dinnerCount = 0;
    NerdDinners.Models.NerdDinners nerdDinners = new NerdDinners.Models.NerdDinners();

    public void SendDinnerNumber(int no_of_dinners)
    {
        var dinners = from d in nerdDinners.Dinners
                      select d;
        dinnerCount = dinners.ToList().Count();
        no_of_dinners = dinnerCount;
        IHubContext context = GlobalHost.ConnectionManager.GetHubContext<NewDinnerHub>();
        context.Clients.All.getDinnerNumber(this.Context.ConnectionId, no_of_dinners);
    }

}

And here is my index.cshtml

@model IEnumerable<NerdDinners.Models.Dinner>

<h2>Index</h2>

<h1>Upcoming Dinners</h1>
<ul>
@foreach(var d in Model) {
<li>
    @Html.DisplayFor(modelItem => d.Title)
    @Html.DisplayFor(modelItem => d.EventDate)
 </li>
 }
 </ul>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<p>
    @Html.Label("Number_of_Dinners","Number of Dinners : ") <label id="No_of_Dinners" />
</p>
<table>
    <tr>
        <th>
            Title
        </th>
        <th>
            EventDate
        </th>
        <th>
            Address
        </th>
        <th>
            HostedBy
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.EventDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Address)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.HostedBy)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.DinnerID }) |
            @Html.ActionLink("Details", "Details", new { id=item.DinnerID }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.DinnerID })
        </td>
         </tr>
    }

</table>

And my javascript which is inside my index.cshtml as well is below

<script>
    $(function () {

        var hub = $.connection.DinnerHub;
        $No_of_Dinners = $("#No_of_Dinners");

        hub.client.getDinnerNumber = function (connectionId, no_of_dinners) {
            $No_of_Dinners.text = no_of_dinners;
        };

        $.connection.hub.start().done(function () {
            hub.server.sendDinnerNumber($No_of_Dinners);
        });

    });
</script>

<script src="../../Scripts/jquery-1.7.1.js"></script>
<script src="../../Scripts/jquery-ui-1.8.20.js"></script>
<script src="../../Scripts/jquery.signalR-1.0.1.js"></script>
<script src="/signalr/hubs"></script>

I'm unsure of what is going wrong. I need to update my 'No_of_Dinners' label with the number of dinners in the database whenever a new dinner is added. Also,I'm using .Net MVC4 and I do not want to change my pattern to MVVM. All examples I have seen online are MVVM.

Thanks in advance.