Question

I’m using FuelUX to create a Pillbox so that the user can add keywords by using javascript.
Javascript gets the data from the textbox and adds it to the unordered list.
Along with those keywords I want to add some fields that I wrap into a POCO and want to post to the server.
Now obviously I want to post those keywords along with my POCO or also wrap those keywords into my POCO, in this case DummyClass.

Can anyone tell me how to do this?

This is a visual representation of what I want to achieve with keywords and a title.

My Controller code :

public ActionResult Create()
{
    return View();
}

[HttpPost]
public ActionResult Create(DummyClass obj)
{
   // PROCESS OBJECT & LIST OF DATA OUT OF MY <UL>-control
}

My View code :

@using System.Web.Optimization

@model Test.DummyClass

@{
    ViewBag.Title = "Index";
}

@section content
{
    <div class="editor-label">
        @Html.LabelFor(model => model.Title)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Title)
        @Html.ValidationMessageFor(model => model.Title)
    </div>

    <div id="MyPillbox" class="pillbox">
        <ul>
            <li data-value="foo">Item One</li>
            <li class="status-success">Item Two</li>
            <li class="status-warning">Item Three</li>
            <li class="status-important">Item Four</li>
            <li class="status-info">Item Five</li>
            <li class="status-success">Item Six</li>
            <li>Item Seven</li>
        </ul>
    </div>

    <input type="text" id="newTag" value="test"/>
    <input type="button" value="Add" id="btnAddTag"/>    

    <input type="submit"/>
}

@section scripts
{
    @Styles.Render("~/Scripts/fuelUX")

    <script>
        $(function() {

            $('#btnAddTag').click(function () {
                $('#MyPillbox ul').append('<li class="status-info">' + $('#newTag').val() + '</li>');
            });

        });
    </script>

Answer 1

If you can add a hidden HTML field to every pill, you’re probably good to go:

    $(function() {
        $('#btnAddTag').click(function () {
            $('#MyPillbox ul').append('<li class="status-info">' + $('#newTag').val() + '<input type="hidden" name="Tags" value="' + $('#newTag').val() + '" /></li>');
        });
    });

In the controller, you could have this model for your action method:

public class SomeModel {
    public string Title { get; set; }
    public string[] Tags { get; set; }
}