Home / Questions / 74717
Accepted
ByGroxD
Asked: 2020-06-01 07:12:45 +0800 CST 2020-06-01 07:12:45 +0800 CST

Insert Multiple Records in MVC5

  • 772

Hello fellow StackOverFlow, I need to make a INSERTMultiple of records to my table through a dynamic form that I have created with JS.

My model is the following:

namespace MultiInsert.Models
{
    public class Ejemplo
    {
        [Key]
        public int id { get; set; }
        public string objetivos { get; set; }
        public string nombres { get; set; }
        public decimal puntaje { get; set; }
    }
}

My view is the following:

@model MultiInsert.Models.Ejemplo

@{
    ViewBag.Title = "MultiCreate";
}

<h2>MultiCreate</h2>


@using (Html.BeginForm()) 
{

    <div class="col-xs-12">
        <div class="col-md-12">
            <div id="field">
                <div id="field0">
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="action_id">Objetivos</label>
                        <div class="col-md-5">
                            <input id="objetivos" name="objetivos" type="text" placeholder="" class="form-control input-md">

                        </div>
                    </div>
                    <br><br>
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="action_id">Nombres</label>
                        <div class="col-md-5">
                            <input id="nombres" name="nombres" type="text" placeholder="" class="form-control input-md">

                        </div>
                    </div>
                    <br><br>
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-md-4 control-label" for="action_name">Puntaje</label>
                        <div class="col-md-5">
                            <input id="puntaje" name="puntaje" type="text" placeholder="" class="form-control input-md">
                        </div>
                    </div>
                    <br><br>
                  </div>
            </div>
            <!-- Button -->
            <div class="form-group">
                <div class="col-md-4">
                    <button id="add-more" name="add-more" class="btn btn-primary">Add More</button>
                </div>
            </div>
            <br><br>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" class="btn btn-default" />
                </div>
            </div>
        </div>
    </div>



}

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

My Script with which I insert inputsdynamically:

<script>
    $(document).ready(function () {
        var next = 0;
        $("#add-more").click(function (e) {
            e.preventDefault();
            var addto = "#field" + next;
            var addRemove = "#field" + (next);
            next = next + 1;
            var newIn = ' <div id="field' + next + '" name="field' + next + '"><!-- Text input--><div class="form-group"><label class="col-md-4 control-label" for="action_id">Objetivos</label><div class="col-md-5"><input id="objetivos" name="objetivos" type="text" placeholder="" class="form-control input-md"></div></div><br><br><!-- Text input--><div class="form-group"><label class="col-md-4 control-label" for="action_id">Nombres</label><div class="col-md-5"><input id="nombres" name="nombres" type="text" placeholder="" class="form-control input-md"></div></div><br><br><!-- Text input--><div class="form-group"><label class="col-md-4 control-label" for="action_name">Puntaje</label><div class="col-md-5"><input id="puntaje" name="puntaje" type="text" placeholder="" class="form-control input-md"></div></div><br><br></div></div></div>';
            var newInput = $(newIn);
            var removeBtn = '<button id="remove' + (next - 1) + '" class="btn btn-danger remove-me" >Remove</button></div></div><div id="field">';
            var removeButton = $(removeBtn);
            $(addto).after(newInput);
            $(addRemove).after(removeButton);
            $("#field" + next).attr('data-source', $(addto).attr('data-source'));
            $("#count").val(next);

            $('.remove-me').click(function (e) {
                e.preventDefault();
                var fieldNum = this.id.charAt(this.id.length - 1);
                var fieldID = "#field" + fieldNum;
                $(this).remove();
                $(fieldID).remove();
            });
        });

    });
</script>

And finally part of my controller:

// View MultiCreate
        public ActionResult MultiCreate()
        {
            return View();
        }

        // View MultiCreate
        [HttpPost]
        public ActionResult MultiCreate([Bind(Include = "id,objetivos,nombres,puntaje")] Ejemplo ejemplo)
        {
            if (ModelState.IsValid)
            {
                db.Ejemploes.Add(ejemplo);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(ejemplo);
        }

I know that it is with a cycle Foreachthat I have to carry INSERTout, however I do not have the knowledge to carry out the process in MVC5.

I remain attentive to any news or doubt.

asp.net-mvc-5

1 Answers

  1. Best Answer

    the solution is the next

    In the view you have to set a loop:

    @model List<MultiInsert.Models.Ejemplo>
@{
    ViewBag.Title = "Insert Bulk Data";
}

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

    <br /><br />
    <div><a class="btn btn-info" href="#" id="addNew">+</a></div>
    <br />
        <table id="objetivos" class="table table-bordered table-hover">
            <tr>
                <th>Nombres</th>
                <th>Objetivos</th>
                <th>Puntaje</th>
                <th></th>
            </tr>
            @if (Model != null && Model.Count > 0)
            {
                int j = 0;
                foreach (var i in Model)
                {
                    <tr style="border:1px solid black">
                        <td>@Html.TextBoxFor(a => a[j].nombres, new { @class = "form-control"})</td>
                        <td>@Html.TextBoxFor(a => a[j].objetivos, new { @class = "form-control" })</td>
                        <td>@Html.TextBoxFor(a => a[j].puntaje, new { @class = "form-control" })</td>
                        <td>
                            @if (j > 0)
                            {
                                <a href="#" class="removecell">Remove</a>
                            }
                        </td>
                    </tr>
                    j++;
                }
            }
        </table>
        <input class="btn btn-success" type="submit" value="Save Bulk Data" />
}


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

    In the controller Createfirst a list is set, and in the one that receives the form the cycle that is needed is this

    // View MultiCreate
        public ActionResult Create()
        {
            List<Ejemplo> ci = new List<Ejemplo> { new Ejemplo { puntaje = 0, nombres = "", objetivos = "" } };
            return View(ci);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(List<Ejemplo> ci)
        {
            if (ModelState.IsValid)
            {
                using (MultiInsertContext dc = new MultiInsertContext())
                {
                    foreach (var i in ci)
                    {
                        dc.Ejemploes.Add(i);
                    }
                    dc.SaveChanges();
                    ModelState.Clear();
                    return RedirectToAction("Index");
                }
            }
            return RedirectToAction("Index");
        }

    As for the Scriptis doing what is needed

    • 4