Modify razor page table and update database using jquery

by

I have a MVC project and I get the data from my view from a viewModel.
I try to come up with a solution for my specific case for some time, but nothing seems to work. In short, I want a table that has a selection of options and whenever I change the current selection and submit a button, a jquery function is called passing the current selection and ID of that row to the method. Inside the jquery I want that it transfers the values from that Id and the current selection to my controller.
The current selection seems to work but the Id does not. Important note: The Id is an integer and the current selection is a string.I am open for any solution. Thank you.

Razor Page

<head>
    <link rel="stylesheet" href="~/css/Development.css" asp-append-version="true" />
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>

<body>

<table id="ID_table" style="margin-top:50px;">
    <thead>
        <tr>
            <td>ID</td>
            <td>priority</td>
            <td>mnuName</td>
            <td>mnuForm</td>
            <td>Status</td>
            <td>comment</td>
        </tr>
    </thead>
    <tbody>

        @for(int i= 0; i< Model.table.Count; i++)
        {
            <tr id="@Model.table[i].ID_Development">

                <td>@Model.table[i].ID_Development</td>
                <td id="togglePriority" class="Checked" 
                onclick="toggleContent(event)">@Model.table[i].priority</td>
                <td>@Model.table[i].mnuName</td>
                <td>@Model.table[i].mnuForm</td>
                <td>
                    <select class="status" name="status" 
                    onchange="changeStyle(this.parentNode.parentNode, 
                    '@Model.table[i].ID_Development')">
                        <option value="Selection" selected>Select</option>

                        <option value="Programmed">Programmed</option>
                        <option value="Test">Test</option>
                        <option value="Ready">Ready</option>
                    </select>
                </td>
                <td class="table_Data_input"><input type="text" name="comment" 
                id="comment" class="input_field"></td>
            </tr>
        }
    </tbody>
</table>

<button id="submitButton" type="button">submit</button>


</body>

Jquery

$(document).ready(function () {
    $("#submitButton").click(function (e) {
        e.preventDefault();

        var selectedValue = $(".status").val();

        var rowID = $(".status").closest('tr').attr('id');


        $.ajax({
            type: "POST",
            url: "/Home/Update_Status",
            data: { RowId: rowId, Status: selectedValue },
            success: function (response) {
                console.log("success");
            },
            error: function (error) {
                console.error("error");
            }
        });
    });
});

Controller

[HttpPost]
public IActionResult Update_Status(string RowId,string status)
{
    //etc. .....
    return Json(new { success =true });
}

  • In your debugging, did you narrow down the exact cause? is selectedValue set? is rowID set? are you passing rowID? (no, you’re passing rowId which is a different variable) does your action get called, what are the parameter values in the action? Does it work if you call it “manually” (ie hardcoding values for RowId/Status rather than using variables)?

    – 

  • On a side-note: DOM Ids and data Ids are not the same thing – use should be using <tr data-id='... then get it using var rowId = $(".status").closest('tr').data('id');

    – 

  • Also note that DOM ids must be unique in the document – so if you have a loop that generates the same ID you’ll likely have a problem with “that” ID. <td id="togglePriority" – just remove the ID from that td and use class (if needed at all)

    – 

  • Looks like a simple typo var rowID -> var rowId

    – 

Leave a Comment