Make a button to add properties in a list using the BeginCollectionItem C #

Question

Make a button to add properties in a list using the BeginCollectionItem C #

Navigation

#1 by (3 votes)

3

I have a people register and I need to create a button to add multiple phones and send to my controller, I'm using BeginCollectionItem, based on my other question Form using BeginCollectionItem gets null viewModel in foreach just missing the button part, how do I?

My controller:

    // GET: Pessoas/Create
    public ActionResult Create()
    {
        var pessoaViewModel = new PessoaViewModel
        {
            PessoaTelefoneViewModel = new List<PessoaTelefoneViewModel> 
            {
                new PessoaTelefoneViewModel()
            }
        };

        return View(pessoaViewModel);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(PessoaViewModel pessoaViewModel)
     {

            //salvando os dados         
            return RedirectToAction("Index");

    }

My view:

@model meuprojeto.ViewModels.PessoaViewModel

// resto da view...

<div id="tab-3" class="tab-pane">
     @if (Model != null && Model.PessoaTelefoneViewModel != null)
     {
         foreach (var telefone in Model.PessoaTelefoneViewModel)
         {
            Html.RenderPartial("_Telefone",telefone);

         }
      }

 </div>

My partial phone view:

@model meuprojeto.ViewModels.PessoaTelefoneViewModel

@using (Html.BeginCollectionItem("PessoaTelefoneViewModel"))
 {
     <div class="form-group">
        @Html.LabelFor(model => model.Descricao, new {@class = "col-md-12   "})

        <div class="col-md-10">
            @Html.EditorFor(model => model.Descricao, new {htmlAttributes = new {@class = "form-control "}})
            @Html.ValidationMessageFor(model => model.Descricao, "", new {@class = "text-danger"})
        </div>
    </div>

   //outros campos...
}

c# razor asp.net-mvc-5

asked by anonymous 14.08.2015 / 22:04

1 answer

Jquery beforeunload is called when I click on link Decimal format in monetary value [duplicate]

score 3 · Accepted Answer

Change the View parent to the following:

@model meuprojeto.ViewModels.PessoaViewModel

// resto da view...

    <div id="tab-3" class="tab-pane">
         @if (Model != null && Model.PessoaTelefoneViewModel != null)
         {
             foreach (var telefone in Model.PessoaTelefoneViewModel)
             {
                Html.RenderPartial("_Telefone",telefone);

             }
          }

     </div>
     <p><a id="add-another" class="small-button">Adicionar Telefone</a></p>

@section Scripts {
    <script type="text/javascript">
        $("#add-another").click(function () {
            $.get('/Pessoas/LinhaTelefone', function (template) {
                $("#tab-3").append(template);
            });
        });
    </script>
}

Controller :

// GET: Pessoas/Create
public ActionResult Create()
{
    var pessoaViewModel = new PessoaViewModel
    {
        PessoaTelefoneViewModel = new List<PessoaTelefoneViewModel> 
        {
            new PessoaTelefoneViewModel()
        }
    };

    return View(pessoaViewModel);
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(PessoaViewModel pessoaViewModel)
{

        //salvando os dados         
        return RedirectToAction("Index");
}

public ActionResult LinhaTelefone()
{
    var telefone = new PessoaTelefoneViewModel();
    return PartialView("_MinhaPartial", telefone);
}

Operation

When you click on "Add Phone", the Controller will be fired to format the View piece that will be incorporated into the code; The Controller , in turn, will return a partial for the calling Ajax;
Done this, JavaScript changes the <form> with the new piece coming from Controller .