将C＃ASP.NET MVC 3 SQL数据库转换为html.dropdownlistfor和AutoPostBack to Browse操作

Question

如何将选定类别类别从html.dropdownlist发回到事件控制器中的浏览动作方法？ 我在考虑AJAX和JQuery。

事件控制器

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);
    }

模型

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; }
}

视图

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 Category --")  
@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>

我收到的对象引用未设置为对象的实例。 @ Model.Name事件行中的用户代码未处理NullReference异常

Answer 1

如果要在选择更改时发布所选类别，则可以使用AJAX。

我只是将一些类和url属性添加到下拉列表中，以便可以在单独的js文件中毫不夸张地对其进行AJAX化：

@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") 
    }
) 

然后在一个单独的js文件中：

$(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
                }
            });
        }
    });
});