Aspnet.Core MVC, how to bind a list of a group of inputs?

Question

I am using aspnetcore mvc, dotnet version 6. I am trying to get inputs in a view. Code below i am trying to get buyer users and delivery users in a list. But i can't bind them in a list of model from controller.

Here is my codes:

public async Task<IActionResult> SendMainFlow(List<IFormFile> files, string[] DeliveryUsers, List<BuyerUsers> BuyersModel)
    {
        
        return BadRequest();
    }

From the view:

<form class="col-12 col-md-6" method="POST" action="/WorkManagement/SendMainFlow" enctype="multipart/form-data">
    <div class="">

        <label>
            Dosyalar:
        </label>
        <input type="file"
               class=" col-12"
               name="files"
               multiple/>
    </div>
    <hr class="row " />
    <div class="row m-1">
        <label class="col-12 text-primary">
            Satın alacak kişiler:
        </label>
        <div id="BuyerInputArea" class="col-lg-12">
            <div class="inputBuyerRow first-input">
                <div class="input-group mb-3">
                    <input type="text" name="BuyerUserName" class="form-control m-input col" placeholder="İsim" autocomplete="off">
                    <input type="text" name="BuyerUserLastName" class="form-control m-input col" placeholder="Soyisim" autocomplete="off">
                    <input type="text" name="BuyerUserMail" class="form-control m-input col" placeholder="E-Posta" autocomplete="off">
                    <div class="input-group-append">
                        <button id="removeBuyer" type="button" class="btn btn-danger">Kaldır</button>
                    </div>
                </div>
            </div>
            
            <button id="addBuyer" type="button" class="btn btn-info">Kişi Ekle</button>
        </div>
    </div>
    <hr class="row " />
    <div class="row m-1">
        <label class="col-12 text-primary">
            Dağıtılacak kişiler:
        </label>
        <div id="DeliveryInputArea" class="col-lg-12">
            <div id="DeliverySignerRow">
                <div class="input-group mb-3">
                    <input type="text" name="DeliveryUserMail" class="form-control m-input col" placeholder="Mail" autocomplete="off">
                    <div class="input-group-append">
                        <button id="removeRow" type="button" class="btn btn-danger">Kaldır</button>
                    </div>
                </div>
            </div>

            <div id="newRow"></div>
            <button id="addDealer" type="button" class="btn btn-info">Kişi Ekle</button>
        </div>
    </div>
    <div class="row m-2">
        <button class="col-12 btn btn-info" type="submit">
            İŞLEM BAŞLAT
        </button>
    </div>

</form> 

I can get for one user of any type here. I mean a buyer or a delivry user. But i want to get a list of user. And also my code tries to add dynamicaly a #inputBuyerRow in #BuyerUserArea.

Don't confuse with code. Code is simple. I want to post my inputs with form tag. In Controller side, I want to take any type of users into a list. I did not show models because i think it is not neccessary. The main problem is how can i get #inputBuyerRow inputs in BuyerModel like a list of objects? #addBuyer button add more #inputBuyerRow element in code. There will be more users.

How can i do that. Must I do i input group or anything else? I did not find any example.

My constraints are:

• I can't use Ajax Jquery or anything else like them. I must use form tag.
• I must use list in controller side.

Edit: In controller, i tried to get inputs with an string array and model to find out how view send to me. So don't confuse also with this code. I was just trying. Nothing special.

Answer 1

Generally, in an MVC application, when submits the form, in the action method, it will get the data via the html element’s name attribute. You can access form fields by its name from view to controller

In View

To transfer the string array, the elements should use the same name attribute. like this: name="DeliveryUserMail"

<div id="DeliveryInputArea" class="col-lg-12">
            <div id="DeliverySignerRow">
                <div class="input-group mb-3">
                    <input type="text" name="DeliveryUserMail" class="form-control m-input col" placeholder="Mail" autocomplete="off">
                    <input type="text" name="DeliveryUserMail" class="form-control m-input col" placeholder="Mail" autocomplete="off">
                    <div class="input-group-append">
                        <button id="removeRow" type="button" class="btn btn-danger">Kaldır</button>
                    </div>
                </div>
            </div>

To send the list of model, we should based on the list index to set the name attribute, like this: BuyersModel[0].BuyerUserName

 <div class="input-group mb-3">
                    <input type="text" name="BuyersModel[0].BuyerUserName" class="form-control m-input col" placeholder="İsim" autocomplete="off">
                    <input type="text" name="BuyersModel[0].BuyerUserLastName" class="form-control m-input col" placeholder="Soyisim" autocomplete="off">
                    <input type="text" name="BuyersModel[0].BuyerUserMail" class="form-control m-input col" placeholder="E-Posta" autocomplete="off">
                    </div >
                    <div class="input-group mb-3">
                    <input type="text" name="BuyersModel[1].BuyerUserName" class="form-control m-input col" placeholder="İsim" autocomplete="off">
                    <input type="text" name="BuyersModel[1].BuyerUserLastName" class="form-control m-input col" placeholder="Soyisim" autocomplete="off">
                    <input type="text" name="BuyersModel[1].BuyerUserMail" class="form-control m-input col" placeholder="E-Posta" autocomplete="off">
                    </div >

In Controller

[HttpPost]
    public ActionResult Create2(string[] DeliveryUserMail, List<BuyerUsers> BuyersModel)
    {
        //Access string, list here
     }

The result is like this: