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?

Answer 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.