將 C# 內聯變量傳遞給 ASP.Net 應用程序中的 Javascript 函數

Question

我在 ASP.Net 應用程序中有一個非常簡單的按鈕單擊事件，它調用一個非常簡單的 javascript 函數將傳遞給該函數的文本字符串導出到一個 csv 文件。 如果我向它傳遞一個像這樣的原始字符串，按鈕單擊事件及其調用的函數就可以完美運行：

<button onclick="download_csv('TEST')">Download CSV</button> 

但是，如果我像這樣傳遞 C# 內聯字符串變量，它就會中斷。

<button onclick="download_csv(<%=csvExport%>)">Download CSV</button>

這是javascript函數。

function download_csv(x) {

var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(x);
hiddenElement.target = '_blank';
hiddenElement.download = 'pricing.csv';
hiddenElement.click();
}

csvExport 變量在 .aspx 文件后面的 .cs 文件中聲明，並填充了一個簡單的文本字符串； 我現在實際上已經將它設置為“測試”以進行測試。 我試過用單引號包裝 csvExport ，但這似乎也不起作用。 我一定錯過了一些非常簡單的東西。

Answer 1

它充滿了一個簡單的文本字符串

字符串需要引號，無論是在 C# 中還是在 JavaScript 中。 您的硬編碼示例包含它們：

<button onclick="download_csv('TEST')">Download CSV</button>

但是您的動態示例沒有：

<button onclick="download_csv(<%=csvExport%>)">Download CSV</button>

查看生成的頁面源以查看值：

<button onclick="download_csv(Test)">Download CSV</button>

以及由此產生的瀏覽器開發控制台中的語法錯誤。 （這兩個應該始終是您首先查看的地方。如果您不熟悉瀏覽器的開發工具，請在 Chrome 中按 F12。那里有很多開發和調試功能。）

我試過用單引號包裝 csvExport

您沒有顯示該嘗試，但從該描述來看，您似乎嘗試在服務器端代碼中執行此操作。 它將只輸出字符串值"csvExport"但在您的 JavaScript 代碼中沒有引號，由於相同的原因，它會以相同的方式失敗。

只需將您的報價放回原處：

<button onclick="download_csv('<%=csvExport%>')">Download CSV</button>

Answer 2

基本上，您缺少文本周圍的引號。 您可以通過使用 Chrome 的開發工具檢查頁面的源代碼並查看 .net 實際輸出的內容來對此進行調試。

此外，如果您的下載鏈接可能包含用戶數據，那么使用HttpUtility.JavaScriptStringEncode對其進行轉義以防止 XSS非常重要

<button onclick="download_csv('<%= HttpUtility.JavaScriptStringEncode(csvExport) %>')">Download CSV</button>