将值从隐藏字段传递到控制器MVC 4

Question

I basically have a table like this:

<table class="table table-bordered table-responsive table-striped" id="tabelaIzostanci">
  <thead>
    <tr>
      <td><b>Ime i prezime</b></td>
      <td><b>Predmet</b></td>
      <td><b>Profesor</b></td>
      <td><b>Razlog</b></td>
      <td><b>Opravdano</b></td>
    </tr>
  </thead>
  <tbody>
    @foreach (var item in Model)
    {
      <tr>
        <td>@item.Ucenik.Ime @item.Ucenik.Prezime</td>
        <td>@item.Cas.Predmet.Naziv</td>
        <td>@item.Cas.Nastavnik.Ime @item.Cas.Nastavnik.Prezime</td>
        @if (item.Napomena == "")
        {
          <td>Napomena nije unesena.</td>
        }
        else
        {
          <td>@item.Napomena</td>
        }
        @if (item.Opravdano == false)
        {
          <td>Ne</td>
        }
        else
        {
          <td>Da</td>
        }
        <td>
          <form>
            <button type="button" onclick="toggle_visibility('toggle');" class="btn btn-primary">Opravdaj</button>
            <input  type="hidden" id="txtID" name="test" value="@item.OdsutnostID"/>
          </form>
        </td>
     </tr>
    }
  </tbody>
</table>

The button that I have is outside of table and looks like this:

<button style="float:right; width:100px;" type="button" onclick="CallMe()" class="btn btn-primary">Save</button>

The Javascript function that I'm using is:

 function CallMe() {
       if ($('#txtID').val() !== '') {
           $.ajax({
               url: '/Controller/Action',
               type: 'POST',
               data: { txtID: $('#txtID').val(),
               success: function (data) {
                  Alert('Success');
               },
               error: function (error) {
                   alert('Error: ' + error);

               }
           });
       }

And my Action looks like this:

Public ActionResult Action(string txtID)
{
// checking whether the ID is there
}

The function is called, but the passed ID from View to Controller is always static, and somehow is always marked as "1". If I click on the 2nd record in table which has the ID = 2, the passed ID is still =1;

I can't use the model because its being used for something else.. So my question is, is there any way I can pass the ID dynamically from View to Controller without having to use the model??

Or could someone help me out why is the ID always = 1?

Thanks!

Edit:

This is the button for showing and hiding the form:

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if (e.style.display == 'block') 
           e.style.display = 'none';
       else 
           e.style.display = 'block';
   }

Answer 1

From the comments your wanting to display a textarea when you click a button in a row, and then post the value of the text area and the OdsutnostID value of the item in the row to a controller method.

Firstly, stop polluting your html with behavior and use Unobtrusive Javascript . While you can add a hidden input for OdsutnostID and use relative selectors to extract the value, its easier to just delete this and add the value as a data- attribute. The html for the last <td> element should be

<td>
    <button type="button" class="edit btn btn-primary" data-id="@item.OdsutnostID">Opravdaj</button>
</td>

You have not shown the html for the textarea to edit the value of property Napomena but it should be something like

<div id="form" style="display:none">
    <textarea id="napomena"><textarea>
    <button type="button" id="save">Save</button>
</div>

Then the scripts will be

var id = null;
var row = null;
var form = $('#form');
var textarea = $('#napomena');
var url = '@Url.Action("Action")';

$('.edit').click(function() {
  id = $(this).data('id'); // save the row id in global variable
  row = $(this).closest('tr'); // save current row in global variable
  textarea.val(row.children('td').eq(3).text()); // update the textarea with the current value
  form.show(); // display the 'form'
});

$('#save').click(function() {
    $.post(url, { id: id, text: textarea.val() }, function(data) {
        if(data) {
            row.children('td').eq(3).text(textarea.val()); // update the value in the row
            form.hide(); // hide the form
        }
    });
});

which will post back to

[HttpPost]
public ActionResult Action(string id, string text)
{
   // save the data
   return Json(true);
}

Side note: A few improvements you can make to the view

1. For the table header, use <th>Predmet</th> , not <td><b>Predmet</b></td> (the default style of th is bold, but it also means that its easier to style your header elements.

2. Add a [DisplayFormat(NullDisplayText = "Napomena nije unesena")] attribute to property Napomena and then in the view its just <td>@Html.DisplayFor(m => item.Napomena)</td> (your if block is not necessary).

3. Create a DisplayTemplate for bool which generates "Ne" or "Da" based on the value so that you can use just <td>@Html.DisplayFor(m => item.Opravdano, "nameOfYourTemplate")</td> rather than an if block.

Answer 2

you need to use a class instead and have a button near the class to trigger what you want to do

<input type="hidden" class="txtIds" value="@item.ID" />

<button type="button" class="btn btn-primary triggerClosestId">trigger Id</button>

assuming you have jQuery you can do this

$('body').on('click', '.triggerClosestId' function () {
    var closestTxtId = $(this).closest('txtIds');
    $.ajax({
        url: '/Controller/Action',
        type: 'POST',
        data: { txtID: closestTxtId .val(),
        success: function (data) {
           alert('Success');
        },
        error: function (error) {
            alert('Error: ' + error);
        }
    });
});