Error with modal using Partialview Asp Net Core 2.2

Question

I’m getting the following error in my project:

Invalidoperationexception: The model item passed into the Viewdatadictionary is of type 'System.Collections.Generic.List`1[Helpdesk.Models.Suppliers]', but this Viewdatadictionary instance requires a model item of type 'Helpdesk.Models.'.

In this project I have the following situation, I have an Index where I load a list returned from the bank, and in it I have a button where I call a modal that is inside a Partialview in order to register new data, the problem for what I could understand and that I am having Index conflict that I use @model Ienumerable with Partial where I use @model Helpdesk.Models.. I would like help how to correct this error, or whether another more efficient method to have the same solution for this project.

Controller:

  public IActionResult Index()
    {
        return View( _context.Fornecedores.ToList());
    } 

    public IActionResult NovoFornecedor()
    {
        return PartialView("_NovoFornecedor");
    }

    [HttpPost]
    public async Task<IActionResult> NovoFornecedor (Fornecedores fornecedores)
    {
        if(ModelState.IsValid)
        {
            _context.Add(fornecedores);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return PartialView("_NovoFornecedor");
    }

Index:

@model IEnumerable<HelpDesk.Models.Fornecedores>

    @{
        ViewData["Title"] = "Cadastro de Fornecedores";
    }

    <div class="container">
        <h4>Fornecedores Cadastrados</h4>
        <p>
            <button class="btn btn-success" data-toggle="modal" data-target="#NovoFornecedor">Novo Fornecedor</button>
        </p>
        <div class="table table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col">Empresa</th>
                        <th scope="col">CNPJ</th>
                        <th scope="col">Responsavel</th>
                        <th scope="col">Celular</th>
                        <th scope="col">Fixo</th>
                        <th scope="col">Email</th>
                        <th scope="col">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>@Html.DisplayFor(modelItem => item.Empresa)</td>
                            <td>@Html.DisplayFor(modelItem => item.CNPJ)</td>
                            <td>@Html.DisplayFor(modelItem => item.Responsavel)</td>
                            <td>@Html.DisplayFor(modelItem => item.Celular)</td>
                            <td>@Html.DisplayFor(modelItem => item.Fixo)</td>
                            <td>@Html.DisplayFor(modelItem => item.Email)</td>
                            <td>
                                  <a asp-action="EditarFornecedor" asp-route-id="@item.FornecedorId" class="btn btn-outline-info btn-sm">Atualizar</a> |
                            <a onclick="ModalExcluir (@item.FornecedorId)" class="btn btn-outline-danger btn-sm">Excluir</a>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>

    @Html.Partial("_NovoFornecedor")

_Partialview

@model HelpDesk.Models.Fornecedores

<div class="modal fade" id="NovoFornecedor">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Cadastrar Novo Fornecedor</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label>Empresa:</label>
            <input type="text" class="form-control" asp-for="Empresa">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">CNPJ:</label>
            <textarea class="form-control" asp-for="CNPJ"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary">Salvar</button>
      </div>
    </div>
  </div>
</div>

Answer 1

Your PartialView is using the model of View by default:

@model IEnumerable<HelpDesk.Models.Fornecedores>

This is because you did not inform the second parameter of the method Html.Partial and in the Partial is waiting for a @model. As a new vendor, you can only instantiate a new object:

@Html.Partial("_NovoFornecedor", new HelpDesk.Models.Fornecedores())