Controller 动作方法未被调用在 ASP.NET Core 中发出发布请求

Question

I am trying to use model binding to send a file selected by the user to the controller, this action method is not being hit and I am not sure why. I put a breakpoint inside but it will not get hit.

Here is my import view:

@model FileModel

<h1 class="title-underline">Import file</h1>

<div class="form-group">
    <form asp-controller="Import" asp-action="FileImport" method="POST" enctype="multipart/form-data">
        <label for="importFile">Select a past grant to import</label>
        <input type="file" id="importFile" name="importFile" asp-for="ImportFile">
    </form>
    <button type="submit" id="btnSubmit" class="btn btn-tnl btn-block">Import</button>
</div>

Here is my model:

public class FileModel
{
    public IFormFile ImportFile { set; get; }
}

Here is my action method inside my ImportController:

    [HttpPost, ValidateAntiForgeryToken]
    public IActionResult FileImport(FileModel model)
    {
        IFormFile file = model.ImportFile;

        var fileName = Path.GetFileName(file.FileName);
        var contentType = file.ContentType;



        return View("Index");

    }

I have provided the controller, action, method, and enctype so I'm not sure what else is missing which is stopping the method from being hit. Is it something to do with the model in the parameter?

Answer 1

One problem that I see is the submit button is outside of the form. It is not doing anything when you click it. Try bringing it into the <form>...</form> block and make the input type = "submit", not "button". Or write a click handler for it that would call submit on the form.

You can check the syntax here https://www.w3schools.com/html/html_form_elements.asp

<div class="form-group">
    <form asp-controller="Import" asp-action="FileImport" method="POST" enctype="multipart/form-data">
        <label for="importFile">Select a past grant to import</label>
        <input type="file" id="importFile" name="importFile" asp-for="ImportFile">
        <input type="submit" id="btnSubmit" class="btn btn-tnl btn-block" value="Import">
    </form>
</div>

Answer 2

Your button should be inside form tag. Not outside.

<form>
   <button type="submit">Import</button>
</form>