如何將 html 塊從代碼后面（C#）傳遞到 javascript function

Question

我目前正在寫我的期末論文。我有一個小問題。我需要將一個 HTML 塊傳遞給一個 javascript ZC1C425268E68385D1AB5074C17A94FI14Z 的字符串塊。因為它將起作用。這是代碼隱藏中的代碼：

string htmlFlightDetailsJavaScript ;

在字符串中，很少有具有 class 屬性的 div 和表。 像 div class="bla"

ClientScriptManager cs = Page.ClientScript;
StringBuilder csText = new StringBuilder();
csText.Append("fill("+htmlFlightDetailsJavaScript+");");
cs.RegisterStartupScript(this.GetType(), "alert", csText.ToString(), true);

這是我的 javascript function：

function fill(b) 
{
   alert(b);
}

請注意，我的 javascript function 在 ~.aspx 上。

我試圖傳遞沒有在 div 中的類和在字符串中的表的字符串並且它正在工作。但是當我嘗試通過類傳遞它時，它不起作用。有人可以幫助我嗎？

非常感謝

Answer 1

您可以使用ClientScriptManager.RegisterStartupScript方法。

Answer 2

如果htmlFlightDetailsJavaScript中的類采用div class="bla"的形式，您可能必須轉義字符串中的引號或使用單引號，例如div class='bla' 。

Answer 3

使用 RegisterClientScriptBlock() 方法並確保在 HTML 中轉義引號。

"<div 類=\"廢話\">"

Answer 4

這聽起來像無效的 Javascript 正在生成。

這個假設可以通過檢查實際傳輸的 Javascript 並在上下文中驗證整個結果的正確性來驗證。

也就是說，假設生成了這個無效的 Javascript：

alert("<div class="I just broke JS" ...>")

要解決此問題，請確保插入 Javascript 的字符串文字有效。

例如，上面的代碼可以寫成（使用下面的代碼）：

RegisterClientScriptBlock(JsEncoder.Format(@"alert(""{0}"");", theInput))

...並且它不會中斷，因為該字符串之前已轉義。 （看看這個 output 並比較：插入的文字仍然有效 Javascript，即使在theInput中有引號或其他字符。作為額外的獎勵， </script>也可以破壞代碼；-)

這段代碼是“免費使用、修改、出售等等”。 YMMV。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;

namespace sbcjc.sei
{
        public class JsEncoder
        {
            static Regex EncodeLiteralRegex;

            // Format a bunch of literals.
            public static string Format (string format, params object[] items)
            {
                return string.Format(format,
                    items.Select(item => EncodeString("" + item)).ToArray());
            }

            // Given a string, return a string suitable for safe
            // use within a Javascript literal inside a <script> block.
            // This approach errs on the side of "ugly" escaping.
            public static string EncodeString (string value)
            {
                if (EncodeLiteralRegex == null) {
                    // initial accept "space to ~" in ASCII then reject quotes 
                    // and some XML chars (this avoids `</script>`, `<![CDATA[..]]>>`, and XML vs HTML issues)
                    // "/" is not allowed because it requires an escape in JSON
                    var accepted = Enumerable.Range(32, 127 - 32)
                        .Except(new int[] { '"', '\'', '\\', '&', '<', '>', '/' });
                    // pattern matches everything but accepted
                    EncodeLiteralRegex = new Regex("[^" +
                        string.Join("", accepted.Select(c => @"\x" + c.ToString("x2")).ToArray())
                        + "]");
                }
                return EncodeLiteralRegex.Replace(value ?? "", (match) =>
                {
                    var ch = (int)match.Value[0]; // only matches a character at a time
                    return ch <= 127
                        ? @"\x" + ch.ToString("x2") // not JSON
                        : @"\u" + ch.ToString("x4");
                });
            }
        }
}

快樂編碼。

Answer 5

如果您使用 ajax 調用和部分控件（用戶控件）或自己編寫內容，我想您可以更快地完成。

1) 用戶控件將呈現您的 html 數據。 2) 后面的頁面代碼會接收到 ajax 調用並調用方法 thal 將呈現部分控制或寫入。 3) 該方法將寫入 Response.Output stream 並結束響應 (Response.End()) 4) javascript 將處理響應並顯示結果。

（使用 jQuery）

// main.js

jQuery.ajax({
    type: 'POST',
    data: { isajax: true, ajaxcall: 'MyMethod' },
    dataType: 'html',
    success: function (data, textStatus, jqXHR) {
        alert(data);
    }
});

// CodeBehind
protected void Page_Load(object sender, EventArgs e)
{
    if (Request.HttpMethod == "POST" && Request["isajax"] == "true")
    {
        this.AjaxCall(Request);
    }
}

private void AjaxCall(HttpRequest request)
{
    switch (request["ajaxcall"])
    {
        case "MyMethod": this.MyMethod(request); break;
        default: break;
    }
}

private void MyMethod(HttpRequest request)
{
    Response.ContentType = "text/html";

    Response.Write("YOUR CONTENT GOES HERE.");
    // Or, render a User Control

    Response.End();
}

PS：如果您願意，可以使用通用處理程序。 只需將 url 選項添加到 jQuery ajax 方法即可。

讓我知道它是否有幫助。

Answer 6

我會退后一步檢查整個 HTML 塊是否真的如此動態，以至於需要將其作為參數傳遞到 function 中。

更簡單的方法是將 HTML 元素作為頁面的一部分發出，然后從 function 中增加它。 IE。 顯示或隱藏它。

如果您的方案仍需要您將 HTML 作為參數傳遞，則需要HTML 在服務器端對整個字符串進行編碼，然后在 JS 中進行Unencode 。