如何在ASP.NET MVC 5中通过视图创建/编辑模型

Question

I got one question related to my model you can see in the picture below.

As you can see I got 3 entities and 1:n and m:n relations between them.

I want that I can edit these models through a web interface. Therefore I scaffold (add controller with entity framework) these three models and got edit/delete/create/ views and of course one controller for each entity.

But there is no input/fields created for the relations automatically by VS. So I thought to implement them manually. Before I want to do that is there an simpler way to implement/scaffold this model, so I can even edit the relations(Checkboxes or (multi)select would be the best)? Thanks in advance!

Answer 1

对于很多人，您可以在Partner View中使用DropDownList作为Tip的提示（请参阅Scott Allen的解决方案 。许多人可以由ViewModels和JavaScript框架（如Knockout）处理。

Answer 2

No, the scaffolds are intentionally unopinionated here, as there's many different ways you could handle this. Perhaps you just want to choose from a select list? Maybe you want checkboxes, instead? Or, maybe you want to actually add/edit related items inline? And with that last one, would you like to post all at once or use AJAX?

So, instead of picking for you, the framework rightly leaves the decision up to you, since only you know how your application should be built. Regardless, relying on the scaffolds is going to bite you more often than not. They only work in the most basic and ideal scenarios, and when have application requirements ever been either basic or ideal? I don't even bother with them at this point, preferring to just create my controllers/views manually. It ends up being quicker than dealing with the scaffold and undoing all the things that aren't applicable.

So, since you're looking for select boxes (either single-select or multi-select), first, I'd recommend creating view models for your entities. For example, with Tip :

public class TipViewModel
{
    [Required]
    public string Name { get; set; }

    [Required]
    [DataType(DataType.MultilineText)]
    public string Description { get; set; }

    [Required]
    public int? SelectedPartnerId { get; set; }
    public IEnumerable<SelectListItem> PartnerChoices { get; set;}

    [Required]
    public int? SelectedBookId { get; set; }
    public IEnumerable<SelectListItem> BookChoices { get; set; }
}

Here, I've added nullable int (using a nullable allows them to be initially unselected, instead of just set to the first option) properties to track the id of the selected Book / Partner because it doesn't appear you have explicit properties on your entities for the foreign keys. That's fine, but it doesn't make it slightly more complicated to save the relationship, as you'll see in a bit. If you did have explicit foreign key properties, then you should mirror those in your view models instead.

Now in the GET version of your action, you'll need to do something like the following:

public ActionResult Create()
{
    var model = new TipViewModel();

    PopulateChoices(model);

    return View(model);
}

...

protected void PopulateChoices(TipViewModel model)
{
    model.PartnerChoices = db.Partners.Select(m => new SelectListItem
    {
        Value = m.Id.ToString(),
        Text = m.Name
    });
    model.BookChoices = db.Books.Select(m => new SelectListItem
    {
        Value = m.Id.ToString(),
        Text = string.Format("{0} by {1}", m.Name, m.Author)
    });
}

I've abstracted out the code for populating these select lists because the code will be used multiple times throughout your controller. Also, I used string.Format on the Text value for the books just to show that you can do whatever you want with the text for the select list item. Also, the code above would be for a create action, obviously. Doing an edit would be similar but slightly different:

public ActionResult Edit(int id)
{
    var tip = db.Tips.Find(id);
    if (tip == null)
    {
        return new HttpNotFoundResult();
    }

    var model = new TipViewModel
    {
        Name = tip.Name,
        Description = tip.Description,
        SelectedPartnerId = tip.Partner != null ? tip.Partner.Id : new int?(),
        SelectedBookId = tip.Book != null ? tip.Book.Id : new int?()
    }

    PopulateChoices(model);

    return View(model);
}

The main difference is that you're obviously dealing with an existing instance so you need to pull it from the database. Then, you just need to map the data from your entity onto your view model. Since, again, you don't have explicit foreign key properties, you have to do a little extra leg work to get the currently chosen Partner / Book values, otherwise you could just copy the values for the foreign key properties over directly. Also, here, I'm just doing a manual mapping, but there's third-party libraries to make this task easier (see: AutoMapper ).

With that, you can implement your views. Everything will work the same as it did when you were using the entity directly, you just need to make a couple of modifications. First, you'll need to change your view's model declaration:

@model Namespace.To.TipViewModel

Then, add the select lists for your two related properties:

@Html.DropDownListFor(m => m.SelectedPartnerId, Model.PartnerChoices)

...

@Html.DropDownListFor(m => m.SelectedBookId, Model.BookChoices)

The fun happens in the POST version of your actions. Most of the code will stay the same from the GET version, but now you'll have an if (ModelState.IsValid) block:

[HttpPost]
public ActionResult Create(TipViewModel model)
{
    if (ModelState.IsValid)
    {
        // map the data from model to your entity
        var tip = new Tip
        {
            Name = model.Name,
            Description = model.Description,
            Partner = db.Partners.Find(model.SelectedPartnerId),
            Book = db.Books.Find(model.SelectedBookId)
        }

        db.Tips.Add(tip);
        db.SaveChanges();

        return RedirectToAction("Index");
    }

    // Form has errors, repopulate choices and redisplay form

    PopulateChoices(model);

    return View(model);
}

The edit version, again, is similar, except you're going to map onto you existing instance, for example:

tip.Name = model.Name;
tip.Description = model.Description;
tip.Partner = db.Partners.Find(model.SelectedPartnerId);
tip.Book = db.Books.Find(model.SelectedBookId);

That's all there is to it for reference properties. You don't actually have any thing that's M2M or even one-to-many on your entities in your question. Everything is one-to-one, but if you did have a collection property, you'd need to handle it slightly differently. You still need a property on your view model to hold the selected values and the available choices:

public List<int> SelectedFooIds { get; set; }
public IEnumerable<SelectListItem> FooChoices { get; set; }

Populating the choices would also be the same. The options are the options; it doesn't matter if you're select just one or many as far as that is concerned.

Mapping onto your entity in your create action would be different though, as you'd need to select all of the chosen items from the database and set your collection property on your entity to that:

var tip = new Tip
{
    ...
    Foos = db.Foos.Where(m => model.SelectedFooIds.Contains(m.Id)),
}

And, you'd need to make changes to both the GET and POST versions of your edit action. For the GET, you need to condense your collection property down to a list of ids:

var model = new TipViewModel
{
    ...
    SelectedFooIds = tip.Foos.Select(m => m.Id).ToList(),
}

And in the edit version, you set new selected items:

tip.Foos = db.Foos.Where(m => model.SelectedFooIds.Contains(m.Id);

Finally, in your views, you'd use ListBoxFor instead of DropDownListFor to enable the multiselect:

@Html.ListBoxFor(m => m.SelectedFooIds, Model.FooChoices)