Insert Multi Inputs to DB

Question

How To Get Multi Inputs Value And Save To Db? this is my Input Generator:

<div class="form-group input-group">
                                <input type="text" class="form-control">
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default btn-add">
                                        +
                                    </button>
                                </span>
                            </div>

and Jquery Codes:

<script>
    (function ($) {
        $(function () {

            var addFormGroup = function (event) {
                event.preventDefault();

                var $formGroup = $(this).closest('.form-group');
                var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
                var $formGroupClone = $formGroup.clone();

                $(this)
                    .toggleClass('btn-default btn-add btn-danger btn-remove')
                    .html('–');

                $formGroupClone.find('input').val('');
                $formGroupClone.insertAfter($formGroup);

                var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
                if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
                    $lastFormGroupLast.find('.btn-add').attr('disabled', true);
                }
            };

            var removeFormGroup = function (event) {
                event.preventDefault();

                var $formGroup = $(this).closest('.form-group');
                var $multipleFormGroup = $formGroup.closest('.multiple-form-group');

                var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
                if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
                    $lastFormGroupLast.find('.btn-add').attr('disabled', false);
                }

                $formGroup.remove();
            };

            var countFormGroup = function ($form) {
                return $form.find('.form-group').length;
            };

            $(document).on('click', '.btn-add', addFormGroup);
            $(document).on('click', '.btn-remove', removeFormGroup);

        });
    })(jQuery);
</script>

the code generate Several Input text By push on the + Button.

Question: how to get values all inputs? in razor page and input model class?

if this is only One Input i can do it.but several input that genereted by javascript i tired to this action!

Answer 1

Question: how to get values all inputs? in razor page and input model class?

Since you use $formGroup.clone() , you could simply apply same name attribute on all inputs and save it as List<string> in PageModel. For example：

1.page.cshtml

@model TestInputModel
<form method="post">
<div class="form-group input-group">
    <input type="text" class="form-control" name="MyAllInputs">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default btn-add">
            +
        </button>
    </span>
</div>
<div class="form-group">
    <input type="submit" value="Submit" class="btn btn-primary" />
</div>
</form>
@section Scripts{
 <script>...</script>
}

2.PageModel

public class TestInputModel : PageModel
{
    //using your db context by DI
    private readonly MyApplicationDbContext _context;

    public TestInputModel(MyApplicationDbContext context)
    {
        _context = context;
    }

    //bind your all inputs' values
    [BindProperty]
    public List<string> MyAllInputs{ get; set; }

    public void OnGet()
    {

    }

    public void OnPost()
    {
        //logic to save you input values to dbcontext
        var data = MyAllInputs;
        //...
    }
}