如何从JavaScript变量传递值到Razor变量？

Question

从Javascript变量向Razor变量传递值，是否可能在ASP.NET MVC Razor视图引擎中实现？

@{
    int a = 0;
}

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

- user4208535

---

你不能这样做。你可以将 Razor 变量“传递”给 JavaScript 变量，但反过来不行。 - Andrei V

可能是如何将JQuery变量传递给Razor？的重复问题。 - J. Steen

并且，苛刻地讲，它们不是“jQuery”变量，而是JavaScript变量。 - J. Steen

@J.Steen，嗯，你知道.... - Andrei V

@AndreiV 是的，我经常发布它。=） - J. Steen

谢谢，那么如何做呢？ @if ($(this).width() > 100) { ... } - user4208535

Answer 1

你不能这样做。原因是它们不在同一时间“存在”。 Razor变量是“服务器端变量”，在页面发送到“客户端”后就不存在了。 当服务器收到视图请求时，只创建带有HTML、CSS和Javascript代码的视图。没有C#代码留下，它全部被“翻译”成客户端语言。 当视图仍然在服务器上时，Javascript代码确实存在，但它是毫无意义的，并且只会被浏览器执行（再次是客户端）。 这就是为什么你可以使用Razor变量来更改HTML和Javascript，但反之则不行。试着查看你的页面源代码（大多数浏览器中按CTRL+U），那里面不会有C#代码的任何迹象。 简而言之： 1. 服务器接收请求。 2. 服务器创建或“获取”视图，然后计算并将嵌入视图中的所有C#代码转换为CSS、Javascript和HTML。 3. 服务器将客户端版本的视图作为响应返回给浏览器。（此时不再有C#） 4. 浏览器呈现页面并执行所有Javascript。

- some_name

Answer 2

但如果@html.Hidden字段中使用一个常量来代替变量，则这是可能的。

例如，像这个例子一样。

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

使用脚本设置字段:

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

我希望至少能提供一个不小的解决方法。

- Carsten Cors

---

那么你如何检索存储在隐藏字段中的值？例如，将其传递给@HtmlAction（“ActionName”，HiddenFieldValue） - usefulBee

很容易，可像这样使用：@HtmlAction("ActionName", "myVar") 在 HTML 中，@Html.Hidden 相当于 <input type="hidden" value=0 id="myVar"/>。 参见 如何设置和获取ASP.net MVC Hidden Field值。 - Carsten Cors

我们能在 Razor 视图中访问这个隐藏字段的值吗？如果可以，怎么做？请解释一下。 - Tharushi Geethma

@TharushiGeethma 是的，你可以这样做。只需使用JQuery选择器和.val()，像这样：$('#myVar').val(); - Richnau

这不会改变模型的值。 - QMaster

Answer 3

好的，这个问题可能有一些旧了...但我想做类似的事情，并找到了适合我的解决方案。也许它可以帮助其他人。

我有一个 List<QuestionType>，我用它填充下拉列表。我想把选择的值放入正在创建的表单中的 Question 对象的 QuestionType 属性中。我在使用 Knockout.js 进行选择绑定。当用户选择其中一个选项时，这会将 self.QuestionType knockout 可观察属性设置为一个 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版本。

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

在Question对象中，我有一个称为QuestionTypeJson的字段，当用户选择问题类型时填充该字段。我使用此字段来获取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，否则它将仅使用后备字段中的内容。

我基本上在不使用Razor或Ajax调用的情况下向我的模型“传递”了一个JavaScript对象。你可能可以做类似的事情而不使用Knockout.js，但那是我正在使用的...

- Barry Franklin

Answer 4

这是我的可行解决方案：

在我的表单中，我使用：

@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);
            }

        });

- Ewald Bos

Answer 5

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

在您的*.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请求完成。您只需要在操作中拥有与JavaScript创建的Json对象匹配的正确参数即可。希望能对某些人有所帮助！

- Mjollnir951

Answer 6

步骤：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"));

- Bulelani Cimani

---

欢迎来到 Stack Overflow！请随意参观一下我们的导览，如果您需要更多关于本站的帮助，请查看这里。如果您遇到了帮助页面没有涉及的问题，请在meta上提问。 - Claudia

这如何解决原始问题？你从JS中捕获值并将它们传递到Razor视图的哪里？ - Bhaskar Singh

Answer 7

当然可以

Asp.net MVC razor

我有两个输入

 <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 链接

 <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#字符串

- Aladein

---

这是如何解决最初的问题的？您从JS中捕获值并将它们传递给Razor视图的位置在哪里？ - Bhaskar Singh

Answer 8

使用@符号可以在服务器端读取Razor视图中的变量，而在客户端JavaScript中使用While和JavaScript客户端变量可以在Razor视图中使用@符号进行读取：

- Minhajul Islam