Home How to show a dropdown list in Razor
Reply: 1

How to show a dropdown list in Razor

wbail
1#
wbail Published in 2018-02-14 00:27:32Z

I'm having some troubles with Models and ViewModels.

I need list all bills and the users in the same view. (users in a dropdown list)

Also: When to use IEnumerable<T>? Because depending I change the view change the error message.

Model

public class Bill
{
    public int Id { get; set; }
    public string Title { get; set; }
    public DateTime Date { get; set; }
    public string Category { get; set; }
    public double Amount { get; set; }

    public Card Card { get; set; }
    public int CardId { get; set; }
}

ViewModel

public class UserBills
{
    public IEnumerable<ApplicationUser> User { get; set; }
    public Bill Bill { get; set; }
}

View

@*@model IEnumerable<Nucontrol.Models.Bill>*@
@model IEnumerable<Nucontrol.ViewModels.UserBills>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Bill.Card.Number)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Bill.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Bill.Date)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Bill.Category)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Bill.Amount)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Bill.Id }) |
            @Html.ActionLink("Details", "Details", new { id = item.Bill.Id }) |
            @Html.ActionLink("Split", "Split",  new { id = item.Bill.Id }, new { data_target = "#myModal", data_toggle = "modal" })
        </td>
    </tr>
}

<!-- List all users -->
@Html.DropDownListFor(m => User.Identity.Name, new SelectList(User.Identity.Name, "Id", "Name"), "", new { @class = "form-control" })

Controller

public ActionResult Index()
{
    var users = _context.Users.ToList();
    var bills = _context.Bills.ToList();

    var viewModel = new UserBills
    {
        User = users
    };

    return View(viewModel);
}
Tetsuya Yamamoto
2#
Tetsuya Yamamoto Reply to 2018-02-14 03:48:53Z

You have some issues in sample code provided:

1) The DropDownListFor uses User.Identity.Name property as model binding, which actually derived from IIdentity.Name which is getter-only property. Declare another property with setter available which holds user ID in your viewmodel.

2) Passing UserBills viewmodel into view which bound to IEnumerable<UserBills> model may cause InvalidOperationException. You need to use either passing IEnumerable<UserBills> from controller or define @model UserBills.

3) I suggest you use IEnumerable<SelectListItem> to create DropDownListFor items from IEnumerable<ApplicationUser> generated by identity data context and pass it to view (see also IdentityUser properties).

Here is initial solution based from my thought:

Model

public class UserBills
{
    public int UserId { get; set; }
    public IEnumerable<SelectListItem> Users { get; set; }
    public IEnumerable<Bill> Bills { get; set; }
}

Controller

public ActionResult Index()
{
    var users = _context.Users.ToList();
    var bills = _context.Bills.ToList();
    var viewModel = new UserBills
    {
        Users = users.Select(x => new SelectListItem() { Value = x.Id.ToString(), Text = x.UserName.ToString() }),
        Bills = bills
    }

    return View(viewModel);    
}

View

@model Nucontrol.ViewModels.UserBills

@foreach (var item in Model.Bills)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Card.Number)
        </td>
        <!-- other properties -->
    </tr>
}

@Html.DropDownListFor(m => m.UserId, Model.Users, "", new { @class = "form-control" })

NB: Since you're getting selected user ID from viewmodel binding, it is possible to create HttpContext.User instance and setting User.Identity.Name property from that ID.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.317895 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO