ozimax06 ozimax06 - 4 years ago 194
Javascript Question

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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download