Pass HTML table data from view as list to Controller action method in ASP.NET Core

Question

Getting null values in controller action method. Could not loop table data rows.

Model: class:

 public class Generation
    {
        public int Generation1Count { get; set; }
        public int Generation1TotalSum { get; set; }
        public int Generation2Count { get; set; }
        public int Generation2TotalSum { get; set; }
        public int Generation3Count { get; set; }
        public int Generation3TotalSum { get; set; }
        public List<Memberdetails> Memberdetails { get; set; }
    }

public class Memberdetails
{
    public string MemberType { get; set; }
    public string MemberCategory { get; set; }
    public int TotalSum { get; set; }
    public int MemberCount { get; set; }
}

Controller:

public ActionResult Index()
        {
            Generation model = new Generation();
            model.Memberdetails = populateMemberDetails();
            return View(model);
        }

   private static List<Memberdetails> populateMemberDetails()
    {
        List<Memberdetails> list = new List<Memberdetails>();
        list.Add(new Memberdetails { MemberCategory = "A", MemberType = "Generation1", MemberCount = 12, TotalSum = 2636 });
        list.Add(new Memberdetails { MemberCategory = "B", MemberType = "Generation2", MemberCount = 12, TotalSum = 4747 });
        list.Add(new Memberdetails { MemberCategory = "A", MemberType = "Generation2", MemberCount = 12, TotalSum = 47474 });
        return list;
    }

    [HttpPost]
    public JsonResult Save(Generation generation)
    {
        return null;
    }

View: Table row looping is not working .is that correct way?

@model CLPConfigurations.Models.Generation

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
           $("body").on("click", "#btnSave", function () {
             var generation={};
                var membersDetails = new Array();
                $("#tblDetails TBODY TR").each(function(){   
                    var memberDetails = {};
                     memberDetails.MemberType = $(this).find("TD").eq(0).html();
                    memberDetails.MemberCategory = $(this).find("TD").eq(1).html();
                     memberDetails.TotalSum = $(this).find("TD").eq(2).html();
               memberDetails.MemberCount = $(this).find("TD").eq(3).html();
               
                    membersDetails.push(memberDetails);
                });

           generation.Memberdetails = membersDetails;

                //Send the JSON array to Controller using AJAX.
               
                
                $.ajax({
                    type: "POST",
                    url: "/Home/Save",
                    data: JSON.stringify(generation),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert("success");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="frmDetails">
        <table id="tblDetails" class="table simpleHomeSummary-grid">
            <thead>
                <tr>
                    <th>MemberType</th>
                    <th>MemberCategory</th>
                    <th>TotalSum</th>
                    <th>MemberCount</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Memberdetails)
                {
                    <tr>
                        <td>@item.MemberType</td>
                        <td>@item.MemberCategory</td>
                        <td>@item.TotalSum</td>
                        <td>@item.MemberCount</td>
                    </tr>
                }
            </tbody>
        </table>
        <br />
        <input id="btnSave" type="button" value="Save" />
    </form>
</body>
</html>

Expecting view values to controller action method \ but getting null values. Don't know how to pass values from view to controller action method.

I believe this answer has solution for you.

sairfan
– sairfan

2022-11-14 17:33:27 +00:00
Commented Nov 14, 2022 at 17:33 — sairfan
– sairfan, Commented Nov 14, 2022 at 17:33

SNBS · Accepted Answer · 2022-11-14 17:10:21Z

1

That's because your form isn't submitted. Firstly, replace this line in your view:

<input id="btnSave" type="button" value="Save" />

with this:

<input id="btnSave" type="submit" value="Save" />

Secondly, specify the action your form should call on submit:

<form id="frmDetails" action="/YourController/Save" method="post">

And add some code into action Save (beyond returning null). At least this, to see whether your form was submitted:

return Json(new { Result = "Form successfully submitted." }, JsonRequestBehavior.AllowGet); // Because returned type is JsonResult

edited Nov 14, 2022 at 17:10

answered Nov 11, 2022 at 18:53

SNBS

8497 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Learner Over a year ago

Tried this submit but this also not working :(

SNBS Over a year ago

Updated my answer, try again

Heretic Monkey Over a year ago

The OP is using ajax to submit the form; this changes it to use postback, which makes a big difference in the user experience.

Learner Over a year ago

tried given solution still i didnt get values in controller action method.

SNBS Over a year ago

Didn't get values? Does it at least show the JSON result: {"Result":"Form successfully submitted."}?

Collectives™ on Stack Overflow

Pass HTML table data from view as list to Controller action method in ASP.NET Core

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related