如何仅捕获用户更改值的多行中的那些列？

Question

Are there are any approaches in ASP.NET or JavaScript where i run update stored procedure on only those rows in which specific columns have been updated by user?

For example: if there are multiple rows

row1= [column1 column2 column3 column4 coumn 5]
row2= [column1 column2 column3 column4 coumn 5]
row3= [column1 column2 column3 column4 coumn 5]
row4= [column1 column2 column3 column4 coumn 5]

If the column 2 and Column 3 are updated in row 1 and column 1 and column 4 are update in row 3 i want to capture only these rows and columns and pass it as JSON string to List which I am then converting to DataTable?

What approach should I take ?

What I have tried:

Googled some samples but an expert opinion is always best

Answer 1

There is a very convoluted way to achieve this. If anyone knows of a cleaner way, please post it.

You need to do the following:

Add to your Model: - a Boolean property (column) that will be hidden and used as a change Identifier

Set up your table in your view like this (my example is in Razor):

@{
int j = 1;
for (var i = 0; i < Model.itemList.Count; i++)
{
     <tr>
          <td>
               @Html.TextBoxFor(model => model.itemList[i].columnOne, new { onkeypress = "markAsChanged(" + @j + ", " + @i + ")" })
          </td>
          <td>
               @Html.TextBoxFor(model => model.itemList[i].columnTwo, new { onkeypress = "markAsChanged(" + @j + ", " + @i + ")" })
          </td>
          <td>
               @Html.TextBoxFor(model => model.itemList[i].columnThree, new { onkeypress = "markAsChanged(" + @j + ", " + @i + ")" })
          </td>
          <td>
               @Html.TextBoxFor(model => model.itemList[i].columnFour, new { onkeypress = "markAsChanged(" + @j + ", " + @i + ")" })
          </td>
          <td>
               @Html.TextBoxFor(model => model.itemList[i].columnFive, new { onkeypress = "markAsChanged(" + @j + ", " + @i + ")" })
          </td>
          <td>
               @Html.HiddenFor(model => model.itemList[i].IsChanged)
          </td>
     </tr>
     j++;
}

Your JavaScript function will edit the hidden element as soon as someone changes a field for a row:

function rerunOldChange(rowIndex, changeIndex) {
    var table = document.getElementById("changeTable");
    var j = rowIndex;
    var i = changeIndex;

    var currentRow = table.rows[j];
    var cellSix = currentRow.cells[5];

    var thisRowIsChanged = "<input type = 'hidden' id = 'itemList_" + i + "__IsChanged' name = 'itemList[" + i + "].IsChanged' value = 'true' />"

    cellSix.innerHTML = thisRowIsChanged;
}

What it is doing is changing the value of the boolean as soon as someone presses a key on that field. So when you pass the list to your controller in order to post, you can do so only for rows that have a boolean value of True.

Answer 2

I'll tack on some updates and simplification to @C Murphy's response, but setting a hidden field in your viewmodel is the best option. I would recommend using a checkbox, as it is boolean by default and easy to manipulate with its checked attribute.

The keypress event is deprecated , and doesn't fire on all keys - in particular, the Backspace and Delete keys do not trigger it, so someone could delete everything in a field and no update would occur. Instead, use the keydown event; this has sort of the opposite effect, as every key triggers it, including Shift and other keys that may not actually change the field. You can validate changes in other code if you want to.

I removed the code checking for changes per column, because I assume your update logic asks for all the object's data, or with EF probably expects an entire object to be passed.

Razor:

// A text field, change PropertyName and add where needed in markup
@Html.TextBoxFor(model => model.itemList[i].PropertyName, new { onkeydown = "markAsChanged(" + i + ")" })

// Hidden checkbox for the IsChanged property
@Html.CheckBoxFor(model => model.itemList[i].PropertyName, new { hidden = "" })

The Javascript:

// Modern browsers
var markAsChanged = function(i) {
    document.GetElementById('itemList_' + i + '__IsChanged').checked = true;
};

// Use for legacy support with jQuery
var markAsChanged = function(i) {
    $('#itemList_' + i + '__IsChanged').checked = true;
};

If you wanted to clean up your view and leave out the event handlers, you could add them with some more Javascript.