ImageProcessor request makes future List Bindings Fail

Question

I am struggling with an issue with my site, where if I make a request to an image using ImageProcessor.Web, that it prevents some future List<> binding requests from working.

I'm not sure whether it's a bug, or whether it's a configuration problem, but I've been struggling to get to the bottom of it.

I have stripped my entire website back to a solution just to demonstrate this binding problem.

I have located the test application at the following address in my S3: https://s3.amazonaws.com/bindingissue/BindingIssue.zip

If you open the application, run the website project and navigate to https://localhost:44300/ it displays the form:

If you submit the form, you will see that the page indicates that the value within the text box has been bound and the submitted value appears in the form.

The name of the form element is FilledInValues[0] and it binds the value to a variable in the controller action called FilledInValues which is of type List<string>.

[HttpPost]
public ActionResult Index(TestViewModel requestResponseModel)
{
    if (requestResponseModel.FilledInValues != null && !string.IsNullOrWhiteSpace(requestResponseModel.FilledInValues[0]))
    {
        ViewBag.Success = true;
    }
    else
    {
        ViewBag.Success = false;
    }

    return View(requestResponseModel);
}

Here's the model that is being bound to:

public class TestViewModel
{
    public string UrlId { get; set; }
    public string QuizName { get; set; }
    public int QuestionId { get; set; }
    public List<int?> SelectedAnswers { get; set; }

    // This is the value that fails to bind
    public List<string> FilledInValues { get; set; }

    public bool? IsEmbed { get; set; }
}

Now, when you click the link, it takes you to the following URL in a new tab:

https://localhost:44300/content/images/smileyface.png?width=260&height=100&mode=stretch&bgcolor=FFFFFF

This loads an image from an S3 Bucket, Image Processor resizes the image according to the values specified in the query string. The image should be displayed, it is a smiley face :).

Now, when you return back to the form, refresh the page and submit the form again. It will indicate that the value you submitted did not bind correctly. Even though it did before!

If you put a breakpoint on the Home controller on the Index action, you can observe the value failing to bind.

Now, it will continue to fail to bind this value until you restart the app pool (if the app is hosted on IIS) or if you restart the app within Visual Studio.

The form hasn't changed and the values are still being posted, because I can see then within the Chrome developer tools Network tab and you can see the query string value that has been formatted in the controller's this.Request.Form value once you've submitted the form.

Please can you help me identify why the binding works before and then fails after loading the image that loads through Image Processor?

Answer 1

I've spent quite a while looking at this trying to see why the binding doesn't work after using Image Processor to manipulate an image.

Luckily I have managed to make the binding work again, but it's going to take me changing each of the models that I use to bind to. It seems that if I change the model to bind to IList<> instead of List<string> the binding with an index works again.

public class TestViewModel
{
    // Changed from List<string> to IList<string> and it works now
    public IList<string> FilledInValues { get; set; }
}

It leaves me wondering what causes this and also if there is some bug or something that could be causing it. I'll try to keep you updated.

Update

This is currently associated with Bug #284 that I posted on the official ImageProcessor Github repository. It seems as though this is being caused by a TypeConverter for List<T> that is defined in the library.

12/01/2016 - Bug has been resolved and I believe the fix will be out with the next release.