如何将值从 javascript 变量传递给 razor 变量？

Question

如何将值从 javascript 变量传递给 razor 变量，是否可以 asp.net mvc razor 视图引擎？

@{
    int a = 0;
}

<script>
    var b = ...
    @a = b;
</script>

Answer 1

你不能。原因是他们不在同一时间“生活”。 Razor 变量是“服务器端变量”，在页面发送到“客户端”后它们不再存在。

当服务器收到视图请求时，它仅使用 HTML、CSS 和 Javascript 代码创建视图。没有留下 C# 代码，它都被“翻译”成客户端语言。

当视图仍在服务器上时，Javascript 代码确实存在，但它没有意义，只会由浏览器执行（再次是客户端）。

这就是为什么您可以使用 Razor 变量来更改 HTML 和 Javascript，但反之则不行。尝试查看您的页面源代码（在大多数浏览器中为 CTRL+U），那里不会有 C# 代码的迹象。

简而言之：

服务器收到一个请求。
服务器创建或“获取”视图，然后计算视图中嵌入的所有 C# 代码并将其转换为 CSS、Javascript 和 HTML.
服务器returns客户端版本将浏览器的视图作为对请求的响应。（此时不再有 C#）
浏览器渲染页面并执行所有Javascript

Answer 2

但如果用一个代替@html.Hidden 字段中的变量，那将是可能的。如本例所示。

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

设置每个脚本的字段：

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

我希望我至少可以提供不小的解决方法。

Answer 3

我看到前段时间有人讨论过这个问题，但如果有人再次遇到这个问题，这是我的解决方案：

在您的 *.cshtml 查看文件中：

<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 请求来完成。您只需要在您的操作中有适当的 argument/s，匹配在 JavaScript 中创建的 Json 对象。

希望对大家有所帮助！

Answer 4

步骤：1 您的 Html，首先使用 javascript 将值存储在本地存储中，然后添加如下行，这是您要在 html 中显示值的位置，我的示例基于 boostrap :

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

步骤：2 Javascript

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

Answer 5

可以使用 @ 将 Razor View 服务器端变量读取到客户端 JavaScript 尽管 JavaScript 客户端变量可以使用 @:

读取到 Razor View

Answer 6

好的，所以这个问题很老了...但我想做类似的事情，我找到了适合我的解决方案。也许它可以帮助别人。

我有一个 List<QuestionType> 可以用来填充下拉列表。我想将 selection 放入我在表单中创建的 Question 对象上的 QuestionType 属性中。我正在使用 Knockout.js 作为 select 绑定。这将 self.QuestionType 敲除可观察对象属性设置为 QuestionType 对象，当用户 select 是一个对象时。

<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 的字段，当用户 select 选择问题类型时，该字段会被填充。我使用此字段来获取 Question 对象中的 QuestionType，如下所示：

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，否则它将仅使用支持字段中的内容。

我基本上 'passed' 我的模型有一个 JavaScript 对象，而不使用 Razor 或 Ajax 调用。你可能可以在不使用 Knockout.js 的情况下做类似的事情，但这就是我正在使用的所以......

Answer 7

这是我的有效解决方案：

在我的表格中我使用：

@using (Html.BeginForm("RegisterOrder", "Account", FormMethod.Post, new { @class = "form", role = "form" }))
  {

   @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })

   @Html.HiddenFor(m => m.quantity, new { id = "quantity", Value = 0 })

  }

在我的 file.js 中，我从 GET 请求中获取数量并将如下变量传递给表单：

    $http({
        method: 'Get',
        url: "https://xxxxxxx.azurewebsites.net/api/quantity/" + usr
    })
        .success(function (data){

            setQuantity(data.number);

            function setQuantity(number) {
                $('#quantity').val(number);
            }

        });

Answer 8

是的，你可以

Asp.net MVC 剃须刀

我有 2 个输入

 <input id="TXTCount" type="number" readonly="readonly" class="form-control text-center text-bold" step="1" min="0" max="10000" value="1" inputmode="numeric" />

 <input id="TXTTOTal" type="number" readonly="readonly" class="form-control text-center text-bold" step="1" min="0" max="10000" value="1" inputmode="numeric" />

C# 在视图中

  @{string WatsMSG = "xxx";}

和 WhatsApp Link

 <a class="btn btn-success" id="WatsSendApi" href="https://api.whatsapp.com/send?phone=0000&text=@WatsMSG">
    <b class="text-black" style="font-size:small"> whatsapp </b><i class="fa fa-whatsapp" style="color:white"></i> </a>

并在 jQuery

 <script>
                                        $("#WatsSendApi").click(function () {
                                            var StringMSG;
                                            StringMSG=("Ineed : ");
                                            StringMSG += (" Item Name : ");
                                            StringMSG +='@item.ITName' ;
                                            StringMSG += (" Count: ");
                                            StringMSG += $('#TXTCount').val();
                                            StringMSG += (" Price: ");
                                            StringMSG += '@item.ITPrice';
                                            StringMSG += (" Total: ");
                                            StringMSG += $('#TXTTOTal').val();
                                            alert(StringMSG);
                                            this.href = this.href.replace("xxx", StringMSG);
                                        });
                                    </script>

我正在将脚本值和模型值传递给 C# 字符串

如何将值从 javascript 变量传递给 razor 变量？

How to pass a value to razor variable from javascript variable?

javascript

c#

razor