Post class containing list from view to controller

Question

I have the following class:

public class ClinicaViewModel
{
    public List<String> EmailProfissionais { get; set; }
    public string Email { get; set; }
    public string Fantasia { get; set; }
}

With the respective Controller:

public ActionResult Create()
{
   return View(new ClinicaViewModel());
}

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create(ClinicaViewModel clinica)
{
   if (ModelState.IsValid)
   {
      \\ Some code here
    }

 return View(clinica);
}

The View produces in Javascript dynamically generated fields to previously unknown quantity of values with this code:

 @using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

  \\ Some code here...

 <div class="form-group">
    <div class="col-md-offset-2 col-md-10">
      <input type="submit" value="Gravar" class="btn btn-primary" />
     </div>
  </div>

   <p></p>
   <div id="listaProfissionais"></div>
      <p><br /></p>
      <div class="form-group">
         <div class="col-md-offset-2 col-md-10">
            <button class="btn btn-success js-addProfissional">Adicionar profissional</button>
         </div>
       </div>
  </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

<script src="~/Scripts/cookies.js"></script>
    <script>
        $(document).ready(function () {
            Cookies.set('6172D459-29BB-4874-B418-1D9AACEC095F', 0);
            $(".js-addProfissional").click(function (event) {
                let iteration = parseInt(Cookies.get('6172D459-29BB-4874-B418-1D9AACEC095F'));
                iteration++;
                Cookies.set('6172D459-29BB-4874-B418-1D9AACEC095F', iteration);
                event.preventDefault();
                addDom();
            });
        });

        function addDom() {
            let node = "<p></p>";
            node += "<div class='input-group mb-3'>";
            node += "<input class='form-control' placeholder='E-mail do usuário' name='Email";
            node += Cookies.get('6172D459-29BB-4874-B418-1D9AACEC095F');
            node += "' type='text' Id='Email";
            node += Cookies.get('6172D459-29BB-4874-B418-1D9AACEC095F');
            node += "'/> ";
            node += "</div>";
            $("#listaProfissionais").append(node);
        };
    </script>
}

Where cookies.js is a library to handle cookies...

This will produce, in an example where 3 fields have been generated the following HTML:

<div id="listaProfissionais">
<p></p>
<div class="input-group mb-3">
    <input class="form-control valid" placeholder="E-mail do usuário" name="Email1" type="text" id="Email1" aria-invalid="false">
</div>
<p></p>
<div class="input-group mb-3">
    <input class="form-control valid" placeholder="E-mail do usuário" name="Email2" type="text" id="Email2" aria-invalid="false">
</div>
<p></p>
<div class="input-group mb-3">
    <input class="form-control valid" placeholder="E-mail do usuário" name="Email3" type="text" id="Email3" aria-invalid="false">
</div>

So that, in the example above I should receive the 3 values of the 3 input fields, and in a generic case, I should receive as many as are generated.

The problem is that, despite the class has the definition public List<String> EmailProfissionais { get; set; } I receive a null object.

How to receive the results of all input fields that are produced?

You are generating `name` attributes that have no relationship to your model (your model does not include properties `Email1`, `Email` and `Email3`). They would need to have `name="EmailProfissionais"` in order to bind to `public List EmailProfissionais { get; set; }` — , Oct 07 '18 at 20:32
Refer this post - https://stackoverflow.com/questions/16321736/how-can-i-post-a-list-of-items-in-mvc — Dhana, Oct 08 '18 at 02:07

Post class containing list from view to controller

0 Answers0