Why jQuery Ajax send Get request before of Post?

Question

I want to pass my combobox value on button click event in ASP.Net Mvc but it send get request first then send post request. But I don't want to send Get request.

<script type="text/javascript">
    $(function () {
        $("#btnSave").click(function () {
            $.ajax({
                url: '@Url.Action("ExportButton")',
                type: 'POST',
                data: {
                    Parameter: mycombobox.GetValue()
                }
            });
            $('#btnSave').unbind('click');
            return false;
        });
    });
</script>

Any idea?

Edit:

Here is my button:

@Html.DevExpress().Button(itemSettings =>
{
    itemSettings.Width = 150;
    itemSettings.Styles.Native = true;

    itemSettings.Name = "btnSave";
    itemSettings.Text = "Save";
    itemSettings.UseSubmitBehavior = false ;
    itemSettings.RouteValues = new { Controller = "Report", Action = "ExportButton"};
}
).GetHtml()

Combobox:

@Html.DevExpress().ComboBox( itemSettings =>
{

    var properties = itemSettings.Properties;
    properties.Caption = "Save As ";
    properties.Items.Add("PDF", "PDF");
    properties.Items.Add("EXCEL", "EXCEL");
    properties.Items.Add("CSV", "CSV");
    itemSettings.Name = "mycombobox";

    properties.ValueType = typeof(string);
}
).GetHtml()

Edit 2:

I realised that my jquery send "get" method before "Post" method.

Thanks in advance.

Answer 1

did you had tried this way?

<script type="text/javascript">
    $(function () {
        $("#btnSave").unbind().click(function () {//unbind your click event here
            $.ajax({
                url: '@Url.Action("ExportButton")',
                type: 'POST',
                data: {
                    Parameter: mycombobox.GetValue()
                }
            });
        });
    });
</script>

Answer 2

The docs state that click is a shortcut method for .on("click", handler) and suggests using .off("click") for unbinding, instead of unbind() . Give it a try !

Answer 3

I don't think your Ajax is running twice. Based on the image you've included, these requests are coming from different sources. The first one is a GET from the document and the second is the Ajax call by POST where you can see it is using XHR. Try to hover over or click on each line in order to get more detailed information.

Answer 4

I finally solved the problem.

@Html.DevExpress().Button(itemSettings =>
{
    itemSettings.Width = 150;
    itemSettings.Styles.Native = true;

    itemSettings.Name = "btnSave";
    itemSettings.Text = "Save";
    itemSettings.UseSubmitBehavior = false ;
    itemSettings.RouteValues = new { Controller = "Report", Action = "ExportButton"}; // This line send Get request!
}
).GetHtml()

When I deleted itemSettings.RouteValues line, problem solved.