locked
Why my ids parameter is null using ajax call? RRS feed

  • Question

  • User1135990798 posted

    hi please help i need to fetch all selected ids but my parameter ids is null. my other parameter is working fine 'postedFile', 'Amount', and 'DateOfPayment' only 'ids' is null . im stuck in here for 2 days. please help thanks.

    My View

    @using ChenvelMobile.Web.Models.Payment
    @model PaymentFormModel
    
    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/font-awesome/css/all.css" rel="stylesheet" />
    
    @using (Html.BeginForm("Index", "Payment", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <div class="row">
            <div class='col-md-2'>
                <div class="form-group">
                    @Html.LabelFor(x => x.DateOfPayment, new { @class = "form-label" })
                    <div class='input-group date' id='datetimepicker1'>
                        @Html.TextBoxFor(x => x.DateOfPayment, new { @class = "form-control", @id = "Date" })
                        <span class="input-group-addon">
                            <span class="fas fa-calendar-alt"></span>
                        </span>
                    </div>
                </div>
            </div>
    
            <div class="col-md-2">
                <div class="form-group">
                    @Html.LabelFor(x => x.Amount, new { @class = "form-label" })
                    @Html.TextBoxFor(x => x.Amount, new { @class = "form-control", @id = "Amount" })
                </div>
            </div>
    
            <div class="col-md-2">
                <div class="form-group">
                    @Html.LabelFor(x => x.test, new { @class = "form-label" })
                    @Html.TextBoxFor(x => x.test, new { @class = "form-control", @id = "test" })
                </div>
            </div>
    
            <div class="form-group">
                <div class="col-md-2">
                    @Html.LabelFor(x => x.ImagePath, new { @class = "form-label" })
                    <input type="file" name="postedFile" id="imageUploadForm" required />
                </div>
            </div>
    
            <div class="form-group">
                <div class="col-md-2">
                    <button type="submit" id="btnUpload" class="btn btn-primary btn-sm" onclick="saveSelected()"><i class="fas fa-save"></i> &nbsp;Save</button>
                </div>
            </div>
        </div>
    
    }
    <table id="Payable" class="display table table-striped" style="width: 100%">
        <thead>
            <tr>
                <th></th>
                <th>Type</th>
                <th>ReferenceNo</th>
                <th id="amountpayable">Amount</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    

    My Script

    var table;
         $(function () {
            table = $('#Payable').DataTable({
                "ajax": "@Url.Action("getpayablelist", "payment")",
                 "columns": [
                    {
                        "render": function (data, type, full, meta) {
                           return "<input type='checkbox' class='' onclick='add(" + full.Id + ", this.checked)'>"
                        }
                    },
                    { "data": "Type" },
                    { "data": "ReferenceNo" },
                    { "data": "Amount" }
                ]
            });
         });
    
         ids = [];
        function add(id, isChecked) {
            if (isChecked) {
                ids.push(id);
                alert(id)
            }
            else {
                var i = ids.indexOf(id);
                ids.splice(i, 1);
            }
        }
    
        function saveSelected() {
            $('#imageUploadForm').on("change", function () {
                var formdata = new FormData($('form').get(0));
                CallService(formdata, ids, Amount, DateOfPayment);
            });
    
            function CallService(postedFile, Amount, DateOfPayment, ids) {
                $.ajax({
                    url: '@Url.Action("index", "payment")',
                    type: 'POST',
                    data: JSON.stringify({ ids: ids, Amount: Amount, DateOfPayment: DateOfPayment, postedFile: postedFile }),
                    cache: false,
                    processData: false,
                    contentType: "application/json; charset=utf-8",
                    traditional: false,
                    dataType:"json",
                    success: function (data) {
                        alert("Success");
                    }
                });
            }
        }

    My Controller

    public ActionResult Index(HttpPostedFileBase postedFile, decimal? Amount, DateTime? DateOfPayment, int?[] ids)
            {
                return View();
            }

    Saturday, May 16, 2020 1:58 AM

All replies

  • User-474980206 posted

    The order of parameters don’t match

            CallService(formdata, ids, Amount, DateOfPayment);
    
            function CallService(postedFile, Amount, DateOfPayment, ids) 
    

    Saturday, May 16, 2020 3:40 PM
  • User1135990798 posted

    hello ill try to match the parameter still the same. ill try to alert the ids before the CallService Function and it show the data but when ill try to alert after CallService function the alert will not show. the problem is the function CallService not accept my ids value why?

    Sunday, May 17, 2020 9:05 AM
  • User475983607 posted

    Your code is fragile and depends on the user clicking add to populate an array based on a check.  Rather than the community having to wire up a test to debug your code, I recommend that you run the code through the debugger in dev tools.  Set a break point and verify your code functions as expected.  

    https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

    IMHO, the code is overly complex.  It stores the same id information in two different places; checkboxes and an array.   The complexity is syncing the array with the check boxes.  You can get all the checked boxes at any time using a selector.  I would remove the add function and get the ids in the saveSelected() function.  

    https://api.jquery.com/checked-selector/

    Sunday, May 17, 2020 10:58 AM
  • User1686398519 posted

    Hi,  DMDel

    I want to confirm with you if the ids cannot be passed to the Controller. If so, you can make such changes.

    traditional: true

    Best Regards,

    YihuiSun

    Monday, May 18, 2020 10:48 AM
  • User1135990798 posted

    YihuiSun

    hi thank you answering my question. but still the same the ids is empty.

    when i try to set a breakpoint. first the other parameter has a value but ids is empty after i press f10 to ontinue debugging the ids is not empty the value is show but my other parameter is empty. thats what happening when i try to debug.

    Monday, May 18, 2020 12:15 PM
  • User1135990798 posted

    mgebhard

    ok thank you i can check this link

    Monday, May 18, 2020 12:22 PM