Passing List of Model Class From A View to A Controller in Asp.NetCore

Question

i'm currently trying to post a a list of ModelClass(FileInfo) to my controller, but the submit doesn't seem to call the controller at all,even when i debug, the process does not enter my Controller Action, below is my View Code(claimdocumentform.cshtml),

@model IList<PIBSSBus.DomainModels.FileInfo>


 <form method="POST" enctype="multipart/form-data">

          <table class="table table-striped table-hover table-bordered" id="sample_editable_1">

                                       <thead>

                                            <tr>

                                                <th> Document</th>

                                                <th> Submitted </th>

                                                <th> Date Submitted </th>

                                                <th> # </th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                            <tr>
                                                <td> <input type="text" placeholder="title" asp-for="@Model[0].Title" value="enter">  </td>
                                                <td><input type="text" placeholder="Description" asp-for="@Model[0].Description" value="enter1"> </td>
                                                <td>  </td>

                                                <td>
                                                    <input type="file" class="" asp-for="@Model[0].File"  value="Upload">
                                                </td>
                                            </tr> 
                                            <tr>
                                                <td> <input type="text" placeholder="title" asp-for="@Model[1].Title" value="enter2"> </td>
                                                <td><input type="text" placeholder="Description" asp-for="@Model[1].Description" value="enter3"> </td>
                                                <td>  </td>

                                                <td>
                                                    <input type="file" class="" asp-for="@Model[1].File" value="Upload">
                                                </td>
                                            </tr> 

                                           @* @Html.AntiForgeryToken();*@
                                        </tbody>
                                    </table>'
<button type="submit" asp-controller="Claims" asp-action="Wazobia" class="btn green button-submit">
    Submit
    <i class="fa fa-check"></i>
</button>
</form>

This is my controller

 public IActionResult claimdocumentform()
    {
        //PIBSSBus.DomainModels.FileInfo something = new PIBSSBus.DomainModels.FileInfo();
       // IList<PIBSSBus.DomainModels.FileInfo> filess =new List<PIBSSBus.DomainModels.FileInfo>();
        return View();
    }
  //  [ValidateAntiForgeryToken]
    [HttpPost]
    public IActionResult Wazobia(IList<PIBSSBus.DomainModels.FileInfo> fam)
    {

        return View();
    }

this is my model class

public class FileInfo
{

    public string Title { get; set; }


    public string Description { get; set; }


    [DataType(DataType.Upload)]
    public IFormFile File { get; set; }
}

The issue i am trying to pass the list of FileInfo class containing two rows to my controller action Wazobia but it doesn't call the action at all, pls help

I tried your same code and it works well.Is the asp-controller correct? Could you press F12 key in browser to check the network tab of your development tools, then see if the request is sent or not. — Ryan
– Ryan, Commented Feb 6, 2020 at 2:44
@XingZou 1). so you mean , the list of FileInfo was received at the controller action Wazobia in the fam List? because my own doesn't even get to the controller action "Wazobia" at all, the browser just keeps loading till it brings an error 2). Did you return a view without a model class like i did in the "claimdocumentform" controller action? — upsidedownwf
– upsidedownwf, Commented Feb 6, 2020 at 8:35
Yes...So I suggest you to check your browser F12 network tab — Ryan
– Ryan, Commented Feb 6, 2020 at 8:50
Like i.sstatic.net/JS2KG.png to see what kind of request you have sent — Ryan
– Ryan, Commented Feb 6, 2020 at 8:56

Ryan · Accepted Answer · 2020-02-07 07:33:11Z

1

I firstly tested the code in asp.net core 3.0 and it works well(You could also try this). Then I tried in asp.net core 2.2 MVC and it does not work like yours.

Then I find that it is a bug in asp.net core 2.2 and is fixed in asp.net core 3.0,refer to https://github.com/dotnet/core/issues/2523#issuecomment-481120637

A workaround is that you receive the files outside of the model

public class FileInfoVM
{
    public string Title { get; set; }
    public string Description { get; set; }
}

public class FileInfo
{
    public string Title { get; set; }
    public string Description { get; set; }
    public IFormFile File { get; set; }
}

View:

<tbody>

    <tr>
        <td> <input type="text" placeholder="title" asp-for="@Model[0].Title"  value="enter">  </td>
        <td><input type="text" placeholder="Description" asp-for="@Model[0].Description"  value="enter1"> </td>
        <td>  </td>

        <td>
            <input type="file" class=""  name="Files">
        </td>
    </tr>
    <tr>
        <td> <input type="text" placeholder="title" asp-for="@Model[1].Title"  value="enter2"> </td>
        <td><input type="text" placeholder="Description" asp-for="@Model[1].Description" value="enter3"> </td>
        <td>  </td>

        <td>
            <input type="file" class=""  name="Files">
        </td>
    </tr>


</tbody>

Action；

[ValidateAntiForgeryToken]
[HttpPost]
public IActionResult Wazobia(IList<PIBSSBus.DomainModels.FileInfoVM> fam,List<IFormFile> Files)
    {
        List<FileInfo> fileInfos = new List<FileInfo>();
        for(int i= 0; i< Files.Count; i++)
        {
            fileInfos.Add(new FileInfo()
            {
                Title = fam[i].Title,
                Description = fam[i].Description,
                File = Files[i]
            });
        }
        // save fileInfos 
        return View();
    }

edited Feb 7, 2020 at 7:33

answered Feb 7, 2020 at 3:15

Ryan

20.3k10 gold badges44 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

upsidedownwf Over a year ago

Thanks so much. okay, so after retrieving from the List<IFormFile> files , how do i match the file to particular its title and description? Because i want to convert the file to base64 string and save each file with its title and description?

Ryan Over a year ago

@Ajumobi Olamide I edit the reply.Try my updated code with a new model and action implementation.

Collectives™ on Stack Overflow

Passing List of Model Class From A View to A Controller in Asp.NetCore

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related