[英]How to call PageModel Method from javascript in asp.net core v 2.0
I am writing an asp.net core website, that shows a picture being generated elsewhere.我正在编写一个 asp.net 核心网站,它显示了在其他地方生成的图片。 And am polling the webapi on elsewhere, that I have written and named elseware ;-)我正在其他地方轮询 webapi,我已经编写并命名为 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.我也在从 javascript 轮询,看看图像是否可用,当它可用时,我想转到 RazorPage 的 pageModel,并调用一个函数,最好传递图像的名称。 The function should then call elseware for the image, and store it on the server, and returning it's local path.然后该函数应该为图像调用 elseware,并将其存储在服务器上,并返回它的本地路径。
Getting the C# function with the image name as parameter is somewhat troublesome.获取以图片名称为参数的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);
}
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.如果我将 ImagePath 设为类上的公共属性,则可以覆盖该属性的 get 和 set 操作。 But that would not be clear.但这并不清楚。
I don't want to use the OnPost/OnGet on the page.我不想在页面上使用 OnPost/OnGet。 And please note that this is asp.net core mvc/web api v. 2.0 - (quite new at the moment)请注意,这是 asp.net core mvc/web api v. 2.0 -(目前很新)
I dont think this will ever work, try this I have not tested but it may give you a better picture我不认为这会奏效,试试这个我没有测试过,但它可能会给你一个更好的画面
Save image保存图片
Seturn path name size or what ever info you want in json在 json 中设置路径名称大小或您想要的任何信息
public class UploadFilesResult { public string Name { get;公共类 UploadFilesResult { 公共字符串名称 { 获取; set;设置; } public int Length { get; } 公共整数长度{ 得到; set;设置; } public string Type { get; }公共字符串类型{获取; set;设置; } } } }
[HttpPost] public ContentResult UploadFiles() { var r = new List(); [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");
} }
<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>
<div class="file_name">div>
<br />
<div class="file_type">div>
<br />
<div class="file_size">div>
正如 Brad Patton 所建议的,我将使用 ajax 调用与我的控制器取得联系。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.