使用目录中的文件在模式中创建列表框？

Question

I am trying to grab files from a directory and I am trying to let the user select a file from a list to be later processed.

This is the code that gets the files.

    [HttpGet]
    public ActionResult GetFiles()
    {
        DirectoryInfo dinfo = new DirectoryInfo(@"C:\TestDirectory");
        List<FileInfo> Files = dinfo.GetFiles("*.txt").ToList();

        return PartialView("_File", Files);
    }

And this is the partial view that that is going to be in the modal for now.

@model List<FileInfo>

@Html.ListBoxFor(model => model, new SelectList(Model).AsEnumerable())

How I am calling the partial view from main view:

<div class="row">
<div class="modal fade" id="bootstrapDialog" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true"></div>
</div>

<div class="btn btn-default browseButton">
<span class="glyphicon glyphicon-folder-open browseDialog" data-url="@Url.Action("GetFiles","Home", null)"></span> 
<span class="browseDialog" data-url="@Url.Action("GetFiles","Home", null)">Browse...</span>
</div>

@section scripts {
<script>
       $(document).ready(function () {

        $('.browseDialog').click(function () {

            var url = $(this).data('url');

            $.get(url, function (data) {

                $('#bootstrapDialog').html(data);

                $('#bootstrapDialog').modal('show');

            });

        });
   });

</script>
}

The file information is being retreived but the listbox is not created. The listbox gives an except that the value cannot be null or empty. Do I have to create something else that has to be passed into this listbox?

And how would I allow the user to select an item to pass back to the screen behind to modal to populate a textbox?

Answer 1

Both @model List<FileInfo> and new SelectList(Model).AsEnumerable() usage seem to be wrong, since you're not specifying both text and value to be populated in the list. You should create a viewmodel with setup like this:

public class ViewModel
{
    // other properties

    public string SelectedFile { get; set; }

    // options list
    public IEnumerable<SelectListItem> FilesList { get; set; }
}

Then, in your controller action, create List<SelectListItem> instance from List<FileInfo> by using Select() extension method and picking Name property as both option text and value:

[HttpGet]
public ActionResult GetFiles()
{
    DirectoryInfo dinfo = new DirectoryInfo(@"C:\TestDirectory");
    List<FileInfo> Files = dinfo.GetFiles("*.txt").ToList();

    var model = new ViewModel();

    // use file name to generate option list
    model.FilesList = Files.Select(x => new SelectListItem { Text = x.Name, Value = x.Name }).ToList();

    return PartialView("_File", model);
}

Finally, create a DropDownListFor helper with list populated from FilesList property:

@model ViewModel

@Html.DropDownListFor(model => model.SelectedFile, Model.FilesList, ...)

Afterwards, you can retrieve the selected file by using string property mentioned above, such like Server.MapPath() .

Additional note:

If you want to select multiple file names rather than single file name, then use IEnumerable<string> property together with ListBoxFor helper:

ViewModel

public IEnumerable<string> SelectedFiles { get; set; }

View

@Html.ListBoxFor(model => model.SelectedFiles, Model.FilesList, ...)