0

I have a asp.net mvc web application that has a form with some text data (title, description e.g.) and some images. Because of resizing the images before I send them to the server I have a javascript function to resize the images, put all data into an object and send it as JSON with an ajax call to the server.

This is the Model:

public class ItemCU
{
    public int pid { get; set; }
    public string pcat { get; set; }
    public string ptitle { get; set; }
    public string pdescription { get; set; }
    public double pprice { get; set; }
    public int pcount { get; set; }
    public int psort { get; set; }
    public string[] pimgOrder { get; set; }
    public string[] pimgNum { get; set; }
    public string[] pimgData { get; set; }
    public List<SelectListItem> pcategories { get; set; }
}

This is the javascript function:

    function saveData() {

        var imgNum = [], imgData = [];
        for (var i = 0; i < newOrder.length; i++) {
            if (newOrder[i] > 999999) {
                imgNum.push(newOrder[i]);
                var resimg = resizeImage($("img[data-id='" + newOrder[i] + "'").attr('src'));
                imgData.push(resimg);
            }
        }

        var itmData = {
            pid: $("#id").val(),
            ptitle: $("#title").val(),
            pcat: $("#cat").val(),
            pdescription: $("#description").val(),
            pcount: $("#count").val(),
            pprice: $("#price").val(),
            psort: $("#sort").val(),
            pimgOrder: newOrder,
            pimgNum : imgNum,
            pimgData : imgData
        }

        $.ajax(
            {
                url: '@Url.Action("ItemEdit", "Admin")',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ piData: itmData }),
                success: function (delres) {
                    window.location.href = delres.redirectUrl;
                },
                error: function (delres) {
                    window.location.href = delres.redirectUrl;
                    }
                }
            }
        )
    }

I shortened the ajax call aound the callback part.

Everything works fine, when I just select and send one image but when I want to send multiple images it doesn't work. It looks like that the data isn't sent by ajax but will continue directly with error callback..

I made a screenshot of my browser debugging session, where you can see that the array (pimgdata) contains two images, so up to there everything still is ok.

Screenshot of debugging JS

Whenever i try to google I find examples with just sending images without other data or data and one image...

My question now ist, if I made something wrong with the call (maybe thiat stringify) or if it doesn't work anyway the way I want it to?

I would be really thankful to get some tips/hints/advice. Even some keywords I could google would be helpful.

Thanks in advance, Tim (I hope that the question has all informationen needed...)

UPDATE:

After the advice from Robby Cornelissen I found out that there seems to be a "simple" issue with the maxJsonLength. Unfortunately, when I google it I usually find answers for sending data from server to client - not vice versa. As I already read it's not neccessary to edit the webconfig as it is just for webservices - not for MVC controller.

I read that I could change to JSON.serialize but I think the problem will be the same.

Honestly I don't understand if this is a problem of sending data to the server and/or receiving data on server side...

Any hints that I can google? Thanks a lot, Tim

UPDATE 2 / 'SOLUTION'

After long time of searching i found two pages that helped me to get a 'solution' that finally worked. Don't know if there might be a better way, but...

First part I found on ExpertsExchange: They created a custom JsonValueProviderFactory and replaced the default with this one in Global.asax

Additionally I added maxRequestLength and maxAllowedContentLength to my web.config as I found here on StackOverflow

There might be better solutions but for me it worked.

Thanks a lot, Tim

Tim
  • 1
  • 1
  • *"[...] the data isn't sent by ajax but will continue directly with error callback [...]"* More than a client-side problem, this looks like your server is throwing an error. Have you checked the response from the server? – Robby Cornelissen May 29 '18 at 00:33
  • Can you please include the ViewModel/Model that will be binded on your mvc ItemEdit action? – Luke Villanueva May 29 '18 at 08:07
  • @LukeVillanueva I added the model to the question. Sorry for not doing it directly. – Tim May 29 '18 at 10:46
  • @RobbyCornelissen: Thanks a lot for that tip. Now I know the real problem and updated my question as I didn't find an answer yet – Tim May 29 '18 at 10:57
  • Why don't you move the resizing inside the action controller? Rather than doing it on the script. – Luke Villanueva May 30 '18 at 00:39
  • I do the resize on client side to reduce the data. As I also want to be able to select multiple times images before uploading them and be (almost) able to crop and rotate them I think I have to transmit them by ajax. – Tim May 30 '18 at 09:43

0 Answers0