【问题标题】:How to pass a value to razor variable from javascript variable?如何将值从javascript变量传递给剃刀变量?
【发布时间】:2015-04-03 17:27:16
【问题描述】:

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

@{
    int a = 0;
}

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

【问题讨论】:

  • 你不能。您可以将 Razor 变量“传递”给 JavaScript 变量,但反之则不行。
  • 而且,要挑剔,它们不是“jquery”变量。它们是 javascript 变量。
  • @J.Steen,好吧,你know....
  • @AndreiV 是的。我经常发。 =)

标签: javascript c# razor


【解决方案1】:

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

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

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

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

简而言之:

  1. 服务器收到请求。

  2. 服务器创建或“获取”视图,然后计算嵌入视图中的所有 C# 代码并将其转换为 CSS、Javascript 和 HTML。

  3. 服务器将视图的客户端版本作为对请求的响应返回给浏览器。 (此时不再有 C#)

  4. 浏览器渲染页面并执行所有的Javascript

【讨论】:

    【解决方案2】:

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

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

    为每个脚本设置字段:

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

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

    【讨论】:

    • 那么你将如何检索存储在隐藏字段中的值?例如,将其传递给 @HtmlAction("ActionName", HiddenFieldValue)
    • 很简单,使用如下:@HtmlAction("ActionName", "myVar") 在 HTLM 中,@Html.Hidden 等同于 &lt;input type="hidden" value=0 id="myVar"/&gt;,另见 How to set and get ASP.net MVC Hidden Field values
    • 我们可以在剃刀视图中访问这个隐藏的字段值吗?如果是这样,怎么做?请解释
    • @TharushiGeethma 是的,你可以。只需将 JQuery 选择器与 .val() 一起使用,如下所示:$('#myVar').val();
    • 这不会改变模型值
    【解决方案3】:

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

    我有一个List&lt;QuestionType&gt;,我用它填写下拉列表。我想将该选择放入我在表单中创建的Question 对象的QuestionType 属性中。我使用Knockout.js 进行选择绑定。当用户选择一个对象时,这会将self.QuestionType 淘汰可观察属性设置为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)
    

    在订阅 observable 时,我将隐藏字段设置为对象的 JSON.stringify-ed 版本。

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

    我基本上已经将一个 JavaScript 对象“传递”给我的模型,而没有使用 RazorAjax 调用。不使用Knockout.js,您可能可以做类似的事情,但这就是我正在使用的......

    【讨论】:

      【解决方案4】:

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

      在你的 *.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 对象相匹配。

      希望对某人有所帮助!

      【讨论】:

        【解决方案5】:

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

        【讨论】:

        • 欢迎来到 Stack Overflow!请随时使用该站点的tour,如果您需要该站点的其他帮助,请查看this。哦,如果您遇到帮助页面未涵盖的问题,请随时通过meta 提问。
        【解决方案6】:

        这是我的有效解决方案:

        在我的表单中我使用:

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

        【讨论】:

          【解决方案7】:

          是的,你可以

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

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

          【讨论】:

            【解决方案8】:

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

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 2011-07-07
              • 1970-01-01
              • 1970-01-01
              • 2019-07-07
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多