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

【问题标题】：Passing value from hidden field to controller MVC 4将值从隐藏字段传递到控制器 MVC 4
【发布时间】：2016-05-28 09:44:05
【问题描述】：

我基本上有这样一张桌子：

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

               }
           });
       }

我的 Action 看起来像这样：

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

【问题讨论】：

因为您的 html 无效（重复的 id 属性）并且 $('#txtID').val() 只会返回带有 id="txtID" 的第一个元素的值。
那么我该怎么做才能动态正确地传递值呢？
您说按钮在 表格之外，这毫无意义 - 您如何确定要发布的“行”值？
嗯，我确实有两个按钮...一个按钮在表格中，基本上它的作用是，一旦按下它，它会在表格下方显示表格以填充文本区域，一旦按钮按下文本区域下方，表格的内容应该更新...
您需要显示代码，包括与表格中的按钮关联的任何脚本

标签： javascript jquery asp.net-mvc parameter-passing

【解决方案1】：

您希望在单击一行中的按钮时显示文本区域，然后将文本区域的值和行中项目的OdsutnostID 值发布到控制器方法。

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

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

旁注：您可以对视图进行一些改进

对于表头，使用<th>Predmet</th>，而不是 <td><b>Predmet</b></td>（th 的默认样式是粗体，但它也意味着更容易设置标题元素的样式。
添加[DisplayFormat(NullDisplayText = "Napomena nije unesena")] 属性Napomena 然后在视图中它只是 <td>@Html.DisplayFor(m => item.Napomena)</td>（你的 if 块是没有必要）。
为bool 创建一个DisplayTemplate，生成"Ne" 或 "Da" 基于值这样你就可以使用 <td>@Html.DisplayFor(m => item.Opravdano, "nameOfYourTemplate")</td> 而不是 if 块。

【讨论】：

我已经尝试了你完全粘贴的代码，它既不显示也不隐藏文本区域，当我尝试回发时它什么也没做：/
那我猜你没做对:)。开始调试脚本以确保它们被命中并检查控制台中没有错误消息。
已创建一个 fiddle 供您展示其工作原理:)
嘿，我已将您的代码从 fiddle 复制到我的 cshtml 页面中，与您在 fiddle 上显示的完全一样！但它什么也没做？？ :(
您在浏览器控制台中收到了哪些错误消息？是否包含 jquery？

【解决方案2】：

你需要改用一个类，并在类附近有一个按钮来触发你想做的事情

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

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

假设你有 jQuery，你可以做到这一点

$('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);
        }
    });
});

【讨论】：