jquery 如何在Blazor Server中使用JS Interop显示员工列表？

hivapdat 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(79)

大家好
我目前在Blazor Server上工作。我有一个名为“getUser”的存储过程，在我的SSMS中连接两个表（User和UserContact），我正在使用jQuery Ajax，我想在单击NavMenu时显示用户列表（存储过程）。但我遇到了一个错误：OnInitializedAsync后的状态为500。
下面是我的代码。
//C#代码

protected override async Task OnInitializedAsync()
  {
      await JSRuntime.InvokeVoidAsync("getCStaffInfo");
  }

//JavaScript函数

window.getCStaffInfo = function () {
    debugger;

    $.ajax({
        url: '/api/user',
        method: 'GET',
        succes: function (data) {
            debugger
            console.log(data);
        }
    });
}

//控制器

[Route("api/[controller]")]
[ApiController]
public class UserController: ControllerBase
{
    private readonly SampleUserDbContext _context;

    public UserController(SampleUserDbContext context)
    {
        _context = context;
    }

    [HttpGet]
    public async Task<ActionResult<IEnumerable<User>>> GetCStaffInfo()
    {
        // Execute the stored procedure and return the results
        var user = await _context.User.FromSqlRaw("EXECUTE getCstaffInfo").ToListAsync();

        return user;
    }
}

//Program.cs

app.UseMapControllers();

注意：我也尝试使用服务获取，但仍然发生相同的错误。

jquery

来源：https://stackoverflow.com/questions/77257022/how-to-display-list-of-staff-using-js-interop-in-blazor-server

1条答案

按热度按时间

zfciruhq1#

一个最小的例子（我不知道你的User类，所以只是在默认模板中尝试了WeatherForecast类）：
在RazorComponent中：

@inject  IJSRuntime JS

<table class="table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Temp. (C)</th>                
            <th>Summary</th>
        </tr>
    </thead>
</table>



@code{
    
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        await JS.InvokeVoidAsync("ShowWeatherForecast");
    }
}

在wwwroot文件夹下创建一个js文件（myjs.js），并添加jquery代码：

window.ShowWeatherForecast = function () {   
    
    $.ajax({
        url: '/api/weatherforecast',
        method: 'GET',        
        success: function (data) {
            console.log(data)
            var tbody = $("<tbody></tbody>")
            for (i = 0; i < data.length; i++)
            {
                var tr = $("<tr></tr>")
                var td1 = $("<td></td>") 
                
                td1.append(data[i].date)
                var td2 = $("<td></td>")
                td2.append(data[i].temperatureC)
                var td3 = $("<td></td>")
                td3.append(data[i].summary)
               
                tr.append(td1,td2,td3)
                tbody.append(tr)

            }
            $('table').append(tbody); 
        }
    });
}

在_Host.cshtml中添加所需的js文件：

<script src="_framework/blazor.server.js"></script>
    <script src="lib/jquery/jquery.min.js"></script>
    <script src="js/MyJs.js"></script>

API终点：

[Route("api/[controller]")]
    [ApiController]
    public class WeatherForecastController : ControllerBase
    {
        private static readonly string[] Summaries = new[]
        {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
         };
        public IActionResult GetForecastAsync()
        {
            var weatherforecasts=Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                Date = DateOnly.FromDateTime(DateTime.Now).AddDays(index),
                TemperatureC = Random.Shared.Next(-20, 55),
                Summary = Summaries[Random.Shared.Next(Summaries.Length)]
            }).ToArray();
            //notice you have to return object result with 200 statue code to hit success call-back in ajax
            return Ok(weatherforecasts);
        }
    }

现在的结果是：

虽然它可以工作，但我不认为这是一个好的解决方案，通常我们使用httpclient调用API端点，您可以遵循此document

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 如何在Blazor Server中使用JS Interop显示员工列表？

1条答案

相关问题

热门标签

最新问答