Posting an array of string

Question

I am trying to post a string array to the post action in an Razor Pages project. For this, I thought about using a hidden <select> tag. The user would enter text into a text box, press a button and I would then add a new option to the <select> then post the whole thing with a submit button. However, after everything is posted, the array property of my model is empty.

Does anyone know if there is a better way of doing this or what I am doing wrong?

Razor:

<form method="post">
    <input id="string-value" />
    <input type="button" id="add-item" value="Add item" />
    <select asp-items="@Model.Model.ArrayOfStrings" id="hidden-select"></select>
    <table id="table-items">

    </table>
    <input type="submit" value="Submit" />
</form>

public class ArrayModel
{
    public List<SelectListItem> ArrayOfStrings { get; set; } = new List<SelectListItem>();
}
public class IndexModel : PageModel
{
    [BindProperty]
    public ArrayModel Model { get; set; }

    public void OnGet()
    {
        Model = new ArrayModel();
    }

    public void OnPost()
    {
        System.Diagnostics.Debugger.Break();
    }
}

JS:

$('#add-item').on('click', function () {
    debugger;
    var value = $('#string-value').val();
    $('#hidden-select').append(new Option(value, value));
    $('#table-item tr:last').after('<tr><td>' + value + '</td></tr>')
});

Repository can be found here.

devzero · Accepted Answer · 2020-03-06 13:18:39Z

1

The options of the select will not be posted so this will not work.

The easiest way to do this is append the results to a hidden input with a separator char, then do a string split on the server side.

Another, maybee more elegant way, would be to add hidden inputs with the same name. Each input with it's own value. You should then be able to get this as a List or Array on the server.

Razor:

  <input value="@String.Join(",", Model.Model.ArrayOfStrings)" id="tags"></select>

JS

$('#tags').val($('#tags').val() + ',' + value);

Controller

 public void OnPost(string tags)
{
    var tagsArray = tags.split(',');
}

edited Mar 6, 2020 at 13:18

answered Mar 6, 2020 at 13:12

devzero

2,7005 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LeonidasFett Over a year ago

Thanks, your hint of using hidden inputs with the same name helped. I tried to use an index, but that didn't work. Without the index, the model binder is able to bind it to the array.

Collectives™ on Stack Overflow

Posting an array of string

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related