How to call PageModel Method from javascript in asp.net core v 2.0

Question

I am writing an asp.net core website, that shows a picture being generated elsewhere. And am polling the webapi on elsewhere, that I have written and named elseware ;-)

Basically I need to update the path to the image shown, when the image is avalible and uploaded to my websites server. I am polling from javascript, too see if the image is available, and when it is, I want to go to my pageModel of the RazorPage, and call a function on that, preferably passing the name of the image. The function should then call elseware for the image, and store it on the server, and returning it's local path.

Getting the C# function with the image name as parameter is somewhat troublesome.

 .cs file:
  public class xxModel:PageModel {
  ...
  public string UploadImage(string imageName) {
       var image = elseware.GetImage(imageName);
       string newPath = saveImage(image);
       return newPath;
       }
  }

.cshtml file:

var pollForImage = function (imageName) {
  var imagePath = @Model.UploadImage(imageName); //<== this is where it 
                                                 // fails.. I cannot get 
                                                 // the call to work with 
                                                 // a parameter..
  $("#image").attr("src", imagePath);
} 

I don't know if this a smart way to solve it, but I think it should be doable. If I make the ImagePath a public property on the class, I can overwrite the get and set operations of the property. But that would not be clear.

I don't want to use the OnPost/OnGet on the page. And please note that this is asp.net core mvc/web api v. 2.0 - (quite new at the moment)

Answer 1

As suggested by Brad Patton, I will use an ajax call to get in touch with my controllers..

Answer 2

I dont think this will ever work, try this I have not tested but it may give you a better picture

Steps

1. Save image

2. Seturn path name size or what ever info you want in json

   public class UploadFilesResult { public string Name { get; set; } public int Length { get; set; } public string Type { get; set; } }

   [HttpPost] public ContentResult UploadFiles() { var r = new List();

    foreach (string file in Request.Files)
    {
        HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
        if (hpf.ContentLength == 0)
            continue;
   
        string savedFileName = Path.Combine(Server.MapPath("~/App_Data"), Path.GetFileName(hpf.FileName));
        hpf.SaveAs(savedFileName); // Save the file
   
        r.Add(new ViewDataUploadFilesResult()
        {
            Name = hpf.FileName,
            Length = hpf.ContentLength,
            Type = hpf.ContentType
        });
    }
    // Returns json
    return Content("{\"name\":\"" + r[0].Name + "\",\"type\":\"" + r[0].Type + "\",\"size\":\"" + string.Format("{0} bytes", r[0].Length) + "\"}", "application/json");
   

   }

To parse image and show info about iamge parse the json

<script type="text/javascript">
    $(document).ready(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            url: '/Home/UploadFiles',
            autoUpload: true,
            done: function (e, data) {
                $('.file_name').html(data.result.name);
                $('.file_type').html(data.result.type);
                $('.file_size').html(data.result.size);
            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.progress .progress-bar').css('width', progress + '%');
        });
    });
</script>

HTML or simple div

<div class="file_name">div>
<br />
<div class="file_type">div>
<br />
<div class="file_size">div>