.NET MVC Updating the View with a model property

Question

I used the approach described in this article to create a drop down.

The Model

public class IceCreamFlavor
{
    public int Id { get; set; }
    public string Name { get; set; }
}

The View Model

public class ViewModel
{
    private readonly List<IceCreamFlavor> _flavors;

    [Display(Name = "Favorite Flavor")]
    public int SelectedFlavorId { get; set; }

    public IEnumerable<SelectListItem> FlavorItems
    {
        get { return new SelectList(_flavors, "Id", "Name");}
    }
}

The View

@Html.LabelFor(m=>m.SelectedFlavorId)
@Html.DropDownListFor(m => m.SelectedFlavorId, Model.FlavorItems)
@Html.ValidationMessageFor(m=>m.SelectedFlavorId)
<input type="submit" value="Submit" />

This approach works fine.

Now I want to display a property of the Model on the same view. As an example assume we had the following properties.

public class IceCreamFlavor
{
    public int Id { get; set; }
    public string Name { get; set; }
    public float Price { get; set; }
}

Now underneath the Dropdown I need to display the price as

Price : 15.99

How can I achieve this?

You will need ajax to call a server method that returns the price based on the selected option and update the DOM — , Jan 30 '16 at 22:11
@Stephen Muecke : Yes, I knew that option. But I wonder whether there is a better option given that this is a very common user scenario. — Chathuranga Chandrasekara, Jan 30 '16 at 22:12
Do you just want to display the value off the model after a submit? — NikolaiDante, Jan 30 '16 at 22:13
Another alternative to to pass a collection of all `IceCreamFlavor` to the view and store in in a javascript array, then based on the selected option, look up the array and get the value (saves making an ajax call but means you load more data in the original page load) — , Jan 30 '16 at 22:14
Ideally Before Submitting (i.e In DropDown Change event). But the Submit button is an option given that there is no other easy way to solve this — Chathuranga Chandrasekara, Jan 30 '16 at 22:15
@ChathurangaChandrasekara Just to clarify above answers, in MVC there is no "MVC specific" built in option to do this. So you have to use javascript or a javascript based framework like knockout or AngulaJS to do this. — Kosala W, Jan 30 '16 at 22:32

NikolaiDante · Answer 1 · 2016-01-30T22:53:57.510

To render a property off of the model after submitting, you can just break into HTML to display it:

@if (Model.Price != 0.0F)
{
    <b>Price @Model.Price.ToString("0.00") </b>
}

To achieve this, add a collection onto the ViewModel:

public class ViewModel
{
       private readonly System.Collections.Generic.List<IceCreamFlavor> _flavors;

        public ViewModel()
        {
         // Construct Flavors
        }

        public List<IceCreamFlavor> AllFlavors
        {
            get
            {
                return _flavors;    
            }
        }

        [Display(Name = "Favorite Flavor")]
        public int SelectedFlavorId { get; set; }

        public System.Web.Mvc.SelectList FlavorItems
        {
            get { return new System.Web.Mvc.SelectList(_flavors, "Id", "Name");}
        }
    }

Then on the View:

@if (Model.AllFlavors.Any(f => f.Id == Model.SelectedFlavorId))
{
<b>Price @Model.AllFlavors.First(f => f.Id == Model.SelectedFlavorId).Price.ToString("0.00") </b>
}

You could, of course, just expose the selected Flavor as a property on the ViewModel (similar display principle applies). But, the advantage of exposing all the Flavors as a property, is you can easily move to storing this in JavaScript on page and query that, rather than relying on the submit button.

Then you can roll your own drop down onchange events using JavaScript / JQuery to read from this object stored on page. (Or use AJAX to make a call to another action to return the value as needed..)

The solution not exposing all flavors is:

Property on ViewModel:

    public IceCreamFlavor SelectedFlavor
    {
        get 
        {
            return _flavors.FirstOrDefault(f => f.Id == this.SelectedFlavorId);
        }
    }

Display on View:

   @if (Model.SelectedFlavor != null)
   {
    <b>Price @Model.SelectedFlavor.Price.ToString("0.00") </b>
   }

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

I would rather choose a another solution, since firing ajax for every selected input is useless and consuming.

Using the normal current DropDownListFor in addition with outputting the complete price list to hiding input value. value e.g: '10.0;12.0;...' which every value is than can be taken by simple JavaScript procedure with the option index as the mark for the value you should take.
Constructing a new MyDropDownListFor which will follow as the current but instead of just constructing normal <option>.. it will also add to that html tags the price or whatever additional parameter you want it to display as well. Examples: Here Here Here

No matter what solution you take, it will have to be combined with supporting simple JavaScript method which then renders the Selection and Displaying the Price which already been downloaded.

edited May 23 '17 at 10:28

Community

1
1

answered Jan 30 '16 at 22:30

Orel Eraki

11,940
3
28
36

OP is asking about a MVC specific option. He is aware of javascript based solutions. – Kosala W Jan 30 '16 at 22:34
He never said that, I've double checked it again to make sure. – Orel Eraki Jan 30 '16 at 22:41
Check his 2nd comment. – Kosala W Jan 30 '16 at 22:43

.NET MVC Updating the View with a model property

2 Answers2