How can I add another parameter to a drop down box?

Question

At the moment I have a drop down box which only displays a Suppliers Name with the value of the ID hidden behind it. I would also like to display the Suppliers account number next to the Supplier Name.

HTML:

@Html.DropDownListFor(
    m => m.SupplierID,
    new SelectList(Model.Suppliers, "SupplierID", "SupplierName"),
    new { @id = "SuppNameDD", @class = "GRDropDown" }
)

Controller:

public ActionResult Index(string client) {
    int clientID = clientRepo.GetClientIDByName(client);
    DashboardViewModel model = new DashboardViewModel();
    model.ClientID = clientID;
    model.ClientName = client;
    model.FinancialsAtAGlance = reportRepo.GetFinancialsAtAGlance(model.ClientID);

    model.SupplierID = -1;
    model.AccountNo = null;
    model.Suppliers = supplierRepo.GetAllSuppliersByClient(clientID);

    model.ReviewID = -1;
    model.AccountNo = null;
    model.Reviews = reviewRepo.GetAllReviewsByClientID(clientID);
    return View(model);
}

ViewModel:

public class DashboardViewModel {
    public int ClientID { get; set; }
    public string ClientName { get; set; }
    public IQueryable<FinancialsAtAGlanceModel> FinancialsAtAGlance { get; set; }
    public Dictionary<string, Dictionary<string, decimal?>> Budgets { get; set; }


    public class SelectReport {
        public int ReportID { get; set; }
        public string ReportType { get; set; }

        public static IEnumerable<SelectReport> Reports = new List<SelectReport> {
            new SelectReport {
                ReportID = 1,
                ReportType = "Claims By Supplier"
            },
            new SelectReport {
                ReportID = 2,
                ReportType = "Department breakdown"
            },
            new SelectReport {
                ReportID = 3,
                ReportType = "Reason Code breakdown"
            },
            new SelectReport {
                ReportID = 4,
                ReportType = "Monthly Debiting report"
            }
        };
    }
    public List<SelectReport> allReports { get; set; }

    public int SupplierID { get; set; }
    public IEnumerable<Supplier> Suppliers { get; set; }

    public int ReviewID { get; set; }
    public string AccountNo { get; set; }
    public IEnumerable<Review> Reviews { get; set; }
}

How can add this is as the other value is a selected value and this is not what I want. It should be another datatext field.

Answer 1

If this display name is something that would be used multiple times, I would suggest adding a property to your Supplier class. Something like DisplayName:

public class Supplier
{
    //...
    public string SupplierName { get; set; }
    public string AccountNumber { get; set; }
    //...

    public string DisplayName
    {
        get { return String.Format("{0} ({1})", SupplierName, AccountNumber); }
    }
}

Then, you just need to change your drop down list to use DisplayName instead of SupplierName as the text field:

@Html.DropDownListFor(m => m.SupplierID, new SelectList(Model.Suppliers, "SupplierID", "DisplayName"), new { @id = "SuppNameDD", @class = "GRDropDown" })

EDIT: There is another way to do this that can be done all in the view:

@Html.DropDownListFor(m => m.SupplierID, Model.Suppliers.Select(item => new SelectListItem
{
    Value = item.SupplierID.ToString(),
    Text = String.Format("{0} ({1})", item.SupplierName, item.AccountNumber.ToString()),
    Selected = item.SupplierID == Model.SupplierID
}))

Answer 2

Probably you can achieve your desired output by 1.create a custom helper with with extension method which will return MvcHtmlString which will create your custom HTML for dropdown and call that method in your view.

Like Below

public static class CustomDropdown
{
    public static string Dropdown(Priority priority)
    {       
        StringBuilder sb=new StringBuilder ();
        sb+="<Select id='drop'>";
        for(int i=0;i<priority.name.length;i++)
        {
            sb+="<option id='dropop' value='"+priority.value[i]+"'title='"+priority.title[i]+"'>"+priority.name[i]+"</option>";
        }
        sb+="</select>";
        return Convert.ToString(sb);                   
    }
}

2.Bind the options of the given select with help of jquery like

var i=0;
$('.drpclass option').each(function(){
    $(this).attr('title',Model.priority.title[i])
    i++;
});