Scroll through a table (grid) Razor MVC

Question

I have a table that is filled by a Model in HTML Razor in a partialView, a field of that table I left as editable using the @Html.TextBoxFor. After the user edit this field need to update in DB, but first need to recover the changed value.

How can I go through the table and get this value on Controller?

Follow the code of the page:

<table id="tblLivros" class="table table-hover table-striped" cellspacing="0" style="width: 100%;">
    <thead>
        <tr>
            <th>Livro</th>
            <th>Valor</th>                      
        </tr>
    </thead>
    <tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Livro)
            </td>                                             
            <td>
                @Html.TextBoxFor(modelItem => item.Valor, new { style = "width: 50px;"})
            </td>
        </tr>
    }
    </tbody>
</table>
<div class="form-actions text-right pal">
    <button type="submit" class="btn btn-primary" name="Salvar" value="Salvar">
        Salvar Alterações
    </button>
    </div>

And of Controller:

[HttpPost]
public ActionResult Salvar(ViewModel Livros)
{
    //Percorrer a tabela 
}

Answer 1

I was able to recover the value of the grid using ajax. After the grid values are changed the user clicks on the "Save Changes" button, this button executes the ajax that traverses the table and calls a function in my Controller that saves changes to the Database.

Follow the code with the solution:

<table id="tblLivros" class="table table-hover table-striped" cellspacing="0" style="width: 100%;">
<thead>
    <tr>
        <th>Livro</th>
        <th>Valor</th>                      
    </tr>
</thead>
<tbody>
@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Livro)
        </td>                                             
        <td>
            @Html.TextBoxFor(modelItem => item.Valor, new { style = "width: 50px;"})
        </td>
    </tr>
}
</tbody>

Save Changes

ajax:

 <script type="text/javascript"> 
function Salvar() {               
            $("#tblLivros input[type=text]").each(function () {
                var valor = $(this).val();                        
                    $.ajax({
                        url: "/Livros/Salvar",
                        type: "POST",
                        data: JSON.stringify({ "valor": valor),
                        contentType: 'application/json; charset=utf-8',
                        success: function (result) {
                            // ...
                        },
                        error: function (request) {
                            // ...
                        }
                    });                
            });
  
      </script>

and in the Controller:

[HttpPost]
    public ActionResult Salvar(decimal valor)
    {
        //Atualiza no DB

        return View();
    }

Personal vlw!

Answer 2

you can pass this value as parameter.

[HttpPost]
public ActionResult Salvar(string Valor)
{
    //passe o tipo
}