CODEWITHSUNDEEP
razor-pagesasp.net-core-3.1
LeonidasFett
LeonidasFett

Reputation: 3132

Posting an array of string

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.

Upvotes: 1

Views: 631

Answers (1)

devzero
devzero

Reputation: 2670

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

Upvotes: 1

Related Questions