C# MVC webgrid on sort only renders partial view without parent

See more:

C#

MVC

Razor

I am new to MVC and learning.

I have one page only where I have a partial view containing a webgrid. If I sort it works, and I can filter using a drop down list. HOWEVER, if I filter, THEN sort, the partial view is the only thing that appears on screen without the parent Index, no CSS, etc.

This is my Index.cshtml contained in the Views/Home folder (I had to remove some brackets for the elements to show here):

@

model IEnumerable<FHApp.Models.Bulletins>

@{
    ViewData["Title"] = "Home";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Welcome</h2>

<p>Please note current bulletin items:</p>

@Html.DropDownList("lstBulletins", (SelectList)ViewBag.BulletinTypes)

<br /><br />

<div id="BulletinViewGrid" style="width: 75%">
    @Html.Partial("Bulletins", Model)
</div>

<script type="text/javascript">
    $(document).ready(function () {
        //Dropdownlist Selectedchange event
        $("#lstBulletins").change(function () {
            var sBulletinType = $(this).val();
            var url = '@Url.Action("Filter")';
            $.get(url, { sBulletinType: $(this).val() }, function (result) {
                debugger;
                $('#BulletinViewGrid').html(result);
            });
        });
        return false;
    });

</script>

------------------------------

My Bulletins.cshtml contained in the Views/Home folder:

@{
    WebGrid gridBulletins = new WebGrid(source: Model, canSort: true, defaultSort: "DatePosted");
    if (Request.QueryString[gridBulletins.SortDirectionFieldName].IsEmpty())
    {
        gridBulletins.SortDirection = SortDirection.Descending;
    }
}

@gridBulletins.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: new[] {
        gridBulletins.Column("DatePosted", @Helpers.Sorter("DatePosted", "Date Posted", gridBulletins), format: (item) => string.Format("{0:MMM d, yyyy}", item.DatePosted), style: "webgrid-column-nowrap"),
        gridBulletins.Column("Bulletin",  @Helpers.Sorter("Bulletin", "Bulletin", gridBulletins), format: (item) => {
            string Bulletin = item.Bulletin ?? "";
            return new HtmlString(Bulletin.Replace("\r\n", "<br/>"));
            })
    }
)

------------------------------

My HomeController.cs contained in the Controllers folder:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FHApp.Models;

public class HomeController : Controller
{
    private FHDataEntities db = new FHDataEntities();

    public ActionResult Index()
    {
        ViewBag.BulletinTypes = new SelectList(
            new List<SelectListItem> {
            new SelectListItem { Text="All", Value = ""}, 
            new SelectListItem { Text="Memos", Value = "M"},
            new SelectListItem { Text="Trainings", Value = "T"},
            new SelectListItem { Text="Postings", Value = "P"}
            }, "Value", "Text");

        DateTime dtCurrentDate = DateTime.Now;

        var Bulletins = db.Bulletins.ToList();

        Bulletins = Bulletins.Where(s => s.ExpiryDate >= dtCurrentDate || !s.ExpiryDate.HasValue).ToList();

        return View(Bulletins);
    }

    public ActionResult Filter(string sBulletinType)
    {
        DateTime dtCurrentDate = DateTime.Now;

        var Bulletins = db.Bulletins.ToList();

        if (!string.IsNullOrEmpty(sBulletinType))
        {
            Bulletins = Bulletins.Where(s => (s.ExpiryDate >= dtCurrentDate || !s.ExpiryDate.HasValue)
            && s.BulletinType.ToLower().Contains(sBulletinType.ToLower())).ToList();
        }

        return PartialView("Bulletins", Bulletins);
    }
}

----------------------------------------------

The Helpers.cshtml code in the App_Code folder:

@functions {
    public static string Sorter(string columnName, string columnHeader, WebGrid grid)
    {
        return string.Format("{0} {1}", columnHeader, grid.SortColumn == columnName ?
            grid.SortDirection == SortDirection.Ascending ? "▲" :
            "▼" : string.Empty);
    }
}

What I have tried:

I have googled endlessly. I do not know anyone personally who codes MVC to ask for help.