0

I am new to MVC 4 so this is probably a newbie mistake. I am having trouble binding my dropdown list to my model. I am trying to display a selection that the user is making from a dropdownlist using DropDownListFor. See the following code:

CostsPerSqFoot Model:

public class CostsPerSqFoot
{
    public List<Prices> RatesList { get; set; }

    public CostsPerSqFoot()
    {
        RatesList = new List<Prices>()
        {
            new Prices() {Id = 1, Rate = 1.00m},
            new Prices() {Id = 2, Rate = 2.00m},
            new Prices() {Id = 3, Rate = 5.00m},
            new Prices() {Id = 4, Rate = 10.00m}
        };
    }

}

Prices Model:

public class Prices
{
    public int? Id { get; set; }
    public decimal? Rate { get; set; }
}

CostDetails Model (where I create a list of SelectListItem):

public class CostDetails
{
    public int? Id { get; set; }
    public Measurements Measurements { get; set; }

    public List<SelectListItem> Costs { get; set; }

    public CostDetails()
    {

    }

    public CostDetails(List<Prices> rates)
    {
        Costs = new List<SelectListItem>();

        foreach (var rate in rates)
        {
            Costs.Add(new SelectListItem()
            {
                Text =string.Format("{0:c}", rate.Rate), Value = rate.Id.ToString()
            });
        }


    }

}

Here are my controller ActionResult methods:

public ActionResult Index()
    {
        var rates = new CostsPerSqFoot();
        var model = new CostDetails(rates.RatesList);

        return View(model);
    }

    [HttpPost]
    public ActionResult Calculations(CostDetails model)
    {
        if (ModelState.IsValid)
            return View(model);

        else
            return View("Index", model);
    }

On my Index view, I have the following form that contains the dropdownlist and the view is using the CostDetails model:

@model FlooringCalculatorMVC.Models.CostDetails

// a few lines of HTML

@using (Html.BeginForm("Calculations", "Home", FormMethod.Post))
    {
        @Html.ValidationSummary()

        @Html.LabelFor(m => m.Measurements.Length)
        @Html.TextBoxFor(m =>m.Measurements.Length, new {placeholder = "Enter length"})
        <br/>
        <br/>

        @Html.LabelFor(m => m.Measurements.Width)
        @Html.TextBoxFor(m =>m.Measurements.Width, new {placeholder = "Enter width"})
        <br/>
        <br/>

        @Html.LabelFor(m => m.Costs)
        @Html.DropDownListFor(m =>m.Id, Model.Costs, "- Select a rate -")

        <button type="submit">Calculate</button>

    }

Finally, I would just like to display the selected dropdown option that the user made when clicking "submit". On the "Calculations" view, I only have the following:

@model FlooringCalculatorMVC.Models.CostDetails

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Calculations</title>
</head>
<body>
<div>
    @Model.Costs
</div>
</body>
</html>

What could I be doing wrong? Thanks in advance.

2
  • Model.Costs is the list. In the DropDownListFor you are trying the selected item to the id field. If you want to see the selected item you need to look at that field Oct 24, 2013 at 1:03
  • Thanks for the answer. But how can I do that? If I try @Html.DisplayFor(m=>m.Id) on the "Calculations" view, it displays the Id value, not the selected value from the drop-down. Oct 24, 2013 at 1:20

1 Answer 1

0

If Id is the record id I would create a selected field in your model. then you could do something like

@Html.DropDownListFor(x => x.Selected, Model.Costs).  

The selected field will be populated with the value of the selected record. If you are wanting the selected text then you can query Model.Costs or use jquery.

2
  • Hi again, I am still having the same problem despite the changes. I believe that my model is not being correctly bound to my dropdown list. If possible, I'd prefer not to use jQuery. Any other suggestions or perhaps a short demo? Oct 24, 2013 at 2:06
  • so you don't see anything in your dropdown? Oct 24, 2013 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.