CODEWITHSUNDEEP
javascriptjqueryasp.netajaxmodel-view-controller
Amani
Amani

Reputation: 83

Ajax POST in MVC

I'm working with MVC Project and the following ajax doesn't work as expected i want the data to be passed to the Create action in Story Controller, which for now they are NULL when the ajax are called.

I want to receive the data as parameters in my action:

[HttpPost]    
public async Task<IActionResult> Create(CreateStoryViewModel model, string count, List<string> val){}

Script:

<script>
    $(document).ready(function () {
        var counter = 0;
        $("#addrow").on("click", function () {
            var newRow = $("<tr>");
            var cols = "";
            cols += '<td class="col-md-3"><input type="text" class="form-control" name="sent" asp-for="Sentence.SentenceText" /></td>';
            cols += '<td class="col-md-1"><input type="file" class="form-control-file border" name="img"></td>';
            cols += '<td class="col-md-1"><input type="file" class="form-control-file border" name="aud"></td>';
            cols += '<td class="col-md-1"><input type="button" class="ibtnDel btn btn-md btn-danger " value="delete"></td><hr />';

            newRow.append(cols);
            $('tbody').append(newRow);
            counter++;
        });
        $("table.order-list").on("click", ".ibtnDel", function (event) {
            $(this).closest("tr").remove();
            counter -= 1
        });
        $('#publish').click(function () {
            var values = [];
            $('input[name="sent"]').each(function (i, elem) {
                values.push($(elem).val());
            });
            alert(values.join(', '));
            alert(counter);
            $.ajax({
                type: "POST",
                url: "/Story/Create",
                data: {
                    count: counter,
                    val: values
                },
                //contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (data) {
                },
                error: function (data) {
                }
            });
        });
    });
</script>
<input type="submit" value="Publish" name="btn" id="publish" class="btn btn-default btn-block btn-icon" />

Upvotes: 2

Views: 273

Answers (1)

Bryn Lewis
Bryn Lewis

Reputation: 598

The controller has 3 parameters defined:

    Create(CreateStoryViewModel model, string count, List<string> val){}

However, your AJAX post doesn't include the model parameter.

You either need to include it in the script:

                data: {
                    model: createStoryModel,
                    count: counter,
                    val: values
                },

or remove it from the controller:

    Create(string count, List<string> val){}

Additional edit:

It would help if you included a minimal complete html that allowed a test. The values variable is an array, so if you expect if you expect a list in the controller you may need to add this:

values = JSON.stringify(values);

before the AJAX call.

Upvotes: 4

Related Questions