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。但是如何将该特定记录的data-id传递给带有id="Event"的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值。

https://jsfiddle.net/Lv0bx99k/5/是一个js bin样本。

Answer 2

您可以在 -

中发布ID

将字符串查询为new {id = item }或
隐藏字段<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>

将数据标识从锚标记传递给html.beginform

2 个答案: