CODEWITHSUNDEEP
jqueryasp.net-mvc
ozimax06
ozimax06

Reputation: 406

Ajax Call with Multiple Parameters

I am pretty new in AJAX calls in ASP.NET MVC. I am trying to figure out how to pass the following parameters to my controller.

LeadController:

    [HttpPost]
    public void SaveWebLeadforYear(string office, int year, int[] values)
    {
        int index = 0;
        WebLead.removeByYear(office, year);


            for (int m = 0; m < months.Length; m++)
            {
                if (index < values.Length) {WebLead.Save(office, values[index++], months[m], year); }
            }


    }

JavaScript:

var leadList = new Array();

    //scan through the text boxes
    $('#WebLeadsEntry').find(' input:text').each(function () {
        leadList.push($(this).val().trim() == "" ? -1 : $(this).val());
    });



    debugger

    $.ajax({
        type: "POST",
        url: '/Lead/SaveWebLeadforYear',
        //data: { 'office': office1, 'year': parseInt(year1)},
        data: 
            {
                office: $("#officeList").val(),
                year: $("#yearList").val(),
                values: JSON.stringify(leadList),  
            },
        contentType: "application/json; charset = utf-8",
        datatype: "json",
        async: true,
        cache: false,
        success: function (response) {
            debugger
            //table is saved to the database, remove the tab
        },
        error: function (x, e) {
            debugger
            window.location.href = "/Lead/Errorpage";
        }
    });

It always gives error. Do you have any idea why?

Upvotes: 0

Views: 2526

Answers (1)

Shyju
Shyju

Reputation: 218722

Build a javascript object to represent your data. Call JSON.stringify on that. Your HttpPost action method would be able to get the data then.

This code should work.

$(function () {

    $("#btnSave").click(function (e) {
        e.preventDefault();

        var leadList = [];
        $('#WebLeadsEntry').find(' input:text').each(function () {
            leadList.push($(this).val().trim() == "" ? -1 : $(this).val());
        });

        var model = {
                      office: $("#officeList").val(),
                      year: $("#yearList").val(),
                      values: leadList,
                    };

        $.ajax({
            type: "POST",
            url: '/Account/SaveWebLeadforYear',
            data: JSON.stringify(model),
            contentType: "application/json; charset = utf-8",
            datatype: "json",
            async: true,
            cache: false,
            success: function (response) {
                console.log(response);
            },
            error: function (x, e) {
                console.log('err');
            }
        });

    });

});

Also, As a side note, i would not hard code the path of url property value, It is a safe idea to use the Url.Action html helper method to generate the path to the action method. For example, If you are having your script inside the view itself, you can do this,

$.ajax({
         type: "POST",
         url: '@Url.Action("SaveWebLeadforYear","Account")',

If your script is in a seperate js file, you can create a variables to hold the urls to different action methods and set the value of those in your views and use that again in your other javascript files of the same page/view.

Upvotes: 1

Related Questions