CODEWITHSUNDEEP
htmljqueryasp.netasp.net-mvchtml-table
Learner
Learner

Reputation: 1

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

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.

Upvotes: 0

Views: 1069

Answers (1)

SNBS
SNBS

Reputation: 849

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

Upvotes: 1

Related Questions