CODEWITHSUNDEEP
javascripthtmlasp.netrazor
A. Savva
A. Savva

Reputation: 632

ASP.NET MVC 5 - Send contents of div to Controller method

I have this HTML code with a div whose contents I want to pass to the controller. The div basically contains some span items of the label-primary class (link). I want to be able to get the names of the labels in this div in the controller. My idea was, as soon as the submit button is clicked, get the list of items that are inside the label-container div and pass their names to the controller as the List<string> OwnerTerminals value. How do I do that?

HTML + JS code:

@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="[email protected]"><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>

Model:

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

Upvotes: 0

Views: 2754

Answers (1)

Alan Tsai
Alan Tsai

Reputation: 2525

Modify answer regard to comment for doing it using post

It is possible to do it without using ajax, mainly by using a hidden input with proper name to achieve it.

so add a hidden input when creating the label to achieve it

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();
};

if the model is object, there may need some object name prefix to the input name - i.e ModelName.OwnerTerminals

more info about model binding, please reference other article such as this one: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/

Original Answer

There is two part

  1. get all the names you can get name via javascript like (I have made a jsfiddle which assume how your view would look like here https://jsfiddle.net/alantsai/p076235t/):

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

  2. post it to controller
    you probably need to modify the post object according to your view model, but if simply the OwnerTerminals, then should be something like:

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

Upvotes: 1

Related Questions