Home > Software design >  Aspnet.Core MVC, how to bind a list of a group of inputs?
Aspnet.Core MVC, how to bind a list of a group of inputs?

Time:01-07

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  method="POST" action="/WorkManagement/SendMainFlow" enctype="multipart/form-data">
    <div >

        <label>
            Dosyalar:
        </label>
        <input type="file"
               
               name="files"
               multiple/>
    </div>
    <hr  />
    <div >
        <label >
            Satın alacak kişiler:
        </label>
        <div id="BuyerInputArea" >
            <div >
                <div >
                    <input type="text" name="BuyerUserName"  placeholder="İsim" autocomplete="off">
                    <input type="text" name="BuyerUserLastName"  placeholder="Soyisim" autocomplete="off">
                    <input type="text" name="BuyerUserMail"  placeholder="E-Posta" autocomplete="off">
                    <div >
                        <button id="removeBuyer" type="button" >Kaldır</button>
                    </div>
                </div>
            </div>
            
            <button id="addBuyer" type="button" >Kişi Ekle</button>
        </div>
    </div>
    <hr  />
    <div >
        <label >
            Dağıtılacak kişiler:
        </label>
        <div id="DeliveryInputArea" >
            <div id="DeliverySignerRow">
                <div >
                    <input type="text" name="DeliveryUserMail"  placeholder="Mail" autocomplete="off">
                    <div >
                        <button id="removeRow" type="button" >Kaldır</button>
                    </div>
                </div>
            </div>

            <div id="newRow"></div>
            <button id="addDealer" type="button" >Kişi Ekle</button>
        </div>
    </div>
    <div >
        <button  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.

CodePudding user response:

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" >
            <div id="DeliverySignerRow">
                <div >
                    <input type="text" name="DeliveryUserMail"  placeholder="Mail" autocomplete="off">
                    <input type="text" name="DeliveryUserMail"  placeholder="Mail" autocomplete="off">
                    <div >
                        <button id="removeRow" type="button" >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 >
                    <input type="text" name="BuyersModel[0].BuyerUserName"  placeholder="İsim" autocomplete="off">
                    <input type="text" name="BuyersModel[0].BuyerUserLastName"  placeholder="Soyisim" autocomplete="off">
                    <input type="text" name="BuyersModel[0].BuyerUserMail"  placeholder="E-Posta" autocomplete="off">
                    </div >
                    <div >
                    <input type="text" name="BuyersModel[1].BuyerUserName"  placeholder="İsim" autocomplete="off">
                    <input type="text" name="BuyersModel[1].BuyerUserLastName"  placeholder="Soyisim" autocomplete="off">
                    <input type="text" name="BuyersModel[1].BuyerUserMail"  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:

enter image description here

  •  Tags:  
  • Related