获取所需的html元素的属性值，并在Asp.Net MVC中绑定之前设置为隐藏字段

Question

让我们说这种隐藏的领域已经发生了变化：

<input data-val="true" 
       data-val-number="The field MemberRelationId must be a number." 
       id="MemberRelationId" 
       name="MemberRelationId" 
       type="hidden" 
       value="3">

看起来它的值为3。这意味着，用户已经为此字段设置了值。 但是，他（她）也可以改变这个值，我必须将新值发送给action方法。

此外，重点是，用户可以通过点击其中一个div来选择新值：

<div class="collection-container">

    <div class="collection-element selected" data-value="3">
        <span class="icon-check"></span>
        <span>Son</span>
    </div>

    <div class="collection-element " data-value="6">
        <span class="icon-check"></span>
        <span>Father</span>

    </div>

    <div class="collection-element " data-value="8">
        <span class="icon-check"></span>
        <span>Brother</span>
    </div>

</div>

因为，在点击其中一个JQuery

之后，我现在使用div手动更改隐藏字段值

...
$('#MemberRelationId').val($(this).attr("data-value"));
...

但是，这种方式并不能让我满意。在MVC中有没有更好的方法？

我想要实现的目标？

我想自动获取所选div并将data-value属性值绑定到MemberRelationId。

感谢。

更新

以下是截图中的部分：

Answer 1

最明智的解决方案是使用带样式的单选按钮。实际上，您的代码充当单选按钮;唯一的区别是icon-check，但您可以使用CSS模拟相同的界面。