如何在表单内向 jquery 数据表添加行？

Question

I hope everyone had good holidays.

I need to add rows to my datatable inside a modal window(partial view). This modal window basically has a form for various fields and a datatable, together with two inputs and a button.

My idea was to fill the two input fields and when the button is pressed a new row is created in the table, with the values inserted in the two input fields. But for some reason, when I click the button the values in the input fields are empty. The information on the table would very likely be stringified and sent, for example, to the field asp-for="test". So far this was what I thought.

Is this logic possible within a partial view? Do I need an additional form to receive data from my two inputs? I'm already inside another form and I know HTML5 doesn't allow for form nesting, but I get the nagging feeling that I would need an additional form for this logic. Here is the code:

(js)

$(document).ready(function () {
    $('#AddProdBtn').click(function () {
        $('#returnLinesGrid').dataTable().fnAddData( [
    $('#prodId').val(), $('#prodQty').val()] );
    });
});

(cshtml)

 <div id="return-edition-modal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content white-box white-box--lblreset">
            <div class="modal-header">
                <h5 class="modal-title create" style="display:none;">@TitleResource.ReturnCreate</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
                <div asp-validation-summary="ModelOnly"></div>
                <a hidden id="create-url" asp-action="Create" asp-controller="Returns"></a>
                <input type="hidden" value="@Guid.NewGuid()" asp-for="Id" />
                <div class="modal-body row">
                    <div class="md-form col-6 create-only row">
                        <select asp-for="ReturnType" asp-items="Html.GetEnumSelectList<OrderReturnTypeEnum>()" required class="form-control" selectpicker>
                            <option value="">@LabelResource.SelectReturnType</option>
                        </select>
                        <span asp-validation-for="ReturnType"></span>
                    </div>

                    <div class="md-form col-6 create-only" id="ReturnMotivePlaceholder" style="margin-top: 6px">
                        <select disabled selectpicker>
                            <option value="">@LabelResource.SelectReturnMotive</option>
                        </select>
                    </div>

                    <div class="md-form col-6 create-only" data-dependency="@((int)OrderReturnTypeEnum.Recall)" style="margin-top:6px">
                        <select asp-for="ReturnMotive" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumRecall>()" required class="form-control" selectpicker>
                            <option value="">@LabelResource.SelectReturnMotive</option>
                        </select>
                        <span asp-validation-for="ReturnMotive"></span>
                    </div>
                    <div class="md-form col-6 create-only" data-dependency="@((int)OrderReturnTypeEnum.Daily)" style="margin-top:6px">
                        <select asp-for="ReturnMotiveAux" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumDaily>()" required class="form-control" selectpicker>
                            <option value="">@LabelResource.SelectReturnMotive</option>
                        </select>
                        <span asp-validation-for="ReturnMotiveAux"></span>
                    </div>
                </div>
                <div class="modal-body row">
                    <div class="md-form col-6 create-only" data-dependency="@((int)OrderReturnTypeEnum.Daily)">
                        <input type="number" value="" asp-for="InvoiceNumber" class="form-control" required placeholder="@LabelResource.SelectReturnInvoiceNumber" />
                    </div>
                    <div class="md-form col-6 create-only">
                        <input type="text" value="" asp-for="ClientReturnNumber" placeholder="@LabelResource.SelectClientReturnNumber" class="form-control" />
                    </div>
                </div>

                <div class="md-form col-3 create-only">
                    <input type="number" value="" id="prodId" placeholder="@LabelResource.SelectProdId" />
                </div>
                <div class="md-form col-3 create-only">
                    <input type="text" value="" id="prodQty" placeholder="@LabelResource.SelectProdQuantity" />
                </div>
                <div class="col-6>
                    <button type="button" id="AddProdBtn">@ButtonResource.AddProduct</button>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <table class="dataTable" id="returnLinesGrid" asp-for="ReturnLines">
                                <thead>
                                    <tr>
                                        <th>@Html.Raw(LabelResource.ProductId)</th>
                                        <th>@Html.Raw(LabelResource.Quantity)</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="row modal-footer message-footer pr-5">
                    <div class=" mr-md-0">
                        <a data-dismiss="modal" class="btn btn-danger w-100">@ButtonResource.Cancel</a>
                    </div>
                    <div class=" ml-3">
                        <button type="submit" class="btn btn-primary w-100">@ButtonResource.Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

But the value of "prodId" and "prodQty" is always empty when I click the "AddProdBtn" button. Almost as if it never. I have no idea what to do.. Thank you for any and all help.

Pictures

Modal window

Main window, modal is called by pressing "Nova devolução" button

Answer 1

You should add the js to the main view. Below is a working demo:

Main View:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#return-edition-modal">
    Create
</button>

@await Html.PartialAsync("_ProductPartial")

@section scripts{
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
    <script>
        $(document).ready(function () {
            var datatable = $('#returnLinesGrid').dataTable();
            $('#AddProdBtn').click(function () {
                datatable.fnAddData([
                    $('#prodId').val(), $('#prodQty').val()]);
            });
        });
    </script>
}

Partial View:

<div id="return-edition-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
                    <div asp-validation-summary="ModelOnly"></div>

                    <div class="md-form col-3 create-only">
                        <input type="number" value="" id="prodId" placeholder="SelectProdId" />
                    </div>
                    <div class="md-form col-3 create-only">
                        <input type="text" value="" id="prodQty" placeholder="SelectProdQuantity" />
                    </div>
                    <div class="col-6">
                        <button type="button" id="AddProdBtn">AddProduct</button>
                    </div>

                    <table id="returnLinesGrid">
                        <thead>
                            <tr>
                                <th>@Html.Raw("ProductId")</th>
                                <th>@Html.Raw("Quantity")</th>
                            </tr>
                        </thead>
                    </table>

                    <div class="modal-footer">
                        <div class="mr-md-0">
                            <a data-dismiss="modal" class="btn btn-danger">Cancel</a>
                        </div>
                        <div class=" ml-3">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Result:

Answer 2

I finally got it, There is a typescript part of the code, which I had no idea would have a completely different behaviour than the javascript code, in the modal window. for some reason. I basically just had to put my jquery code in the.ts file associated(in this case Return.Index,ts) and then it finally recognized the values in my inputs, Thank you so much, everyone, and early happy new year!