How to Insert multiple data rows ASP.Net MVC?

  Kiến thức lập trình

I am a newbie to .Net and want help with multiple rows insert action into the same table.
So far I have written a code which can perform CREATE action and help with 1 row insertion successfully. However, I am facing difficulties on the code part for inserting multiple rows into the Table. I tried to check answers online but did not find easy to implement logic.

Following is my Code so far:

ModelClass

`public class DailyTask
    {   
        [Key]
        public int Id { get; set; }

        public string Project { get; set; }

        public string Task { get; set; }

        public string Status { get; set; }
    }`

Controller PostAction

`[HttpPost]
public ActionResult AddTask(IEnumerable<DailyTask> model)
{
if(!ModelState.IsValid)
{
return View(model);
}
using (Db db = new Db())
            {
                foreach(var asa in model)
                {
                    DailyTask module = new DailyTask();
                    module.Project = asa.Project;
                    module.Task = asa.Task;
                    module.Status = asa.Status;

                    db.DailyTasks.Add(module);
                }db.SaveChanges();
            }
                TempData["SM"] = "Task added successfullly";
                return RedirectToAction("AddTask");
}`

View

`@model Lixto.Models.VM.DailyTask

@{
    ViewBag.Title = "AddTask";
}


@if(TempData["SM"] != null)
{
    <div class="alert alert-success">
        @TempData["SM"]
    </div>
}

<div id="lines">
    
    <form action="/Home/AddTask" method="post">
        @Html.AntiForgeryToken()

        <div class="row">

            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                <label class="control-label col-sm-1">Project</label>
                <div class="col-md-1">
                    @Html.EditorFor(model => model.Project, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Project, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-1">Task</label>
                <div class="col-md-4">
                    @Html.EditorFor(model => model.Task, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Task, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-1">Status</label>
                <div class="col-md-2">
                    @Html.EditorFor(model => model.Status, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Status, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-1">
                    <input type="submit" value="ADD" class="btn btn-default ck buttonTxt btn-success" />
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-1">
                    <input type="submit" value="DELETE" class="btn btn-default remove btn-danger" />
                </div>
            </div>

        </div>
    </form>
</div>

<input type="button" value="ADD" class="save"/>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script>
        $(document).ready(function () {
            

            $(".save").click(function () {

                $("form").last().clone({ withDataAndEvents: true }).find("input").val("").end().show().insertAfter("#lines");
                $(".buttonTxt").val("ADD");
                $(".btn-danger").val("DELETE");
            });

            $(".remove").click(function () {

                $(this).closest("form").remove();
            });

            
        })
    </script>

    
}`

This is what I have tried with no success:

  1. View has a form which has 3 fields

  2. I have added a button which can add same field set multiple times in order to add more rows

  3. Wrote an Action method which inserts the data into the Table for only 1 row

What am I expecting?

User should be able to click Add button and add more than 1 tasks and all entries should get inserted into the table.

Currently it only submit 1 row.

LEAVE A COMMENT