一个 元素能返回多个值吗？

13 浏览
0 Comments

一个 元素能返回多个值吗？

VS2013，VB，MVC5，html

这些帖子（multiple submits，which button is pressed）很好地展示了如何在单个表单中使用多个元素。这对于在列表的每一行末尾包含相似的命令很方便。

我想要一个页面，列出多行，并在每一行的末尾具有相同的元素。当点击特定的时，它必须返回与该行相关的“控制器方法”信息，并与被点击的链接相关。所以我的显示效果将如下所示：

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”属性是否为空来从元素中将信息传递回控制器，然后按照此帖子中所述链接的方法获取“Value”属性中的数据。

是否有一种方法可以设置元素，以便我可以从该特定元素中读取其他数据？该信息必须特定于该按钮和该行，意味着它不是整个表单属性。

也许从设计上来说是不可能的，但如果不问我就不会知道。

0

2 答案

0 Comments

一个元素不能返回多个值的原因是因为元素只能包含一个值。要解决这个问题，可以使用隐藏的元素来存储额外的值。在上述代码中，隐藏的元素被用来存储"data-type"和"data-id"属性的值。当用户点击链接时，通过JavaScript将这些值赋给隐藏的元素，然后提交表单。这样，就可以在服务器端获取到所有链接的值。

以下是解决方法的代码示例：

<form>
    <input type="hidden" id="myType" name="myType" value="">
    <input type="hidden" id="myID" name="myID" value="">
</form>
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> 
<script>
$(document).ready(function() {
    $(".action-link").on("click", function(e) {
        e.preventDefault();
        var myType = $(this).attr("data-type");
        var myID = $(this).attr("data-id");
        $("#myType").val(myType);
        $("#myID").val(myID);
        $("form:first").submit();
    });
});
</script>

通过以上代码，可以实现在HTML中使用单个元素返回多个值的功能。

0
0 Comments

可以通过在每行中添加多个表单来解决这个问题。代码如下：


    @foreach (var item in Model)
    {
        @using (Html.BeginForm())
        {
            
        }
    }


                
                    // 在这里添加你的输入框和按钮

这样，每个表单只会POST与该行相关的数据。尽管这种做法在大多数浏览器中通常可以正常工作，但在技术上，它并不是有效的HTML。

是的，这种方法是正确的，但这不是我想要指出的问题。只需删除table或将表单移到td内部，以使代码符合HTML规范。

非常好。我对HTML还不够熟悉，不知道可以实现你提出的建议，但这正是我想要的解决方案，并且我知道如何编写代码。我也明白这是Razor将被转换为HTML的过程。

我原以为一旦服务器将Razor转换为HTML，就是一个合法的HTML页面。你提到的哪一部分在某些浏览器中无法工作？某些浏览器不接受每个页面多个表单部分吗？

Razor将按照你的要求执行操作，但并不意味着它是有效的HTML。在这种情况下，在tr元素内放置表单元素是无效的。tr中唯一有效的元素是td或th。

虽然td/th是tr中唯一有效的元素，但你的说法是否意味着在td/th内部有一些限制？我在阅读了你的评论后进行了一些研究，似乎在td内部可以使用许多不同的元素，所以我想确保我正确理解了你的观点。

上述代码将表单元素放在tr内部。这是我说过无效的代码。我没有提到放在td或th内部，你是正确的。然而，你不能跨单行在多个td或th中使用一个form标签，因为这样做是无效的。

0