web-dev-qa-db-ja.com

javascript変数からかみそり変数に値を渡す方法は？

Javascript変数からカミソリ変数に値を渡す方法、asp.net mvcカミソリビューエンジンは可能ですか？

@{
    int a = 0;
}

<script>
    var b = ...
    @a = b;
</script>
javascriptc#razor
33
user4208535

できません。理由は、彼らが同時に「生きて」いないからです。 Razor変数は「サーバー側変数」であり、ページが「クライアント側」に送信された後はもう存在しません。

サーバーがビューの要求を取得すると、HTML、CSS、およびJavascriptコードのみでビューを作成します。 C＃コードは残っていません。すべてクライアント側の言語に「翻訳」されます。

Javascriptコードは、ビューがまだサーバー上にあるときに存在しますが、無意味であり、ブラウザーのみによって実行されます（クライアント側）。

これが、Razor変数を使用してHTMLとJavascriptを変更できるが、その逆はできない理由です。ページのソースコード（ほとんどのブラウザーではCtrl + U）を確認してください。C＃コードの兆候はありません。

要するに：

  1. サーバーはリクエストを取得します。

  2. サーバーはビューを作成し、ビューに埋め込まれたすべてのC＃コードを計算して、CSS、Javascript、およびHTMLに変換します。

  3. サーバーは、要求に対する応答として、クライアント側のビューをブラウザーに返します。
  4. ブラウザはページをレンダリングし、すべてのJavascriptを実行します
50
some_name

しかし、@ html.Hiddenフィールドの変数の代わりに使用された場合は可能です。この例のように。

@Html.Hidden("myVar", 0);

スクリプトごとにフィールドを設定します。

<script>
function setMyValue(value) {
     $('#myVar').val(value);       
}
</script>

少なくとも小さな回避策を提供できないことを願っています。

37
Carsten Cors

さて、この質問は古い...ですが、私は似たようなことをしたかったので、自分に合った解決策を見つけました。たぶんそれは他の誰かを助けるかもしれません。

ドロップダウンを埋めるList<QuestionType>があります。その選択を、フォームで作成しているQuestionTypeオブジェクトのQuestionプロパティに配置します。 selectバインディングにKnockout.jsを使用しています。これにより、ユーザーが選択したときにself.QuestionType knockout observableプロパティがQuestionTypeオブジェクトに設定されます。

<select class="form-control form-control-sm"
    data-bind="options: QuestionTypes, optionsText: 'QuestionTypeText', value: QuestionType, optionsCaption: 'Choose...'">
</select>

このオブジェクトを保持する隠しフィールドがあります。

@Html.Hidden("NewQuestion.QuestionTypeJson", Model.NewQuestion.QuestionTypeJson)

オブザーバブルのサブスクリプションでは、隠しフィールドをJSON.stringify- edバージョンのオブジェクトに設定します。

self.QuestionType.subscribe(function(newValue) {
    if (newValue !== null && newValue !== undefined) {                       
        document.getElementById('NewQuestion_QuestionTypeJson').value = JSON.stringify(newValue);
    }
});

Questionオブジェクトには、ユーザーが質問タイプを選択したときに入力されるQuestionTypeJsonというフィールドがあります。このフィールドを使用して、次のようにQuestionTypeオブジェクトのQuestionを取得します。

public string QuestionTypeJson { get; set; }

private QuestionType _questionType = new QuestionType();
public QuestionType QuestionType
{
    get => string.IsNullOrEmpty(QuestionTypeJson) ? _questionType : JsonConvert.DeserializeObject<QuestionType>(QuestionTypeJson);
    set => _questionType = value;
}

したがって、QuestionTypeJsonフィールドに何かが含まれている場合は、それをデシリアライズしてQuestionTypeに使用します。そうでない場合は、バッキングフィールドにあるものを使用します。

RazorまたはAjax呼び出しを使用せずに、基本的にJavaScriptオブジェクトをモデルに「渡しました」。あなたはおそらくKnockout.jsを使用せずにこれに似た何かをすることができますが、それは私がそう使用しているものです...

1
Barry Franklin

手順：1 Html、最初にjavascriptを使用して値をlocalstorageに保存し、次に以下のような行を追加します。これは、htmlで値を表示する場所です。私の例はboostrapに基づいています。

<label for="stringName" class="cols-sm-2 control-
label">@Html.Hidden("stringName", "")</label>

ステップ：2 JavaScript

 $('#stringName').replaceWith(localStorage.getItem("itemName"));
0
Bulelani Cimani

この問題は少し前に議論されたことがわかりますが、誰かが再びこれに会うなら、ここに私の解決策があります：

* .cshtml Viewファイルで：

<script>
var data = JsFunction("@Html.Raw(Model.Path)");
$(function () {
    $("#btn").click(function () {
        var model = { Id: '@Html.Raw(Model.Id)', Data: data }
        $.ajax({
            type: "POST",
            url: "/Controller/Action",
            data: model,
            datatype: "html",
            success: function() {
                console.log('Success');
            }
        });
    });
});
</script>

JavaScript変数モデルは、Razor ViewModelに渡す必要があるものです。これは、ajaxリクエストで実行できます。 JavaScriptで作成されたJsonオブジェクトと一致する適切な引数をアクションに含める必要があります。

それが誰かを助けることを願っています！

0
Mjollnir951