MVC 2: How can I create links from Dropdown list options available when list datasource is a database

Question

So I have multiple lists such as this one:

<%: Html.DropDownList("CPUList", new  SelectList((IEnumerable)ViewData["CPUList"], "Price", "Name"))%>

The datasource is a LinQ to SQL *.dbml model

Controller assigns data to the ViewData as such, filtering results on string value "platform":

     if (platform == "i7)
                {

                    var processor = from prod in _ctx.Products
                                   where prod.Attributes == 1366"
                                   select prod;

                    var ram = from prod in _ctx.Products
                                   where prod.Attributes == "TripleChannel"
                                   select prod;

                    ViewData["CPUList"] = processor;
                    ViewData["RAMList"] = ram;
}

Basically I am attempting a PC customization page and I ideally would like people to be able to click on their selected option like a link to open a new small window with a detailed description of the component selected. I already have a view that takes a productID as a parameter and basically displays a long description (prod.LongDesc) for anyone particualr product. Except I don't know how I go about creating the dropdown list of links foreach available option/name and create the correct url that will open in a new window. It's my first week of programming basically, so if you believe I am going a totally wrong way about implementing this function do let me know, seems to work great so far though populating the list as required according to parameters.

Answer 1

In your DropDownList I would rather use the product id as the value, this way you could just do an ajax request on that product id to get more information about it.

So you could have an Action that looks somewhat like the following:

    public ActionResult GetRam(Guid productId)
    {
        var cpu = Products.First(x => x.Id == productId);

        switch (cpu.Attribute)
        {
            case "1366":
                ViewData["Ram"] = Products.Where(x => x.Attribute == "TrippleChannel").ToArray();
                break;
            case "1155":
                ViewData["Ram"] = Products.Where(x => x.Attribute == "DualChannel").ToArray();
                break;
        }

        return PartialView("_RamList");
    }

However you might want to consider having a relationship between what parts are compatible with each other. But for now, consider the above action to make it easy.

If you have the product id as value in your dropdown you could simply do something like this using jQuery:

<script>
    $(document).ready(function () {
        $("#CPUList").change(function () {
            $.ajax({
                url: '/Product/GetRam/' + $(this).val(),
                dataType: 'html',
                success: function (data) {
                    $('#RAMListPlaceHolder').html(data);
            });
        });

    });
</script>

Where RAMListPlaceHolder is a div where you will put the html from the partial view _RamList