Form Submission (cutom object not FormData) through Ajax in ASP .NET Core MVC

Question

I am trying to submit form data through an Ajax call and not passing FormData, but instead passing a custom object in the Ajax call.

This is my ajax call:

function submitData() {
    let isValid = true;
    var bankViewModel = {};
    
    {
        bankViewModel = {
            Name: $("#name").val(),
            Website: $("#website").val(),
            Logo: $("input#logo")[0].files[0],
      //      Logo: null,
            StartDate: $("#startDate").val(),
            Stars: $("#stars").val(),
            Branches: []
        };

        // branches
        $("#branchTable tbody tr").each(function (index, row) {
            const branch = {
                Name: $(row).find(".branch-name").val(),
                Email: $(row).find(".branch-email").val(),
                Status: $(row).find(".branch-status").is(":checked"),
                Photo: $(row).find(".branch-photo")[0].files[0]
            //    Photo: null
            };
        bankViewModel.Branches.push(branch);
        });

        console.log("++++++++BANK+++++++++");
    console.log(bankViewModel);
        console.log("+++++++++++++++++");
    }

    if (isValid) {
        $.ajax({
            type: "POST",
            url: "@Url.Action("Create", "BanksV62")",
     //       data: form,
        data: {bankViewModel},
       //     contentType: ,
            contentType: false,
        //    contentType: "multipart/form-data",
        //    contentType: "application/x-www-form-urlencoded",
            processData: false,
            success: function (response) {
                if (response.success) {
                    window.location.href = "@Url.Action("Index", "BanksV62")";
                } else {
                    alert("Error occurred.");
                }
            },
            error: function (response) {
                alert("Request failed from create error.");
            }
        });
    }
}

This is my controller's action method's signature

[HttpPost]
public async Task<IActionResult> Create(BankViewModel bankViewModel)
{
    // here bankViewModel received object with null or default values not exact value that i have passed
}

And this is my view model:

public class BankViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Website { get; set; }
    public IFormFile? Logo { get; set; }
    public DateTime StartDate { get; set; }
    public int Stars { get; set; }
    public List<BranchViewModel> Branches { get; set; }
    public string? IdListToDelete { get; set; }
}

Is it really possible to post a custom object (not FormData) with photos through an Ajax call?? If possible - how can I do it?

Why can't you use formdata? An alternative would be base64 encoding the image and passing it into your bankviewmodel as a string. — Nick Acosta
– Nick Acosta, Commented Jan 8 at 15:28

Brando Zhang · Accepted Answer · 2025-01-09 02:44:56Z

0

If you want to send the file directly in js model, the most easily way is using the formdata. If you want to use other way, you should firstly convert the file to the byte64 or other format and then send it to the backend.

Encode the file and decode the file and save inside the server will use more resource than directly using the formdata in bytearray.

answered Jan 9 at 2:44

Brando Zhang

29.1k6 gold badges42 silver badges71 bronze badges

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

Collectives™ on Stack Overflow

Form Submission (cutom object not FormData) through Ajax in ASP .NET Core MVC

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related