将数据 ID 从锚标记传递到 html.beginform

Question

我有一张桌子，这张桌子的<tbody> 正在从模型的列表中填充。

列表中的每个项目都有 id，这些项目被分配给锚标记中的 data-id

<tbody>                       

    @foreach (var item in Model.eList.ToList())
    {                               
        <tr>
            <td><a href="@Url">@item.FullName</a></td>
            <td>@item.Title</td>
            <td><a data-id="@item.Id" data-open="Event">Event</a></td>
        </tr>
    }

</tbody>

我有这样的带有 Id 事件的 div

<div id="Event" class="reveal" data-reveal>
    @using (Html.BeginForm("Cancel", "Profile", new { id = data-id}, FormMethod.Post))
    {
        <label>confirm</label>
        <input type="submit" value="Save" class="button" id="Edits" />          
    }
</div>

当用户单击锚标记时，它将打开带有id="Event" 的 div。但是如何使用id="Event" 将该特定记录的数据ID 传递给div，从那里它将被发布到控制器并取消操作。

谢谢

Answer 1

您可以在该表单中保留一个隐藏的输入元素。

<div id="Event" class="reveal" data-reveal>
    @using (Html.BeginForm("Cancel", "Profile"))
    {
        <input id="dataId" name="id" value="" type="hidden" />
        <label>confirm</label>
        <input type="submit" value="Save" class="button" id="Edits" />          
    }
</div>

当用户点击锚标签时，从被点击元素的data-id属性中读取值，并将其设置为隐藏元素的值。

$(function(){
   $("[data-id]").click(function(e){
      e.preventDefault();
      var id=$(this).data("id");
      $("#dataId").val(id);

      // your existing code to open the div with form
      / /$("#Event").show();
  });

});

当用户提交表单时，我们为隐藏输入设置的id值也会被提交。

Here 是一个 js bin 示例。

Answer 2

您可以在任何一个中发布 ID -

1. 查询字符串为new {id = item }，或
2. 隐藏字段为<input type="hidden" name="id" value="@item">

例如，

<tbody>
    @foreach (var item in Model.eList.ToList())
    {
        <tr>
            <td><a href="@Url">@item.FullName</a></td>
            <td>@item.Title</td>
            <td>
                @using (Html.BeginForm("Cancel", "Profile", new {id = item }, 
                   FormMethod.Post))
                {
                    <a data-id="@item.Id" data-open="Event">Event</a>
                    <input type="hidden" name="id" value="@item">
                    <div id="Event" class="reveal" data-reveal>
                        <label>confirm</label>
                        <input type="submit" value="Save" class="button" id="Edits" />
                    </div>
                }
            </td>
        </tr>
    }
</tbody>