Get values from an Html table and map to a C# List using jQuery

Question

I have an MVC project where I'm rendering the data using a table in my partial view as:

<table id="tblUserSettings" class="table table-bordered CmtTable">
    <thead>
        <tr>
            <th>User Name</th>
            <th>Country</th>
            <th>System (s)</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @if (Model == null)
        {
            <tr></tr>
        }
        else
        {
            foreach (var item in Model)
            {
                <tr>
                    <td><input type="hidden" id="usrId" value="@item.UserId" />
                    @item.UserName</td>

                    <td> <input type="hidden" id="usrCountryKey" value="@item.UserCountryKey" style="display:none"/>
                    @item.UserCountryName</td>

                    <td> <input type="hidden" id="usrSourceSystemKey" value="@item.UserSourceSystemKey" />
                    @item.UserSourceSystemDescription</td>

                    <td><a onclick='DeleteUserSettingsRow();'><i class='fa fa-times'></i> Delete</a><a onclick='EditUserSettingsPopup();'><i class='fa fa-pencil'></i> Edit</a></td>
                </tr>
            }
        }
    </tbody>
</table>

I'm going to save the values from this table into the database and need to call the AddUserSettingsaction method in controller as:

[HttpPost, Route("AddUserSettings")]
public ActionResult AddUserSettings(IEnumerable<UserSettings> request)
{
    AddUserSettingsRequest apiRequest = null;
    return View();
}

The model of UserSettings is as follows:

public class UserSettings
    {
        public UserSettings();

        public string UserId { get; set; }
        public string UserName { get; set; }
        public string UserCountryKey { get; set; }
        public string UserCountryName { get; set; }
        public string UserSourceSystemKey { get; set; }
        public string UserSourceSystemDescription { get; set; }
    }

I need to save the data from the table (including the hidden fields) into the database using jQuery, so I have created a function and calling it as:

    <button type="button" id="btnAdd" onclick="SaveUserSettings();"><i class="fa fa-save"></i> Save</button>

        function SaveUserSettings()
        {
            debugger;
            var userSettings = [];

            $("table#tblUserSettings tr").each(function (i, v) {
                userSettings[i] = [];
                $(this).children('td').each(function (ii, vv)
                {
                    userSettings[i][ii] = $(this).text();

                });
            })

            alert(userSettings);

$.ajax({
             url: '@Url.Action("AddUserSettings", "Admin")',
             type: "POST",
             contentType: "application/json;",
             data: JSON.stringify(userSettings),
            success : function (result)
            {
                //alert(result);
            },
            error: function (result)
            {
                //alert(result);
            }
        });
    }

With the above SaveUserSettings() function, I can get the values which are not hidden, but I need to create an array which contains the hidden properties as well and can be sent with the ajax request to the controller as the parameter. How can I get the hidden fields and create an array mapped to the IEnumerable request of my controller?

Not clear what your wanting to do. You do not have any editable form controls so why are yo posting back the same values that your controller just sent to the view. And duplicate id attributes are invalid html (use class names and relative selectors). You also do not need style="display:none". — user3559349
– user3559349, Commented Aug 1, 2017 at 10:28
The partial view is having a list of UserSettings, so initially it was empty and then user adds some settings into the form and the same settings I want to store into the database. The issue is when I'm fetching the data from the table, the values of hidden fields are getting retrieved. Any suggestion on the same? — Sahil Sharma
– Sahil Sharma, Commented Aug 1, 2017 at 10:30
you don't need to parse it using jquery, just create elements name like this [0].UserName Modelbinder will bind it for you. — Krishna
– Krishna, Commented Aug 1, 2017 at 10:32

Andy Groat · Accepted Answer · 2017-08-01 10:57:31Z

1

Provided the javascript is in the partial view, you can set your userSettings directly against the model, for example:

var userSettings = @Html.Raw(JsonConvert.SerializeObject(Model));

This will then serialize your object into JSON and it will be passed to the browser, where you can then use it to pass it back to the server in jQuery without having to go through each row in the table.

answered Aug 1, 2017 at 10:57

Andy Groat

1131 silver badge6 bronze badges

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

2 Comments

pso Over a year ago

Or you can also do this: var userSettings = @Html.Raw(Json.Encode(Model));

user3559349 Over a year ago

That is just passing back the original model that was sent to the view which is utterly pointless

Collectives™ on Stack Overflow

Get values from an Html table and map to a C# List using jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related