javascript - 将值从隐藏字段传递到 Controller MVC 4

Question

我基本上有一个这样的表:

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

我的按钮位于表格之外，如下所示:

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

我使用的 Javascript 函数是:

 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);

               }
           });
       }

我的操作如下所示:

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

函数被调用，但是从View到Controller传递的ID始终是静态的，并且不知何故总是被标记为“1”。如果我点击表中ID=2的第二条记录，传递的ID仍然=1；

我无法使用该模型，因为它被用于其他用途。所以我的问题是，有什么方法可以将 ID 动态地从 View 传递到 Controller ，而无需使用模型？

或者有人可以帮我解决为什么 ID 总是 = 1 吗？

谢谢!

编辑:

这是显示和隐藏表单的按钮:

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

来自评论，您希望在单击一行中的按钮时显示文本区域，然后发布文本区域的值和 OdsutnostID行中项目的值传递给 Controller ​​方法。

首先，停止用行为污染你的 html，并使用 Unobtrusive Javascript 。虽然您可以为 OdsutnostID 添加隐藏输入并使用相对选择器来提取值，更容易删除它并将值添加为 data-属性。最后的html <td>元素应该是

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

您尚未显示 textarea 的 html编辑属性 Napomena 的值但它应该是这样的

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

然后脚本将是

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
        }
    });
});

它将发回

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

旁注:您可以对 View 进行一些改进

1. 对于表标题，请使用 <th>Predmet</th> ， 不是 <td><b>Predmet</b></td> (th的默认样式是粗体，但它 也意味着更容易设置标题元素的样式。

2. 添加[DisplayFormat(NullDisplayText = "Napomena nije unesena")] 属性属性 Napomena然后在 View 中它只是 <td>@Html.DisplayFor(m => item.Napomena)</td> (你的 if block 是 没有必要)。

3. 创建 DisplayTemplate对于 bool生成 "Ne"或者 "Da"基于该值，以便您可以使用 <td>@Html.DisplayFor(m => item.Opravdano, "nameOfYourTemplate")</td>而不是if阻止。