一个<input />元素可以返回多个值吗?

时间:2015-03-10 15:45:04

标签: html asp.net asp.net-mvc

VS2013,VB,MVC5,html

这些帖子(multiple submitswhich button is pressed)很好地展示了如何使用多个&lt;输入&gt;单一形式的元素。这很适合在列表中每行的末尾包含一个类似的命令。

我希望有一个列出多行的页面并且具有相同的&lt;输入&gt;每行末尾的元素。当具体&lt;输入&gt;单击它,它必须返回特定于该行的“控制器方法”信息,并且与单击的链接相关。所以我的显示器看起来像这样:

This is line1   LINK1 | LINK2 | LINK3
This is line2   LINK1 | LINK2 | LINK3
This is line3   LINK1 | LINK2 | LINK3

用户将单击LINK1,LINK2或LINK3,根据单击的LINK在line1,line2或line3上完成某些操作。这些操作可能类似于编辑,删除,列出用户等。

控制器方法将需要特定于单击LINK的行的数据,例如记录ID,记录类型等,仅作为示例。它可能是由具有不同ID的多个表组成的线;我只想确定控制权转移需要多条信息。

我可以为每个LINK提供多条不同的数据,以及如何?我只看到并学习了如何通过检查“ID”属性是否为空来从元素向控制器返回信息,然后在每个this post的“值”属性中捕获数据上方。

有没有办法设置一个元素,以便我可以读取该特定元素的其他数据?该信息必须特定于该按钮和该行,这意味着不是整体形式属性。

也许这不可能通过设计,但我不知道我是否不会问。

2 个答案:

答案 0 :(得分:1)

为什么不添加与线条一样多的表格? 类似的东西:

<table>
    @foreach (obj item in Model)        
        {
        @using (Html.BeginForm())
            {
            <tr>
                 <td>
                 // your inputs and buttons here
                 </td>
            </tr>
            }
        } 
<table>

这样,每个表单只会POST与您的行相关的数据。

答案 1 :(得分:1)

你可以通过一些ajax比下面更进一步但是这样做可以让你在每个“行”中使用每个“链接”的多个值

@using (Html.BeginForm())
{
    @Html.Hidden("myType", "")
    @Html.Hidden("myID","")
} 

This is line1   <a class="action-link" href="#" data-type="typeA" data-id="1">Link 1</a> | <a class="action-link" href="#" data-type="typeA" data-id="2">Link 2</a> | <a class="action-link" href="#" data-type="typeA" data-id="3">Link 3</a> 
This is line2   <a class="action-link" href="#" data-type="typeB" data-id="1">Link 1</a> | <a class="action-link" href="#" data-type="typeB" data-id="2">Link 2</a> | <a class="action-link" href="#" data-type="typeB" data-id="3">Link 3</a> 
etc....

<script>
$(document).ready(function() {
    $(".action-link").on("click", function(e) {
        e.preventDefault();

        var myType = $(this).attr("data-type");
        var myID = $(this).attr("data-id");

        //you could do some validation here...

        $("#myType").val(myType);
        $("#myID").val(myID);

        $("form:first").submit();
    });
});
</script>