使用强类型制作下拉菜单

Question

I am trying to let the user choose between different names in a dropdown menu, used from a folder on the computer. After they choose something they should be able to hit a button and then be able to edit the file. I am trying to avoid just using ViewBag .

My controller (Which is returning the right data into a FormCollection (Should it be a FormCollection ?)

public ActionResult Index()
{
    FormCollection tableNames = TableNames();
    return View("Index",tableNames);
}

public FormCollection TableNames()
{
    String[] tableNamesPath = Directory.GetFiles(@"C:\Something\");
    FormCollection form = new FormCollection();

    foreach(String tableName in tableNamesPath)
    {
        form.Add(Path.GetFileName(tableName), Path.GetFileName(tableName));
    }

    return form;
}

Basicly I have nothing in my view, I have tried to use Html.DropDownList and Html.DropDownListFor (what is the difference?), but nothing seems to work. It might just be something silly I am missing, however I would be very happy for some help.

Answer 1

I would recommend you using a view model. So start by defining one:

public class TableViewModel
{
    public string SelectedItem { get; set; }
    public IEnumerable<SelectListItem> Items { get; set; }
}

and then have your controller pass this view model to the view:

public ActionResult Index()
{
    var tableNames = TableNames();
    return View("Index", tableNames);
}

public TableViewModel TableNames()
{
    String[] tableNamesPath = Directory.GetFiles(@"C:\Something\");
    TableViewModel model = new TableViewModel();
    model.Items = tableNamesPath.Select(item => new SelectListItem
    {
        Value = Path.GetFileName(item),
        Text = Path.GetFileName(item),
    }).ToList();

    return model;
}

and then make your view strongly typed to this view model and you will be able to use the strongly typed DropDownListFor helper:

@model TableViewModel 

@Html.DropDownListFor(x => x.SelectedItem, Model.Items)

Answer 2

If I understand you correctly you want to present a list of file names in a dropdownlist. Let the user pick one, click a button and then present the contents of that file to the user for editing and saving.

If that is correct you should do a few things -

1. Pass a SelectList with the names of the files to the view and populate the dropdownlist.
2. Send back the selected item and another an Edit (GET) action method responsible for returning an edit view.
3. Post back the edited data to the Edit (POST) action method and save the changes.

If this is right, I'll post some code.

Answer 3

First of all, passing a FormCollection is basicly wrong. The FormCollection is used to iterate through all post-values of a form.

I think your understanding of the basic approach of MVC is wrong. What you are trying to achive is editing a file. So your model should be a class called FileModel . The controller should look like this:

[HttpGet]
public ActionResult Index()
{
    return View("Index", new FileModel());
}

This provides a view, bound to a new instance of FileModel . In the next step you want to select the file name of the file you want to edit. This means, your FileModel will get an property, called FileName , which get's assigned in the next step.

public class FileModel
{
    [Required]
    public string FileName { get; set; }
}

We now have the model and the controller . Whats missing is the view part. This is the part that's actually responsible for user interaction. How to select a file is not the responsibility of the controller, so building up your drop-down should be done from the view. In my opinion the controller shouldn't even know that a drop-down is used to select a file name.

@model FileModel

@using (Html.BeginForm())
{
    <fieldset>
        <ol>
            <li>
                @Html.LabelFor(m => m.FileName)
                @Html.DropDownListFor(m => m.FileName)
                @Html.ValidationMessageFor(m => m.FileName)
            </li>
        </ol>
        <input type="submit" value="Edit file" />
    </fieldset>
}

DropDownListFor simply tells the view, that the editor template for FileName is not a simple text box, but a drop-down. Now the last step is to fill in the options for the drop-down. Therefore we can use an overload of DropDownListFor .

@Html.DropDownListFor(m => m.FileName, 
    new SelectList(Directory.GetFiles(@"C:\Something\"))

Now you should be able to select a file from your directory. This selection can be read in the controller from the post method:

[HttpPost]
public ActionResult Index(FileModel model)
{
    var selectedFileName = model.FileName;
}