jjzjj

javascript - 如何在 Blazor 中执行客户端 UI 事件

coder 2024-05-07 原文

我刚刚开始使用 Blazor，我已经可以看到这个新框架的巨大潜力。

不过，我想知道它将如何处理简单的事情，例如将焦点设置在输入控件上？例如，在我处理了一个点击事件之后，我想将焦点设置到一个文本输入控件上。我是否必须使用 JQuery 来处理类似的事情，或者 Blazor 是否会为此类事情提供一些内置方法？

谢谢

更新:我在下面发布了一个答案，其中包含一个示例，说明如何通过从 .Net 代码调用 JavaScript 函数来将焦点设置到控件。

从现在开始(Blazor 0.9.0)，您在 Index.html 中创建 JavaScript 函数(或从 Index.html 中引用它们)，然后在您的 Blazor 页面或组件中调用 JsRuntime.InvokeAsync("functionName",参数)；

https://learn.microsoft.com/en-us/aspnet/core/razor-components/javascript-interop

最佳答案

Blazor 只是 JavaScript 的替代品(更准确地说是“增值”)。它是一个仅限客户端的解决方案(但它可能会在将来添加一些与 ASP.NET 的简单绑定(bind))。

不过，它完全基于 HTML 和 CSS。 C# 正在使用 Web 程序集替换 JS 部分。因此，您访问/修改 HTML 控件的方式没有任何变化。

截至目前(版本 0.1.0)，您必须依赖 HTML DOM focus() 方法来执行您打算执行的操作(是的，您必须使用 JavaScript 截至目前 :( ).

// Not tested code
// This is JavaScript. 
// Put this inside the index.html. Just below <script type="blazor-boot"></script>
<script>
    Blazor.registerFunction('Focus', (controlId) => {
      return document.getElementById(controlId).focus();
    });
</script>

//and then wrap it for calls from .NET:    
// This is C#

public static object Focus(string controlId)
{
    return RegisteredFunction.Invoke<object>("Focus", controlId);
    //object type is used since Invoke does not have a overload for void methods. Don't know why. 
    //this will return undefined according to js specs
}

更多信息，您可以引用下文。

如果你想把 JS 的包装整齐地改进，你可以这样做: https://stackoverflow.com/a/49521216/476609 

public class BlazorExtensionScripts : Microsoft.AspNetCore.Blazor.Components.BlazorComponent
{
    protected override void BuildRenderTree(Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "script");
        builder.AddContent(1, "Blazor.registerFunction('Focus', (controlId) => { document.getElementById(controlId).focus(); });");
        builder.CloseElement();
    }

    public static void Focus(string controlId)
    {
        RegisteredFunction.Invoke<object>("Focus", controlId);
    }
}

然后将此组件添加到根:(App.cshtml):

<BlazorExtensionScripts></BlazorExtensionScripts>
<Router AppAssembly=typeof(Program).Assembly />

关于javascript - 如何在 Blazor 中执行客户端 UI 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49460516/

何在javascriptBlazorcontrolIdsectionc#asp.net-corejavascript-interop

有关javascript - 如何在 Blazor 中执行客户端 UI 事件的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  3. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时，我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb，在下面的代码片段中:moduleNetclass

  4. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

    如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

  5. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  6. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  7. ruby - 如何在续集中重新加载表模式？ - 2

    鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

  8. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  9. ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2

    我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

  10. ruby - Chef 执行非顺序配方 - 2

    我遵循了教程http://gettingstartedwithchef.com/,第1章。我的运行list是"run_list":["recipe[apt]","recipe[phpap]"]我的phpapRecipe默认Recipeinclude_recipe"apache2"include_recipe"build-essential"include_recipe"openssl"include_recipe"mysql::client"include_recipe"mysql::server"include_recipe"php"include_recipe"php::modul

随机推荐