6

JavaScript次のようなコードがあります。

slider.setPhotos([
    { "src": "image1", "name": "n1" },
    { "src": "image2", "name": "n2" },
    { "src": "image3", "name": "n3" }
    ]);

srcそして、とnamefromの値を設定したいと思いますC#。

の値が次のようになっていると仮定しますC#。

var images = new string[] {"/images/a1.jpg", "/images/a2.jpg", "/images/a3.jpg"};

var names = new string[] {"First", "Second", "Third"};

JavaScriptこれらの値をコード (つまり、C# コードのページ ロード メソッド)に設定するにはどうすればよいですか?

4

2 に答える 2

7

サーバーでは、データを JSON としてシリアル化する必要があり、非表示の入力フィールドなどを使用して HTML として応答に書き込むことができます。

たとえば、NewtonSoft JSON ライブラリを使用して JSON をシリアル化できます (これはASP MVC 4に組み込まれていますが、Nuget を使用して簡単にインストールできます)。

string json = Newtonsoft.Json.JsonConvert.SerializeObject(images);

次に、json を HTML にレンダリングします (これを行う方法は多数あります)。

Response.Write(string.Concat("<input id='data' type='hidden' value='", json, "' />");

また

HiddenField jsonField = new HiddenField
{
    ID = "data"
};
jsonField.Value = json;
this.Controls.Add(jsonField);

または、クライアントで解析する必要をスキップするスクリプトとして直接記述することもできます (スクリプトが複数回実行される原因となるポストバック/更新パネルの問題を回避するために、HTML メソッドを使用する傾向があります)。

Response.Write(string.Concat("<script type='text/javascript'> var images = ", json, ";</script>");

クライアントでは、この JSON を HTML から読み取って解析できます。最新のブラウザーではこれが組み込まれているか、JSON2 のようなものでポリフィルできます

例えば

var field = document.getElenentById('data');
var images = JSON.parse(field.value);

その後、Javascript オブジェクトとしてデータにアクセスできます。

于 2012-07-24T07:28:36.540 に答える
2

imagesとが同じ長さであると仮定すると、namesこれを使用できます

StringBuilder str = new StringBuilder();

var images = new string[] {"/images/a1.jpg", "/images/a2.jpg", "/images/a3.jpg"};
var names = new string[] {"First", "Second", "Third"};

str.AppendLine("slider.setPhotos([");
for(int i=0; i< images.Length; i++)
{
   str.AppendLine("{ \"src\": "+ images[i] +", \"name\": "+ names[i] +" }");
   str.AppendLine( (i==images.Length-1 ? "]);":","));
}

Page.ClientScript.RegisterClientScriptBlock(
               this.GetType(), "Key007", str.ToString(), true);

このコードは、ページが読み込まれるときにスクリプト ブロックを挿入し、その後、クライアント側コードのどこでもそのスクリプト ブロックを使用できます。

于 2012-07-24T07:29:17.470 に答える