Post back data from an unordered list to controller action along in or along with a POCO in C#

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. enter image description here

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>

score 4 · Accepted Answer · answered Dec 31 '12 at 08:44

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

smart and hacky. just the way I like it – Jared Beach Jul 14 '16 at 15:44 — Jared Beach, Jul 14 '16 at 15:44

score 0 · Answer 2 · edited May 23 '17 at 12:32

you could attach a event on the same button that creates the pill that also using jquery ajax calls a specific action on your controller passing the json representation of the object which you can convert to your POCO on the server side and work with it there. link below might give some insight into doing the posting.

also, if you dont want to post on each pill as maybe the record is not created yet, you could use the event handler mentioned above to add (or remove) json objects to a hidden field which can be posted on the submit button either by jquery or a direct post to a specific route.

jQuery post array - ASP.Net MVC 4

Post back data from an unordered list to controller action along in or along with a POCO in C#

2 Answers2