我如何将数据从控制器传递到 Blazor 上的视图？

Question

我尝试使用 Blazor（服务器端）创建一个项目并将视图创建为 .razor，我还添加了控制器。如何将数据从控制器传递到视图 .razor ？

我想我可以在控制器中创建一个 public 变量，它将是交互控制器和 .razor。但是我不知道代码

I want get var u to the view

//Controller
[HttpPost("[action]")]
public void Save(IList<IFormFile> UploadFiles)
{
    var u = UploadFiles.FirstOrDefault().FileName;

    long size = 0;
    size = SaveUploadedFiles(UploadFiles, size);
}

//View
<EjsUploader ID="UploadFiles">
  <UploaderAsyncSettings SaveUrl="api/Save" RemoveUrl="api/Remove"></UploaderAsyncSettings>
</EjsUploader>

Answer 1

此处支持同步融合。

您可以使用“Headers”或“ReasonPhrase”将数据从控制器传递到成功事件中的视图，如以下代码示例中所述。

[SampleDataController.cs]


public void Save(IList<IFormFile> UploadFiles)
        {
            long size = 0;
            try
            {
                foreach (var file in UploadFiles)
                {
                    var filename = ContentDispositionHeaderValue
                                        .Parse(file.ContentDisposition)
                                        .FileName
                                        .Trim('"');
                    filename = hostingEnv.ContentRootPath.Replace("WebApplication6.Server", "WebApplication6.Client") + $@"\{filename}";
                    size += (int)file.Length;
                    if (!System.IO.File.Exists(filename))
                    {
                        using (FileStream fs = System.IO.File.Create(filename))
                        {
                            file.CopyTo(fs);
                            fs.Flush();
                        }
                    }
                }
                Response.Headers.Add("custom-header", "Syncfusion");
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "Syncfusion Upload";
            }
            catch (Exception e)
            {
                Response.Clear();
                Response.StatusCode = 204;
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
            }
        }

[index.razor]


@using Newtonsoft.Json;
@using Newtonsoft.Json.Converters;

<EjsUploader Id="UploadFiles" AutoUpload="true" Success="@OnSuccess">
    <UploaderAsyncSettings SaveUrl="api/SampleData/Save" RemoveUrl="api/SampleData/Remove"></UploaderAsyncSettings>
</EjsUploader>
<p>Additional Header Text is: @HeaderData</p>
<p>Additional Response Data is: @ResponseData</p>

@code{
public string HeaderData;

public string ResponseData;

public void OnSuccess(object args)
{

    SuccessEventArgs eventArgs = JsonConvert.DeserializeObject<SuccessEventArgs>(args.ToString());
    HeaderData = eventArgs.Response.Headers;
    ResponseData = eventArgs.Response.StatusText;
    this.StateHasChanged();
}
//Success event args class.
public class SuccessEventArgs
{
    public object E { get; set; }
    public FileInfo File { get; set; }
    public string StatusText { get; set; }
    public string Name { get; set; }
    public string Operation { get; set; }
    public ResponseEventArgs Response { get; set; }
}

public class ResponseEventArgs
{
    public string Headers { get; set; }
    public object ReadyState { get; set; }
    public object StatusCode { get; set; }
    public string StatusText { get; set; }
    public bool withCredentials { get; set; }
}
}


And, you need to enable the allow header option in the Startup.cs file as mentioned in the below code example.


  public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc().AddNewtonsoftJson();
            services.AddResponseCompression(opts =>
            {
                opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(
                    new[] { "application/octet-stream" });
            });
            services.AddCors(options =>
            {
                options.AddPolicy("EnableCORS", builder =>
                {
                    builder.AllowAnyOrigin().AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials().Build();
                });
            });
        }

我们已经准备好样品并附在下面。

样本Link: https://www.syncfusion.com/downloads/support/directtrac/242743/ze/WebApplication6_additional_data-460323506

此外，目前我们正在努力为成功事件参数提供特定类型，这种支持将包含在我们计划于 2019 年 8 月中旬发布的补丁中。感谢您在此之前的耐心等待。

您可以通过以下反馈跟踪问题的状态 link。

Link: https://www.syncfusion.com/feedback/7647/need-to-provide-specific-type-for-success-event-arguments-in-the-uploader

我如何将数据从控制器传递到 Blazor 上的视图？

How I can pass data from Controller to Views on Blazor?

c#

controller

syncfusion

blazor-server-side