ASP.NET Core MVC returning checked items from a form in a razor view to controller

Question

I am working with a view that shows a list of delisted books (with isActive = false). In this view I have added a column of checkbox against each book . When the form is submitted I want to set all the checked books to become active (isActive = true).

This is the view I am working with :

@model IEnumerable<MvcBooksList.Models.Book>

@{
    ViewData["Title"] = "Delisted Books";
}


@if (Model != null)
{
    @using (Html.BeginForm("DelistedForm", "Book", FormMethod.Post))
    {
        <table class="table">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.BookName)
                    </th>

                    <th>
                        @Html.DisplayNameFor(model => model.Author)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Publisher)
                    </th>
                    <th>
                        Enlist
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.BookName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Author)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Publisher)
                        </td>
                        <td>
                            @Html.CheckBoxFor(modelItem => item.IsActive)
                        </td>
                    </tr>
                }
            </tbody>
        </table>

        <input type="submit" value="Save" />    <input type = "button" value = "Cancel" onclick = "location.href='@Url.Action("Index","Home")'" />

    }

}
else
{
    <h3>No Books currently delisted</h3>
}

So my question is: how do I process this data in my controller action. As in when I click submit, will the form return IEnumerable of Books with IsActive set to true to the action??

I am trying something like this:

[HttpPost]
public ActionResult DelistedForm(IEnumerable<Book> fromDelist)
{
        foreach (var item in fromDelist)
        {
            if (item.IsActive == true) ;
            // enlist code here 
        }
        return View("~/Views/Home/Index.cshtml");
}

So you want to pass a list of books which IsActive is true when you click submit?Or you want to get a entire list of books and then get a list of books which IsActive is true in action?Which one do you want? — Yiyi You
– Yiyi You, Commented May 22, 2021 at 5:11
@YiyiYou Initially all books will have IsActive to false.I wanted to pass the books which are checked(checkboxes ticked), if thats possible.. — schwifty
– schwifty, Commented May 22, 2021 at 5:34

Yiyi You · Accepted Answer · 2021-05-22 05:42:48Z

If you only want to pass a list of books which IsActive is true.YOu can add hidden inputs to bind the data of BookName,Author,Publisher.And then change the name attribute of the inputs to correct format when checkbox is checked before form submitting.Here is a demo:

Action:

[HttpGet]
        public IActionResult DelistedForm()
        {
            return View(new List<Book> { new Book {  Author="a1", BookName="b1", IsActive=false, Publisher="p1"}, 
                new Book { Author = "a2", BookName = "b2", IsActive = false, Publisher = "p2" }, 
                new Book { Author = "a3", BookName = "b3", IsActive = false, Publisher = "p3" } });
        }
        [HttpPost]
        [Route("/Book/DelistedForm")]
        public ActionResult DelistedForm(IEnumerable<Book> fromDelist)
        {
            foreach (var item in fromDelist)
            {
                if (item.IsActive == true) ;
                // enlist code here 
            }
            return View("~/Views/Home/Index.cshtml");
        }

View:

@if (Model != null)
{
    @using (Html.BeginForm("DelistedForm", "Book", FormMethod.Post,new { @id="myForm"}))
    {
        <table class="table">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.BookName)
                    </th>

                    <th>
                        @Html.DisplayNameFor(model => model.Author)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Publisher)
                    </th>
                    <th>
                        Enlist
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.BookName)
                            @Html.HiddenFor(modelItem => item.BookName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Author)
                            @Html.HiddenFor(modelItem => item.Author)

                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Publisher)
                            @Html.HiddenFor(modelItem => item.Publisher)

                        </td>
                        <td>
                            @Html.CheckBoxFor(modelItem => item.IsActive)
                        </td>
                    </tr>
                }
            </tbody>
        </table>

        <input type="submit" value="Save" />
        <input type="button" value="Cancel" onclick="location.href='@Url.Action("Index","Home")'" />

    }

}
else
{
    <h3>No Books currently delisted</h3>
}

js:

<script>
        $("#myForm").submit(function () {
            var count = 0;
            $("tbody tr").each(function () {
                if ($(this).find("#item_IsActive").prop("checked")) {
                    $(this).find("#item_BookName").attr("name", "fromDelist[" + count + "].BookName");
                    $(this).find("#item_Author").attr("name", "fromDelist[" + count + "].Author");
                    $(this).find("#item_Publisher").attr("name", "fromDelist[" + count + "].Publisher");
                    $(this).find("#item_IsActive").attr("name", "fromDelist[" + count + "].IsActive");
                    count++;
                }
            })
        })
    </script>

result:

Collectives™ on Stack Overflow

ASP.NET Core MVC returning checked items from a form in a razor view to controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related