azor 同時支持 C# (C sharp) 和 VB (Visual Basic)。
主要的 Razor C# 語法規則
Razor 代碼塊包含在 @{ ... } 中
內聯表達式(變量和函數)以 @ 開頭
代碼語句用分號結束
變量使用 var 關鍵字聲明
字符串用引號括起來
C# 代碼區分大小寫
C# 文件的擴展名是 .cshtml
C# 實例
<!-- Single statement block -->
@{ var myMessage ="Hello World"; }
<!-- Inline expression or variable -->
<p>The value of myMessage is: @myMessage</p>
<!--Multi-statement block -->
@{
var greeting = "Welcome to our site!";
var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Here in Huston it is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>
運行實例 ?
主要的 Razor VB 語法規則
Razor 代碼塊包含在 @Code ... End Code 中
內聯表達式(變量和函數)以 @ 開頭
變量使用 Dim 關鍵字聲明
字符串用引號括起來
VB 代碼不區分大小寫
VB 文件的擴展名是 .vbhtml
實例
<!-- Single statement block -->
@Code dim myMessage = "Hello World" End Code
<!-- Inline expression or variable -->
<p>The value of myMessage is: @myMessage</p>
<!-- Multi-statement block -->
@Code
dim greeting = "Welcome to our site!"
dim weekDay = DateTime.Now.DayOfWeek
dim greetingMessage = greeting & " Here in Huston it is: " & weekDay
End Code
<p>The greeting is: @greetingMessage</p>
運行實例 ?
它是如何工作的?
Razor 是一種將服務器代碼嵌入在網頁中的簡單的編程語法。
Razor 語法是基于 ASP.NET 框架,專門用于創建 Web 應用程序的部分 Microsoft.NET 框架。
Razor 語法支持所有 ASP.NET 的功能,但是使用的是一種簡化語法,對初學者而言更容易學習,對專家而言更有效率的。
Razor 網頁可以被描述成帶以下兩種類型內容的 HTML 網頁: HTML 內容和 Razor 代碼。
當服務器讀取頁面時,它首先運行 Razor 代碼,然后再發送 HTML 頁面到瀏覽器。在服務器上執行的代碼能夠執行一些在瀏覽器上不能完成的任務,比如,訪問服務器數據庫。服務器代碼能創建動態的 HTML 內容,然后發送到瀏覽器。從瀏覽器上看,服務器代碼生成的 HTML 與靜態的 HTML 內容沒有什么不同。
帶 Razor 語法的 ASP.NET 網頁有特殊的文件擴展名 cshtml(Razor C#)或者 vbhtml(Razor VB)。
使用對象
服務器編碼往往涉及到對象。
"Date" 對象是一個典型的內置的 ASP.NET 對象,但對象也可以是自定義的,一個網頁,一個文本框,一個文件,一個數據庫記錄,等等。
對象有用于執行的方法。一個數據庫記錄可能有一個 "Save" 方法,一個圖像對象可能有一個 "Rotate" 方法,一個電子郵件對象可能有一個 "Send" 方法,等等。
對象也有用于描述各自特點的屬性。一個數據庫記錄可能有 FirstName 和 LastName 屬性。
ASP.NET Date 對象有一個 Now 屬性(寫成 Date.Now),Now 屬性有一個 Day 屬性(寫成 Date.Now.Day)。下面實例演示了如何訪問 Data 對象的一些屬性:
實例
<table border="1">
<tr>
<th width="100px">Name</th>
<td width="100px">Value</td>
</tr>
<tr>
<td>Day</td><td>@DateTime.Now.Day</td>
</tr>
<tr>
<td>Hour</td><td>@DateTime.Now.Hour</td>
</tr>
<tr>
<td>Minute</td><td>@DateTime.Now.Minute</td>
</tr>
<tr>
<td>Second</td><td>@DateTime.Now.Second</td>
</tr>
</td>
</table>
運行實例 ?
If 和 Else條件
動態網頁的一個重要特點是,您可以根據條件決定做什么。
做到這一點的常用方法是使用 if ... else 語句:
實例
@{
var txt = "";
if(DateTime.Now.Hour > 12)
{txt = "Good Evening";}
else
{txt = "Good Morning";}
}
<html>
<body>
<p>The message is @txt</p>
</body>
</html>
日常工作中(主要使用ASP.net),我需要編寫很多JavaScript代碼。我做的最重復的任務之一是jQuery Ajax調用。你看:
$.ajax({
type: "POST",
url: "MyPage.aspx/MyWebMethod",
data: "{parameter:value,parameter:value}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
//function called successfull
},
error: function(msg) {
//some error happened
}
});
我不知道對您來說是否相同,但是對我來說用這種語法編寫調用太麻煩了。而且,以前必須按照已知規則使用參數構建字符串以傳遞給WebMethod:字符串必須用引號傳遞,數字不能傳遞,等等。
因此,我決定創建一個小而有用的JavaScript類來幫助我有了這個特定的問題,現在我已經完成了jQuery Ajax調用,這對我來說非常友好。
在類構造函數中,我傳遞頁面名稱,方法名稱以及成功和錯誤函數。以后,我會根據需要對addParam方法進行盡可能多的調用。最后,我調用run方法進行Ajax調用。成功函數和錯誤函數必須分別編寫。
參數根據其類型進行處理。如果參數是字符串,則使用引號。如果是數字,我不會。日期參數是一種特殊情況。在這種情況下,我使用JavaScript日期對象的getTime()函數,該函數給了我自1970年1月1日以來的日期的毫秒數。后來,我將該值轉換為UTC時間,這樣我得到了一個最終的毫秒數,即我可以將Int64值傳遞給我的VB.net(或C#)代碼,用它來重建.Net中的日期值。
這是我的jAjax類的完整列表(末尾帶有日期幫助器功能):
function jAjax(pageName, methodName, successFunc, errorFunc) {
//stores the page name
this.pageName = pageName;
//stores the method name
this.methodName = methodName;
//stores the success function
this.successFunc = successFunc;
//stores the error function
this.errorFunc = errorFunc;
//initializes the parameter names array
this.paramNames = new Array();
//initializes the parameter values array
this.paramValues = new Array();
//method for add a new parameter (simply pushes to the names and values arrays)
this.addParam = function(name, value) {
this.paramNames.push(name);
this.paramValues.push(value);
}
//method to run the jQuery ajax request
this.run = function() {
//initializes the parameter data string
var dataStr = '{';
//iterate thru the parameters arrays to compose the parameter data string
for (var k = 0; k < this.paramNames.length; k++) {
//append the parameter name
dataStr += this.paramNames[k] + ':';
if (typeof this.paramValues[k] == 'string') {
//string parameter, append between quotes
dataStr += '"' + this.paramValues[k] + '",';
} else if (typeof this.paramValues[k] == 'number') {
//number parameter, append "as-is" calling toString()
dataStr += this.paramValues[k].toString() + ',';
} else if (typeof this.paramValues[k] == 'object') {
if (this.paramValues[k].getTime != undefined) {
//date value
//call to my getUtcTime function to get the number of
//milliseconds (since january 1, 1970) in UTC format
//and append as a number
dataStr += getUtcTime(this.paramValues[k]).toString() + ',';
} else {
//object value
//because I don't know what's this, append the toString()
//output
dataStr += '"' + this.paramValues[k].toString() + '",';
}
}
}
//if some parameter added, remove the trailing ","
if (dataStr.length > 1) dataStr = dataStr.substr(0, dataStr.length - 1);
//close the parameter data string
dataStr += '}';
//do the jQuery ajax call, using the parameter data string
//and the success and error functions
$.ajax({
type: "POST",
url: this.pageName + "/" + this.methodName,
data: dataStr,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
successFunc(msg);
},
error: function(msg) {
errorFunc(msg);
}
});
}
}
function getUtcTime(dateValue) {
//get the number of milliseconds since january 1, 1970
var time = dateValue.getTime();
//get the UTC time offset in minutes. if you created your date with
//new Date(), maybe this contains a value. but if you compose the date
//by yourself (i.e. var myDate = new Date(1984,5,21,12,53,11)) this will
//be zero
var minutes = dateValue.getTimezoneOffset() * -1;
//get the milliseconds value
var ms = minutes * 60000;
//add to the original milliseconds value so we get the GMT exact value
return time + ms;
}
這是使用的語法:
var ajaxCall = new jAjax('MyPage.aspx','MyWebMethod',successFunc,errorFunc);
ajaxCall.addParam('s','this is a string');
ajaxCall.addParam('n',34);
ajaxCall.addParam('d',new Date());
ajaxCall.run();
function successFunc(msg) {
...
}
function errorFunc(msg) {
}
另外一個好處是,您可以將成功和錯誤功能重新用于幾個ajax調用。
希望對您有幫助!!隨時在您的應用程序中使用jAjax類。
繼微軟拋棄IE瀏覽器全面擁抱Chromium內核推出Edge瀏覽器后,一直在關注那老舊的webbrowser未來如何發展。雖然編程語言千千萬,也有人不看好winform編程,但在當前windows依舊占據相當的市場份額。在webbrowser中官方支持的是IE內核,而IE內核又跟你的電腦的安裝版本有關系,再加上IE對各種html前端支持的不友好。vuejs都已經徹底拋棄了IE瀏覽器,遲遲不敢在生產環境大量應用vueweb應用。(有人可能會說可以換webkit或者cesharp內核,筆者也嘗試過,但畢竟不是微軟的親生,各種不友好,各種復雜,webkit都多久沒更新了,根據歷史經驗過于復雜的東西一般很難長久)。
之前關注過webview2,但那段時間剛出支持也不是很友好,無法很有效繼承,有說要安裝edge瀏覽器的,又說要安裝別的,而win7可能又不支持等等,而恰好我們的場景用又存在大量的win7,只能暫時放棄。
最近要應用Vue,重新關注了一下相關應用,很驚喜的發現,webview2有了官方比較好的支持(可能早就有了,但是肯定不會超過1年)微軟官方文檔鏈接WebView2 - Microsoft Edge Developer
如果本文有不對的地方還要以官方文檔為準,研究不深。先說體驗效果,webview2真的很好,內核徹底替換為chromium,Vue項目跑起來了也不用擔心各種不兼容了,終于不用為webbrowser擔憂了。由于項目使用的VB.NET(不要問為甚么不是C#,我會一點,但是用不到),因此考慮到系統中的使用還是集成到了VB.NET中,在搜索過程中發現webview2的資料不多,一些屬性還沒有很好的案例,可能與winform的沒落有關系吧,而且相關介紹均是C#的,也包括官方文檔。因此在基本集成以后,通過這篇文章做簡單分享與記錄。這里的集成比較簡單,主要是滿足WEB和客戶端的混合編程,也是webview2介紹中的重要應用之一,畢竟WEB才是管理系統的未來。
Webview2 加了個2可能是為了跟安卓的webview區分吧,畢竟一搜webview出來的全是安卓的。
Webview2支持win7、win8、win10以及對應的server版本,可以說是涵蓋了windows的江山,具體的版本說明可以參考官方文檔。如果你說還有xp,天就被聊死了,我們不是一路人。
從搜到的帖子看大家對于webview2還是持肯定態度的,比webkit,cefsharp的兼容性要好的多,從我的體驗來講它可以完全替代webbrowser控件,正在生產環境中替代原有webbrowser控件。
Webview2雖然沒有了IE一堆亂糟糟的版本問題,但是Webview2畢竟是依賴與Edge誕生的產品,它依然需要一定的環境,微軟提供了2種方案。
這里選擇的是Webview2 runtime畢竟我們是集成環境,這里可以根據需要選擇。
官方文檔是C#的比較簡單,C#er們自行閱覽即可,畢竟在大神面前我只是個渣渣。
1、引入Webview2
2、關鍵方法、事件
WebView21.CoreWebView2.Navigate(im_ipurl)
Function installruntime()
Try
Dim v As String = WebView21.Source.ToString
Me.Text = ("Copyright ? 2021-2022 lxfamn, All Rights Reserved " )
Catch ex As Exception
If Environment.Is64BitOperatingSystem Then
MsgBox("系統全面升級瀏覽器內核,接下來系統將自動為您安裝補丁,請在彈出窗口選運行,64位系統")
Process.Start("\\運行組件共享路徑\webruntime\X64.exe")
Else
MsgBox("系統全面升級瀏覽器內核,接下來系統將自動為您安裝補丁,請在彈出窗口選運行,32位系統")
Process.Start("\\運行組件共享路徑\webruntime\X64.exe")
End If
End Try
End Function
Private Sub WebView21_CoreWebView2InitializationCompleted(sender As Object, e As CoreWebView2InitializationCompletedEventArgs) Handles WebView21.CoreWebView2InitializationCompleted
installruntime()
WebView21.CoreWebView2.Navigate(im_ipurl & "/home")
End Sub
事件執行流程如下圖所示:
3、最關鍵、復雜的流程
webview與主機程序的交互過程,在原有的webbrowser中在WebBrowser1_DocumentCompleted事件中通過對WebBrowser1.DocumentText的解析可以做進行不同的處理。
在webview2中沒有了上述事件和方法,取而代之的是postMessage,官方案例使用的C#,使用了aysn異步綁定等方式。
簡單可以理解為,提供了WebView21.CoreWebView2.ExecuteScriptAsync和WebView21.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync方法,向站點注入javasript程序來實現相關功能,這里我只使用了ExecuteScriptAsync方法,在NavigationCompleted事件,在頁面加載完成后向主機發送消息,WebView21_WebMessageReceived 事件中接受發送的消息。
Private Sub WebView21_NavigationCompleted(sender As Object, e As CoreWebView2NavigationCompletedEventArgs) Handles WebView21.NavigationCompleted
TextBox1.Text = WebView21.Source.ToString()'導航完成后,在標題欄中顯示當前網址
If (TextBox1.Text.Contains("www.microsoft.com")) Then
WebView21.CoreWebView2.Navigate("https://blog.lxfamn.cn/?cat=101")
End If
WebView21.CoreWebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.body.innerHTML);")
End Sub
Private Sub WebView21_WebMessageReceived(sender As Object, e As CoreWebView2WebMessageReceivedEventArgs) Handles WebView21.WebMessageReceived
webdeal(e.WebMessageAsJson.ToString)'根據接收的消息進行邏輯處理
End Sub
4、其他的一些
建議結合官方文檔進行閱覽,理解一些方法和規則,一些方法和過程在官方文檔中解釋還是比較清楚的,本文主要是幫助解釋一些在vb.net以及一些邏輯等問題的解釋。
附上一些處理url自動補充前綴的方法
Function geturl(dealway As String)
Try
Dim urlstr As String = TextBox1.Text
If Not urlstr.Contains("http") Then
Dim re As New Regex("((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}")
Dim Contents As MatchCollection = re.Matches(urlstr)
Dim rea As New Regex("[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?")
Dim Contentsa As MatchCollection = rea.Matches(urlstr)
If Contentsa.Count > 0 Or Contents.Count > 0 Then
urlstr = "http://" & urlstr
Else
If dealway = "百度" Then
urlstr = "https://www.baidu.com/s?wd=" & urlstr
End If
If dealway = "blog" Then
urlstr = "https://blog.lxfamn.cn/?cat=101"
End If
End If
End If
WebView21.CoreWebView2.Navigate((urlstr))
Catch
installruntime()
End Try
End Function
界面布局
有問題之處歡迎指正
個人博客:VB.NET Edge webview2 引入-IT涉獵者
未經允許不得轉載:https://blog.lxfamn.cn/?p=6698
*請認真填寫需求信息,我們會在24小時內與您取得聯系。