嗨，大家好！我是码农刚子。今天我们来聊聊Blazor中C#与JavaScript互操作。我知道很多同学在听到"Blazor"和"JavaScript"要一起工作时会有点懵，但别担心，我会用最简单的方式带你掌握这个技能！
为什么要学JavaScript互操作？
想象一下：你正在用Blazor开发一个超棒的应用，但突然需要用到某个只有JavaScript才能实现的炫酷效果，或者要集成一个超好用的第三方JS库。这时候，JavaScript互操作就是你的救星！
简单来说，它让Blazor和JavaScript可以"握手合作"，各展所长。下面我们就从最基础的部分开始。
1. IJSRuntime - 你的JavaScript通行证
在Blazor中，IJSRuntime是与JavaScript沟通的桥梁。获取它超级简单：
@inject IJSRuntime JSRuntime <button @onclick="ShowAlert">点我弹窗！</button> @code { private async Task ShowAlert() { await JSRuntime.InvokeVoidAsync("alert", "Hello from Blazor!"); } }
就两行关键代码：
@inject IJSRuntime JSRuntime- 拿到通行证InvokeVoidAsync- 调用不返回值的JS函数
实际场景：比如用户完成某个操作后，你想显示一个提示，用这种方式就特别方便。
2. 调用JavaScript函数 - 不只是简单弹窗
当然，我们不会只满足于弹窗。来看看更实用的例子：
首先，在wwwroot/index.html中添加我们的JavaScript工具函数：
<script> // 创建命名空间避免全局污染 window.myJsHelpers = { showNotification: function (message, type) { // 模拟显示一个漂亮的提示框 const notification = document.createElement('div'); notification.style.cssText = ` position: fixed; top: 20px; right: 20px; padding: 15px 20px; border-radius: 5px; color: white; z-index: 1000; transition: all 0.3s ease; `; if (type === 'success') { notification.style.backgroundColor = '#28a745'; } else if (type === 'error') { notification.style.backgroundColor = '#dc3545'; } else { notification.style.backgroundColor = '#17a2b8'; } notification.textContent = message; document.body.appendChild(notification); // 3秒后自动消失 setTimeout(() => { notification.remove(); }, 3000); }, getBrowserInfo: function () { return { userAgent: navigator.userAgent, language: navigator.language, platform: navigator.platform }; }, // 带参数的计算函数 calculateDiscount: function (originalPrice, discountPercent) { return originalPrice * (1 - discountPercent / 100); } }; </script>
然后在Blazor组件中使用：
@inject IJSRuntime JSRuntime <div class="demo-container"> <h3>JavaScript函数调用演示</h3> <button @onclick="ShowSuccessNotification" class="btn btn-success"> 显示成功提示 </button> <button @onclick="ShowErrorNotification" class="btn btn-danger"> 显示错误提示 </button> <button @onclick="GetBrowserInfo" class="btn btn-info"> 获取浏览器信息 </button> <button @onclick="CalculatePrice" class="btn btn-warning"> 计算折扣价格 </button> @if (!string.IsNullOrEmpty(browserInfo)) { <div class="alert alert-info mt-3"> <strong>浏览器信息:</strong> @browserInfo </div> } @if (discountResult > 0) { <div class="alert alert-success mt-3"> <strong>折扣价格:</strong> ￥@discountResult </div> } </div> @code { private string browserInfo = ""; private decimal discountResult; private async Task ShowSuccessNotification() { await JSRuntime.InvokeVoidAsync("myJsHelpers.showNotification", "操作成功！数据已保存。", "success"); } private async Task ShowErrorNotification() { await JSRuntime.InvokeVoidAsync("myJsHelpers.showNotification", "出错了！请检查网络连接。", "error"); } private async Task GetBrowserInfo() { var info = await JSRuntime.InvokeAsync<BrowserInfo>("myJsHelpers.getBrowserInfo"); browserInfo = $"语言: {info.Language}, 平台: {info.Platform}"; } private async Task CalculatePrice() { discountResult = await JSRuntime.InvokeAsync<decimal>( "myJsHelpers.calculateDiscount", 1000, 20); // 原价1000，8折 } // 定义接收复杂对象的类 private class BrowserInfo { public string UserAgent { get; set; } public string Language { get; set; } public string Platform { get; set; } } }
Note：
- 使用
InvokeVoidAsync调用不返回值的函数 - 使用
InvokeAsync<T>调用有返回值的函数，记得指定返回类型 - 复杂对象会自动序列化/反序列化
3. 把.NET方法暴露给JavaScript - 双向操作
有时候，我们也需要让JavaScript能调用我们的C#方法。这就用到[JSInvokable]特性了。
@inject IJSRuntime JSRuntime @implements IDisposable <div class="demo-container"> <h3>.NET方法暴露演示</h3> <div class="mb-3"> <label>消息内容:</label> <input @bind="message" class="form-control" /> </div> <div class="mb-3"> <label>重复次数:</label> <input type="number" @bind="repeatCount" class="form-control" /> </div> <button @onclick="RegisterDotNetMethods" class="btn btn-primary"> 注册.NET方法给JavaScript使用 </button> <div id="js-output" class="mt-3 p-3 border rounded"> <!-- JavaScript会在这里输出内容 --> </div> </div> @code { private string message = "Hello from .NET!"; private int repeatCount = 3; private DotNetObjectReference<MyComponent> dotNetHelper; protected override void OnInitialized() { dotNetHelper = DotNetObjectReference.Create(this); } private async Task RegisterDotNetMethods() { await JSRuntime.InvokeVoidAsync("registerDotNetHelper", dotNetHelper); } [JSInvokable] public string GetFormattedMessage() { return string.Join(" ", Enumerable.Repeat(message, repeatCount)); } [JSInvokable] public async Task<string> ProcessDataAsync(string input) { // 模拟一些异步处理 await Task.Delay(500); return $"处理后的数据: {input.ToUpper()} (处理时间: {DateTime.Now:HH:mm:ss})"; } [JSInvokable] public void ShowAlert(string alertMessage) { // 这个方法会被JavaScript调用 // 在实际应用中，你可能会更新组件状态或触发其他操作 Console.WriteLine($"收到JavaScript的警告: {alertMessage}"); } public void Dispose() { dotNetHelper?.Dispose(); } }
对应的JavaScript代码：
// 在index.html中添加 function registerDotNetHelper(dotNetHelper) { // 存储.NET引用供后续使用 window.dotNetHelper = dotNetHelper; // 演示调用.NET方法 callDotNetMethods(); } async function callDotNetMethods() { if (!window.dotNetHelper) { console.error('.NET helper 未注册'); return; } try { // 调用无参数的.NET方法 const message = await window.dotNetHelper.invokeMethodAsync('GetFormattedMessage'); // 调用带参数的异步.NET方法 const processed = await window.dotNetHelper.invokeMethodAsync('ProcessDataAsync', 'hello world'); // 调用void方法 window.dotNetHelper.invokeMethodAsync('ShowAlert', '这是从JS发来的消息！'); // 在页面上显示结果 const output = document.getElementById('js-output'); output.innerHTML = ` <strong>来自.NET的消息:</strong> ${message}<br> <strong>处理后的数据:</strong> ${processed} `; } catch (error) { console.error('调用.NET方法失败:', error); } }
Note：
- 记得使用
DotNetObjectReference来创建引用 - 使用
Dispose()及时清理资源 - 异步方法要返回
Task或Task<T>
4. 使用JavaScript库 - 集成第三方神器
这是最实用的部分！让我们看看如何集成流行的JavaScript库。
示例：集成Chart.js图表库
首先引入Chart.js：
<!-- 在index.html中 --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
创建图表辅助函数：
// 在index.html中或单独的JS文件 window.chartHelpers = { createChart: function (canvasId, config) { const ctx = document.getElementById(canvasId).getContext('2d'); return new Chart(ctx, config); }, updateChart: function (chart, data) { chart.data = data; chart.update(); }, destroyChart: function (chart) { chart.destroy(); } };
Blazor组件：
@inject IJSRuntime JSRuntime @implements IDisposable <div class="chart-demo"> <h3>销售数据图表</h3> <canvas id="salesChart" width="400" height="200"></canvas> <div class="mt-3"> <button @onclick="LoadSalesData" class="btn btn-primary">加载销售数据</button> <button @onclick="SwitchToProfitChart" class="btn btn-secondary">切换到利润图表</button> </div> </div> @code { private IJSObjectReference chartInstance; private bool isSalesData = true; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { await InitializeChart(); } } private async Task InitializeChart() { var config = new { type = "bar", data = new { labels = new[] { "一月", "二月", "三月", "四月", "五月" }, datasets = new[] { new { label = "销售额", data = new[] { 65, 59, 80, 81, 56 }, backgroundColor = "rgba(54, 162, 235, 0.5)", borderColor = "rgba(54, 162, 235, 1)", borderWidth = 1 } } }, options = new { responsive = true, plugins = new { title = new { display = true, text = "月度销售数据" } } } }; chartInstance = await JSRuntime.InvokeAsync<IJSObjectReference>( "chartHelpers.createChart", "salesChart", config); } private async Task LoadSalesData() { var newData = new { labels = new[] { "一月", "二月", "三月", "四月", "五月", "六月" }, datasets = new[] { new { label = "销售额", data = new[] { 65, 59, 80, 81, 56, 75 }, backgroundColor = "rgba(54, 162, 235, 0.5)" } } }; await JSRuntime.InvokeVoidAsync("chartHelpers.updateChart", chartInstance, newData); } private async Task SwitchToProfitChart() { isSalesData = !isSalesData; var newData = isSalesData ? new { labels = new[] { "Q1", "Q2", "Q3", "Q4" }, datasets = new[] { new { label = "销售额", data = new[] { 100, 120, 110, 130 }, backgroundColor = "rgba(54, 162, 235, 0.5)" } } } : new { labels = new[] { "Q1", "Q2", "Q3", "Q4" }, datasets = new[] { new { label = "利润", data = new[] { 30, 45, 35, 50 }, backgroundColor = "rgba(75, 192, 192, 0.5)" } } }; await JSRuntime.InvokeVoidAsync("chartHelpers.updateChart", chartInstance, newData); } public async void Dispose() { if (chartInstance != null) { await JSRuntime.InvokeVoidAsync("chartHelpers.destroyChart", chartInstance); } } }
常见问题与解决方案
问题1：JS互操作调用失败
症状：控制台报错，函数未定义
解决：
try { await JSRuntime.InvokeVoidAsync("someFunction"); } catch (JSException ex) { Console.WriteLine($"JS调用失败: {ex.Message}"); // 回退方案 await JSRuntime.InvokeVoidAsync("console.warn", "功能不可用"); }
问题2：性能优化
对于频繁调用的JS函数，可以使用IJSInProcessRuntime：
@inject IJSRuntime JSRuntime @code { private IJSInProcessRuntime jsInProcess; protected override void OnInitialized() { jsInProcess = (IJSInProcessRuntime)JSRuntime; } private void HandleInput(ChangeEventArgs e) { // 同步调用，更高效 jsInProcess.InvokeVoidAsync("handleInput", e.Value.ToString()); } }
问题3：组件销毁时资源清理
@implements IDisposable @code { private DotNetObjectReference<MyComponent> dotNetRef; private IJSObjectReference jsModule; protected override async Task OnInitializedAsync() { dotNetRef = DotNetObjectReference.Create(this); jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>( "import", "./js/myModule.js"); } public async void Dispose() { dotNetRef?.Dispose(); if (jsModule != null) { await jsModule.DisposeAsync(); } } }
Blazor的JavaScript互操作其实没那么难的。记住这几个关键点：
- IJSRuntime 是你的通行证
- InvokeVoidAsync 和 InvokeAsync 是主要工具
- [JSInvokable] 让.NET方法对JS可见
- 及时清理资源 很重要
现在你已经掌握了Blazor与JavaScript互操作的核心技能！试着在自己的项目中实践一下，示例源码更放在仓库：
https://github.com/shenchuanchao/BlazorApp/tree/master/BlazorAppWasm/Pages
以上就是《ASP.NET Core Blazor 核心功能二：Blazor与JavaScript互操作——让Web开发更灵活》的全部内容，希望你有所收获。关注、点赞，持续分享。
