How can I retrieve selected item's both Text and Value from DropDownList in MVC

Question

Model:

public class SelectBillingSiteReportModel
{

    public IEnumerable<SelectListItem> Sites { get; set; }
    public string SelectedSiteName { get; set; }
    public string SelectedSiteKey { get; set; }
    [Required]
    [DataType(DataType.Date)]
    public DateTime FromDateTime { get; set; }
    [Required]
    [DataType(DataType.Date)]
    public DateTime ToDateTime { get; set; }
}

View:

@model MuseReport.Models.SelectBillingSiteReportModel
@{
    ViewBag.Title = "Select Site and Date Range";
}
    <div class="page-header">
    <h4>Select Site and Date Range for Ecg Billing Summary</h4>
</div>
<div class="row">
@using (Html.BeginForm("EcgBilling", "BillingRpt"))
{
    <div class ="form-horizontal" role="form">
        <div class="form-group">
         @Html.Label( "Muse Site", new { @class = "col-md-2 control-label"})
        <div class="col-md-10">@Html.DropDownListFor(model => model.SelectedSiteKey, Model.Sites, new { id="museSites", @class = "selectpicker"})</div>  
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.FromDateTime, "From Date", new { @class = "col-md-2 control-label"})
            <div class="col-md-10">@Html.EditorFor(model => model.FromDateTime)</div>  
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.ToDateTime, "To Date", new { @class = "col-md-2 control-label"})
            <div class="col-md-10">@Html.EditorFor(model => model.ToDateTime)</div>  
        </div>
        <div class="form-group">
            <div class="col-md-10">@Html.HiddenFor(model => model.SelectedSiteName)</div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-primary">Go</button>
            </div>
        </div>
    </div>
 }

In a perfect world, I would like to get the whole SelectListItem that the user has selected in the dropdown, rather than just the Value in model.SelectedSiteKey. At worst, I would like to get the Text associated with the Value that was selected into the hidden field (model.SelectedSiteName).

My research suggests that I could use javascript, or I could use an EditorTemplate, neither of which I am clear on how to do.

It seems like this is a lot of work just to trap one extra text string. Am I missing an obvious way to get the text value from the dropdown on the selection?

Answer 1

I just want to save the text value for display with my results without having to do another call back to the first db.

Based on your comment, you can combine both Text and Value store inside Value. Then split it when the Form is posted back.

For example -

public ActionResult EcgBilling()
{
    var model = new SelectBillingSiteReportModel
    {
        Sites = new List<SelectListItem>
        {
            new SelectListItem {Text = "One", Value = "One:1"},
            new SelectListItem {Text = "Two", Value = "Two:2"},
            new SelectListItem {Text = "Three", Value = "Three:3"},
        }
    };
    return View(model);
}

[HttpPost]
public ActionResult EcgBilling(SelectBillingSiteReportModel model)
{
    string[] array = model.SelectedSiteKey.Split(':');
    string text = array[0];
    string value = array[1];
    return View();
}