ASP.NET MVC: How do you set the selected item in a dropdown in the view manually?

I have a view that consists of a number of records. Each record has a corresponding form to edit its details that is hidden until the user presses Edit, at which point the form is displayed and can be posted using Ajax to save changes.

Each record has a category (foreign key to another table). The list of categories is taken from the viewmodel, which is a SelectList. So, one SelectList of Categories which feeds many forms (one for each record)

Basically, in my loop that renders out of my list of records I would like the edit form to have the correct category selected. It would appear though that Html.DropDownList does not have an overload that lets you set the selected item - this must be done when creating the SelectList - I only do this once in my ViewModel.

Am I missing a trick? My code:

<div class="form-row">
            <label for="Category">
                File Category</label>
            <%= Html.DropDownList("CategoryID", Model.Categories, new { style="font-size:11px; width:150px;" })%>
        </div>

I'd like to pass in the selected item at this point based on the value of the record

Thanks,

EDIT Included some more code so that it makes more sense开发者_StackOverflow社区: Portion of the ViewModel that supplies data to the view:

public class CustomerFilesViewModel
{
    public List<CustomerFile> Files { get; set; }
    //added for the manage files area of the site
    public SelectList Organisations { get; set; }
    public int PDFS { get; set; }
    public int DOCS { get; set; }
    public int JPGS { get; set; }
    public double Quota { get; set; }
    public double TotalFiles { get; set; }
    public int SpreadSheets { get; set; }
    public SelectList Categories { get; set; }
...............

In my view I then loop over the files and create an edit form for each File. I populate the category DropDownnn using the SelectList from the ViewModel. I would like to be able to set the selected item in the loop by using file.CategoryID.

---

In the controller rendering this view you need to set ViewData["CategoryID"] = "5"; if you want to preselect an option with value="5". Of course using ViewData is not something that I would recommend you. You should use a view model instead:

var model = new SomeViewModel();
model.CategoryID = "5";
model.Categories = ...
return View(model);

and then:

<%= Html.DropDownListFor(
    x => x.CategoryID, 
    Model.Categories, 
    new { style="font-size:11px; width:150px;" }
)%>

---

UPDATE:

Providing a full example for @Robert Koritnik who expressed some doubts about this solution in the comments section:

Model:

public class MyViewModel
{
    public string Id { get; set; }
    public IEnumerable<SelectListItem> Items { get; set; }
}

Controller:

public ActionResult Index()
{
    var model = new MyViewModel
    {
        // we want the second item preselected
        // so assign our view model property
        // which will be used to bind the dropdown list
        // to the id of the corresponding item in the options collection
        Id = "2",
        Items = new[]
        {
            new SelectListItem { Value = "1", Text = "item 1" },
            new SelectListItem { Value = "2", Text = "item 2" },
            new SelectListItem { Value = "3", Text = "item 3" },
        }
    };
    return View(model);
}

View:

@Html.DropDownListFor(
    x => x.Id,
    new SelectList(Model.Items, "Value", "Text"),
    "-- Please select an item --"
)

As expected the second item is preselected.

Remark: The Items property could be an IEnumerable of any custom type, it's just necessary to specify the corresponding Value and Text properties when building the SelectList in the view.

---

Client side

You're displaying this editor on demand, right? So you say. So you're already using Javascript to display this editor form. Why don't you select correct category at this point? You could render your Edit link or button with an additional attribute that you could use to select correct category.

<%= Html.ActionLink("edit", "action", "controller", new { categoryId = item.Id })  %>

And I seriously hope you're only using One editor and one for each record, because all records are probably the same. They just contain different data. Using one editor only would work this way:

1. user clicks edit
2. you'd read record's data and populate editor fields (also select correct category)
3. display editor

The second step may be tricky. I usually put my record's data as JSON string in record containing element (if there are many actions within this record, so they can all use the same JSON)

Example:

...
<tr data='<%= item.ToJson() %>'>
    <td><%= item.Name %></td>
    ...
    <td><%= Html.ActionLink("edit", "action", "controller", new { @class="edit-action" }) %>
</tr>
...

You can write your own extension method ToJson on object type, that will return a string representing your model object instance.

Anyway. Action link should have correct controller and action to where you'll later send edited data. But the main thing is that your sclient script would work this way:

$(".edit-action").click(function(evt){
    evt.preventDefault();
    var ctx = $(this);
    var itemData = $.parseJSON(ctx.closest("[data]").attr("data"));
    var editor = $("#YourEditorSelector");
    // populate editor's fields and then
    editor.show();
});

voila. For the sake of this editor I use jQuery.tmpl() plugin (officially part of jQuery), so it's much easier to populate the form. Actually you create it on demand when user click edit and it would be pre-populated with correct data (as well drop down will be selected as appropriate).

Server side

you should convert your categories in the view to a SelectList that has the ability to set a selected item.