如何在 asp.net core v 2.0 中从 javascript 调用 PageModel 方法答案

【问题标题】：How to call PageModel Method from javascript in asp.net core v 2.0如何在 asp.net core v 2.0 中从 javascript 调用 PageModel 方法
【发布时间】：2018-02-28 10:42:07
【问题描述】：

我正在编写一个 asp.net 核心网站，显示在其他地方生成的图片。我正在其他地方轮询 webapi，我已经编写并命名为 elseware ;-)

基本上，当图像可用并上传到我的网站服务器时，我需要更新显示图像的路径。我正在从 javascript 进行轮询，也查看图像是否可用，当它可用时，我想转到 RazorPage 的 pageModel，并在其上调用一个函数，最好传递图像的名称。然后该函数应该为图像调用 elseware，并将其存储在服务器上，并返回它的本地路径。

获取图片名作为参数的C#函数有点麻烦。

 .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);
}

我不知道这是否是一个聪明的方法来解决它，但我认为它应该是可行的。如果我将 ImagePath 设为类上的公共属性，我可以覆盖该属性的 get 和 set 操作。但这并不清楚。

我不想在页面上使用 OnPost/OnGet。请注意，这是 asp.net core mvc/web api v. 2.0 - （目前相当新）

【问题讨论】：

模型对象用于在客户端和服务器之间传递信息，不提供 AJAX 包装器。所以你不能在模型上调用方法。如果您不想要获取/发布，则需要创建对 API 方法的 ajax 回调，

标签： javascript c# asp.net-core-mvc razor-pages

【解决方案1】：

按照 Brad Patton 的建议，我将使用 ajax 调用与我的控制器取得联系..

【讨论】：

【解决方案2】：

我不认为这会起作用，试试这个我没有测试过，但它可能会给你一个更好的画面

步骤

保存图片

在 json 中设置路径名称大小或您想要的任何信息

公共类 UploadFilesResult { 公共字符串名称 { 获取；放; } 公共 int 长度 { 获取；放; } 公共字符串类型 { 获取；放; } }

[HttpPost] 公共 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");

}

解析图像并显示有关 iamge 解析 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 或简单的 div

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

【讨论】：