asp.net core mvc和angular项目的一些问题
2021-06-04 04:01
标签:必须 angular 注册表 extern dex UNC template console 自动 最近公司布置任务,用asp.net core mvc和angular改写原来的一个用Silverlight做的项目。从来没搞过,找了两本书看了一天,又看了一天代码,大致心里有底了,就开始动手。没想到一上来就碰到了头痛的问题。 首先是第一次调试后,修改了typescript,却不会自动编译。花了不少功夫才明白,原来不要用缺省的IISExpress,另外建了个调试profile,关键是类型设为Project,这下就方便了。F5调试后,随时修改template或者typescript,马上就自动重新编译。 第二个问题是无法从asp.net core mvc做的web api取到数据。stackoverflow上的一条回答严重误导了我。它说web api和angular不能发布到同一个端口。结果折腾了半天还是不行。用ng serve来加载angular网页,可以从web api取到数据,但以Release模式发布到IIS上就不行了。怀疑是跨域即CORS的问题,但怎么设也不通。折腾了半天,最后用Debug模式发布,可以取到数据了。但是,项目中要求和win form通信。本来win form中使用WebBrowser控件来访问Silverlight,因为WebBrowser控件默认的模式是IE 7.0,而angular不支持IE 7.0,所以无法显示。通过设置注册表,设定为仿真IE 11,但还是无法显示。如果用其它控件,CefSharp可以显示。问题是win form项目需要以Click-once方式部署,而过去和CefSharp这个控件打过交道,Click-once部署时无法将所需dll文件打包进去。查了下资料,现在似乎可以了。但鉴于过去的痛苦经验,不想试。 本来以为很简单的事情,却老是搞不定。最后通过console.log调试,才发现其实是路由问题。以前做过asp.net mvc 1.0,所以知道路由是怎么回事,加了条web api的路由,马上就顺利取到了数据。用WebBrowser控件访问,也成功了。 这下终于明白几点: 1.Debug模式下,缺省是用angular cli来加载angular,运行在和wep api不同的端口,而WebBrowser控件骨子里是IE 7.0,可能不支持CORS,所以访问失败。 2.Release模式下,是用IIS加载静态文件index.html。如果不给web api加路由,所有对/api/。。。路径的访问即调用web api都被转到index.html,所以取不到数据。加一条路由,就能顺利访问/api/ 下面的web api方法。这样,asp.net core mvc做的web api和angular发布到同一端口,和平共处。又因为是同一端口,没有CORS的问题,所以WebBrowser控件可以顺利访问。也就是说,如果通过WebBrowser控件访问angular,必须以Release模式,将web api和angular发布到同一端口,然后为web api加条路由。 第三个问题是如何从angular访问win form里的C#方法。 以前是在C#里,将一个类加上ComVisible(true)属性,然后把这个对象赋给WebBrowser控件的ObjectForScripting属性,就可以在javascript里,通过window.external.来调用了。但是在angular里却不行。也花了点时间,在stackoverlow上找到一条回答,有启发。最后发现应该这样做: 1. index.html里的head部分里加一句 2.这个winformCaller.js里: 3. typescript里,这样调用: 4. 在angular.json文件里,把这个winformCaller.js加到assets一栏。 至于从win form里访问typescript,这样做: 1. webBrowserControl1.InvokeScript("callAngularFromWinform", parameters); 2. 在index.html的body末尾,加一句: 3.callAngular.js: 4. typescript里: 5.同样, 在angular.json文件里,把这个callAngular.js加到assets一栏。 我的理解是因为typescript编译后,函数名字都改了,所以直接InvokeScript不行。 另外值得一提的是这里的 if (typeof(testCall) !== "undefined"),容易误写为if (testCall !== undefined) ,这样写,如果testCall没有参数,倒也行,但这就给人以成功的错误假象。如果testCall有参数,就不正常了。如果不知道这个问题,也要花不少时间调试才能解决。这固然和javascript的设计缺陷有关,或者说这不是javascript的good parts,但必须了解。 解决了部署以及和win form双向通信的问题,剩下的就感觉简单多了,用了一天时间,就改写了全部业务逻辑代码,再花了几天调试界面,就大功告成。 asp.net core mvc和angular项目的一些问题 标签:必须 angular 注册表 extern dex UNC template console 自动 原文地址:https://www.cnblogs.com/badnumber/p/12344965.htmlfunction testCall(arg) {
if (typeof(window.external.foo) !== "undefined") {
window.external.foo(arg);
}
}
export function callWinfom(arg) {
if (typeof(testCall) !== "undefined") {
testCall(arg);
}
}
function callAngularFromWinform(arg) {
window.callAngular(arg);
}
window["callAngular"] = (arg) => {
//做些事情
};
上一篇:Spark on Kubernetes与阿里云的深度整合
下一篇:HTTP
文章标题:asp.net core mvc和angular项目的一些问题
文章链接:http://soscw.com/essay/90230.html