title: C# ASP.NET MVC 3 SQL database to html.dropdownlistfor and AutoPostBack to Browse action on selecting and item
body: <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/25JCY.png" alt="enter image description here"></p>
  
  <p>EVENT CONTROLLER</p>
  
  <p>EventController.cs</p>
  
  <pre><code>    //
      // GET: /Event/CategoryMenu
      [ChildActionOnly]
      public ActionResult CategoryMenu()
      {
          int id = 400;
          ViewBag.Categories = storeDB.Categories.OrderBy(g =&gt; g.Name).ToList();
          var cevent = storeDB.Events.Single(a =&gt; 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 =&gt; g.Name == category);
          return View(categoryModel);
      }
  </code></pre>
  
  <p>MODEL</p>
  
  <p>EventCalendarEntities.cs</p>
  
  <pre><code>public class EventCalendarEntities : DbContext
  {
      public DbSet&lt;Event&gt; Events { get; set; }
      public DbSet&lt;Category&gt; Categories { get; set; }
      public DbSet&lt;Place&gt; Places { get; set; }
      public DbSet&lt;Cart&gt; Carts { get; set; }
      public DbSet&lt;Order&gt; Orders { get; set; }
      public DbSet&lt;OrderDetail&gt; OrderDetails { get; set; }
  }
  </code></pre>
  
  <p>Category.cs  </p>
  
  <pre><code>public partial class Category    
  {    
      public int CategoryId { get; set; }    
      public string Name { get; set; }  
      public List&lt;Event&gt; Events { get; set; }          
  }  
  </code></pre>
  
  <p>Event.cs</p>
  
  <pre><code>[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; }
  }
  </code></pre>
  
  <p>VIEW</p>
  
  <p>CategoryMenu.cshtml</p>
  
  <pre><code>@model MvcEventCalendar.Models.Event    
  
  &lt;p id="categories"&gt;  
  @Html.LabelFor(model =&gt; model.Category)        
  @Html.DropDownListFor(model =&gt; model.Category, new SelectList(ViewBag.Categories,      "CategoryId", "Name", Model.CategoryId), "-- Select Category --")  
  @Html.ValidationMessageFor(model =&gt; model.Category)  
  &lt;/p&gt;  
  </code></pre>
  
  <p>Browse.cshtml</p>
  
  <pre><code>@model MvcEventCalendar.Models.Category
  @{
     ViewBag.Title = "Browse Events";
  }
  &lt;div class="genre"&gt;
      &lt;h3&gt;&lt;em&gt;@Model.Name&lt;/em&gt; Events&lt;/h3&gt;
      &lt;ul id="album-list"&gt;
          @foreach (var theEvent in Model.Events)
          {
              &lt;li&gt;&lt;a href="@Url.Action("Details", new
                  {
                      id = theEvent.EventId
                  })"&gt;
                  &lt;img alt="@theEvent.Title" src="@theEvent.EventPlaceUrl"/&gt;
                  &lt;span&gt;@theEvent.Title&lt;/span&gt; &lt;/a&gt;
              &lt;/li&gt;
          }
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am getting Object reference not set to an instance of an object. NullReference exception was unhandled by user code in line <em>@Model.Name</em> Events</p>