ASP.NET MVC 5 - 将 div 的内容发送到 Controller 方法

Question

我有这个带有 div 的 HTML 代码，我想将其内容传递给控制器​​。 div 基本上包含label-primary 类（link）的一些跨度项。我希望能够在控制器的这个 div 中获取标签的名称。我的想法是，一旦单击提交按钮，就获取 label-container div 内的项目列表，并将它们的名称作为 List<string> OwnerTerminals 值传递给控制器​​。我该怎么做？

HTML + JS 代码：

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    ...
    <div id="register-terminal-panel" class="panel panel-default" style="max-width: 450px;">
        <div class="panel-heading" style="color:#003F8B">
            Add terminals to client
        </div>
        <div class="panel-body">
            <div id="label-container"></div>
            <div class="input-group input-group pull-right">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </span>
                <input id="register-terminals-search" type="text" class="form-control" placeholder="Search terminals" aria-describedby="search-addon" onkeyup="searchTerminals()">
            </div>
        </div>
        <ul id="register-terminal-list-container" class="list-group">
            @foreach (Point p in terminals)
            {
                <li id="list-item-@p.Name"><a href="javascript:void(0)" class="list-group-item" onclick="createLabel('@p.Name')">@p.Name</a></li>
            }
        </ul>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

<script>
    function closeLabel(item) {
        item.parentElement.remove();
        var listItem = '\n<li id="list-item-' + item.parentElement.id + '"><a href="javascript:void(0)" class="list-group-item" onclick="createLabel(\'' +
            item.parentElement.id + '\')">' + item.parentElement.id + '</a>';
        $('#register-terminal-list-container').append(listItem);
        sortUnorderedList("register-terminal-list-container");
    };

    function createLabel(name) {
        var label =
            '<span id="' + name + '" class="label label-primary terminal-label"><span class="glyphicon glyphicon-remove" onclick="closeLabel(this)" id="terminal-label-close-btn"></span> ' + name + '</span>\n'
        $('#label-container').append(label);
        $('#list-item-' + name).remove();
    };
</script>

型号：

public class RegisterViewModel
{
    ...
    public List<string> OwnerTerminals { get; set; }
}

Answer 1

使用帖子修改关于评论的回答

不使用ajax也是可以的，主要是通过一个隐藏的输入正确的名字来实现。

所以在创建标签的时候添加一个隐藏输入来实现它

function createLabel(name) {
    var label =
        '<span id="' + name + '" class="label label-primary terminal-label"><span class="glyphicon glyphicon-remove" onclick="closeLabel(this)" id="terminal-label-close-btn"></span> ' + name + '</span>\n'
    label = label + '<input type="hidden" value="' + name + '" name="OwnerTerminals" />';
    $('#label-container').append(label);
    $('#list-item-' + name).remove();
};

如果模型是对象，则输入名称可能需要一些对象名称前缀 - 即ModelName.OwnerTerminals

有关模型绑定的更多信息，请参考其他文章，例如： http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/

原答案

有两个部分

1. 得到所有的名字 您可以通过 javascript 获取名称，例如（我制作了一个 jsfiddle，它假设您的视图在这里看起来像 https://jsfiddle.net/alantsai/p076235t/）：

   $(function() {
       $("#btnGetName").click(function() {
           var nameList = [];
           $("#label-container > span").each(function() {
           nameList.push($(this).text());
           });
           alert(nameList);
       })
   })
   

2. 将其发布到控制器
   您可能需要根据您的视图模型修改 post 对象，但如果只是 OwnerTerminals，那么应该是这样的：

   $.post("postUrl", {OwnerTerminals : nameList});