Ajax form submit calling method twice in ASP.NET MVC

Question

I have a weird scenario happens when I send my ajax request that has 2 objects first time it passes the second obj with the right value while the first object is null.Then second call it passes the first obj with value and the second obj as null

Here's my ajax method

var serializedForm = $(form).serialize();
var postData = {
    merchTask: obj,
    items: arrItems
};
$.ajax({
    type: "POST",
    url: $(form).attr('action'),
    contentType: "application/json; charset=utf-8",
    dataType:'json',
    data: JSON.stringify(postData),
    success: function (response) { 
        alert('done');
    },
     error: function (xhr, status, error) {
         alert("Oops..." + xhr.responseText);
     }
});

And here's my action in controller

    public ActionResult EditTask(Task merchTask, string[] items)
    {
        short CompanyID = Convert.ToInt16((gSessions.GetSessionValue(gSessionsData.Company) as Company).ID);
        try
        { 
            merchTask.CompanyID = CompanyID; 
            if (merchTask.TaskID != 0)
            {
                taskTemplatesBF.Update(merchTask);
            }
            else
            {
                taskTemplatesBF.InsertMerchTask(merchTask);
            } 
            string[] selectedLst = items;
            foreach (string item in selectedLst)
            { 
                taskTemplatesBF.InsertItemsLink(CompanyID,merchTask.TaskID,merchTask.ItemCode);
            } 
        }
        catch (Exception ex)
        {
            if (ex.InnerException != null)
            {
                ModelState.AddModelError("", ex.InnerException.Message);
            }
            ModelState.AddModelError("", ex.Message);
        }

        return RedirectToAction("TasksTemplates", "Merch");

    }

*I found a workaround to send each object separately in different ajax but what's wrong when I send them in one request?

TanvirArjel · Accepted Answer · 2019-01-23 09:19:35Z

3

You have added a lot of code in the question but missed the code that was actually needed.

Okay add the event.preventDefault(); and event.stopImmediatePropagation(); functions inside your form summit event as follows:

$(document).ready(function(){

  $("formId").on('submit',function(event){

       event.preventDefault();
       event.stopImmediatePropagation();


       var serializedForm = $(form).serialize();
       var postData = {
             merchTask: obj,
             items: arrItems
        };

       $.ajax({
            type: "POST",
            url: $(form).attr('action'),
            contentType: "application/json; charset=utf-8",
            dataType:'json',
            data: JSON.stringify(postData),
            success: function (response) { 
                   alert('done');
             },
            error: function (xhr, status, error) {
                alert("Oops..." + xhr.responseText);
            }
        });    
  });
});

Hope this will solve your problem.

answered Jan 23, 2019 at 9:19

TanvirArjel

32.4k14 gold badges88 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dee Over a year ago

Thank you so much! This has saved my day, rather days!

Collectives™ on Stack Overflow

Ajax form submit calling method twice in ASP.NET MVC

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related