C# ASP.NET MVC 3 SQL database to html.dropdownlistfor and AutoPostBack to Browse action on selecting and item

How to post back selected Category item from html.dropdownlist to the browse action method in the event controller? I am thinking of AJAX and JQuery.

EVENT CONTROLLER

EventController.cs

    //
    // GET: /Event/CategoryMenu
    [ChildActionOnly]
    public ActionResult CategoryMenu()
    {
        int id = 400;
        ViewBag.Categories = storeDB.Categories.OrderBy(g => g.Name).ToList();
        var cevent = storeDB.Events.Single(a => a.EventId == id);
        return PartialView(cevent);
        //var categories = storeDB.Categories.ToList();
        //return PartialView(categories);
    }

    //
    // GET: /Store/Browse
    public ActionResult Browse(string category)
    {
        // Retrieve Category and its Associated Events from database
        var categoryModel = storeDB.Categories.Include("Events").Single(g => g.Name == category);
        return View(categoryModel);
    }

MODEL

EventCalendarEntities.cs

public class EventCalendarEntities : DbContext
{
    public DbSet<Event> Events { get; set; }
    public DbSet<Category> Categories { get; set; }
    public DbSet<Place> Places { get; set; }
    public DbSet<Cart> Carts { get; set; }
    public DbSet<Order> Orders { get; set; }
    public DbSet<OrderDetail> OrderDetails { get; set; }
}

Category.cs

public partial class Category    
{    
    public int CategoryId { get; set; }    
    public string Name { get; set; }  
    public List<Event> Events { get; set; }          
}  

Event.cs

[Bind(Exclude = "EventId")]
public class Event
{
    [ScaffoldColumn(false)]
    public int EventId { get; set; }
    [DisplayName("Category")]
    public int CategoryId { get; set; }
    [DisplayName("Place")]
    public int PlaceId { get; set; }
    [Required(ErrorMessage = "An Event Title is required")]
    [StringLength(160)]
    public string Title { get; set; }
    [Required(ErrorMessage = "Price is required")]
    [Range(0.01, 100.00, ErrorMessage = "Price must be between 0.01 and 100.00")]
    public decimal Price { get; set; }
    [Required(ErrorMessage = "Event Date is required")]
    [DisplayName("Event Date")]
    public DateTime EventDate { get; set; }
    [Required(ErrorMessage = "Start Time is required")]
    [DisplayName("Start Time")]
    public TimeSpan StartTime { get; set; }
    [Required(ErrorMessage = "End Time is required")]
    [DisplayName("End Time")]
    public TimeSpan EndTime { get; set; }
    [Required(ErrorMessage = "Description is required")]
    [StringLength(1000)]
    public string Description { get; set; }
    [DisplayName("Event Place URL")]
    [StringLength(1024)]
    public string EventPlaceUrl { get; set; }
    public virtual Category Category { get; set; }
    public virtual Place Place { get; set; }
}

VIEW

CategoryMenu.cshtml

@model MvcEventCalendar.Models.Event    

<p id="categories">  
@Html.LabelFor(model => model.Category)        
@Html.DropDownListFor(model => model.Category, new SelectList(ViewBag.Categories,      "CategoryId", "Name", Model.CategoryId), "-- Select Categor开发者_JAVA技巧y --")  
@Html.ValidationMessageFor(model => model.Category)  
</p>  

Browse.cshtml

@model MvcEventCalendar.Models.Category
@{
   ViewBag.Title = "Browse Events";
}
<div class="genre">
    <h3><em>@Model.Name</em> Events</h3>
    <ul id="album-list">
        @foreach (var theEvent in Model.Events)
        {
            <li><a href="@Url.Action("Details", new
                {
                    id = theEvent.EventId
                })">
                <img alt="@theEvent.Title" src="@theEvent.EventPlaceUrl"/>
                <span>@theEvent.Title</span> </a>
            </li>
        }
    </ul>
</div>

I am getting Object reference not set to an instance of an object. NullReference exception was unhandled by user code in line @Model.Name Events

If you want to post the selected category when the selection changes you could indeed use AJAX.

I would just add some class and url attributes to the dropdown so that it can be unobtrusively AJAXified in a separate js file:

@Html.DropDownListFor(
    model => model.Category, 
    new SelectList(ViewBag.Categories, "CategoryId", "Name", Model.CategoryId), 
    "-- Select Category --",
    new { 
        @class = "category", 
        data_browse_url = Url.Action("browse", "event") 
    }
) 

and then in a separate js file:

$(function() {
    $('.category').change(function() {
        var value = $(this).val();
        if (value != null && value != '') {
            $.ajax({
                url: $(this).data('browse-url'),
                type: 'POST',
                data: { category: value },
                success: function(result) {
                    // TODO: do something with the returned HTML from the action
                }
            });
        }
    });
});