如何将剃刀视图模式属性值传递给 javascript 函数

Posted 2023-04-12

【中文标题】如何将剃刀视图模式属性值传递给 javascript 函数

【英文标题】：How to pass a razor view modal property value to a javascript function

【发布时间】：2013-12-07 02:49:13

【问题描述】：

我尝试将剃刀值发送到 jquery 函数。

查看：

@html.TextBoxFor(model => model.NumTransportado, new  @class = "form-control input-sm", id = "NumTransResp" + Model.ServicosID + "", name = "NumTransResp" + Model.ServicosID + "", onchange = "PreencheDadosVendedor(this, 3, " + @Model.ServicosID + ")" )

我可以使用除" + @Model.ServicosID + "以外的所有参数

js文件：

function PreencheDadosVendedor(idVend, tipoFuncionario, idServicoEdicao) 
$.getJSON("/Contrato/getDadosVendedor",  id: $(idVend).val(), tipoFuncionario: tipoFuncionario ,
  function (result) 
      switch (tipoFuncionario) 
          case 1:
              $("#NomeVendedor_Contrato").val(result.NomeVendedor);
          case 2:
              $("#NomeTransResponsavel").val(result.NomeVendedor);
          case 3:
              $("#NomeTransResponsavel_" + idServicoEdicao + "").val(result.NomeVendedor);
      
  );

我尝试做idSericoEdicao 是我的@Model.ServicosID，但我有相同的结果：未定义

【问题讨论】：

@Model.ServicosID 在你的视图模型中真的有值吗？

是的，有价值。我用了好几次

查看HTML页面的源代码（在浏览器中），找到那个onchange属性。它看起来像什么？

看起来不错，做我想做的事

浏览器中的 html：<input class="form-control input-sm" data-val="true" data-val-number="The field NumTransportado must be a number." id="NumTransResp683" name="NumTransportado" onchange="PreencheDadosVendedor(this, 3, 683)" type="text" value="4"> 我想要的 683 it 值

【参考方案1】：

你得到未定义的原因（假设值是一个字符串）是因为你需要将@Model.ServicosID 括在引号中，否则它将查找属性的值作为变量的名称，而不是你只需要将值作为字符串传递。

试试这个：-

@Html.TextBoxFor(model => model.NumTransportado, 
                  new  @class = "form-control input-sm", 
                    id = "NumTransResp" + Model.ServicosID + "", 
                    name = "NumTransResp" + Model.ServicosID + "", 
                    onchange = "PreencheDadosVendedor(this, 3, '" + @Model.ServicosID + "')" );
                                                               ^____                     ^____                                  

或者最好这样做，而不是添加onchange 属性；而是附加一个事件并使用data-* 属性来存储特定于元素的值，这样您就可以将html和js分开：

即：

@Html.TextBoxFor(model => model.NumTransportado, 
                      new  @class = "form-control input-sm myclass", //Add a class  
                        id = "NumTransResp" + Model.ServicosID + "",
                        data_tipoFuncionario = 3, //Add a data attribute 
                        name = "NumTransResp" + Model.ServicosID + "");

和

$('.myclass').change(function(e)
     var idServicoEdicao = this.id.replace("NumTransResp",""),  //get the part from its own id
         tipoFuncionario = $(this).data("tipoFuncionario"); //get the value from data attribute

     $.getJSON("/Contrato/getDadosVendedor",  id: this.value, tipoFuncionario: tipoFuncionario ,
 function (result) 
      switch (tipoFuncionario) 
          case 1:
              $("#NomeVendedor_Contrato").val(result.NomeVendedor);
          case 2:
              $("#NomeTransResponsavel").val(result.NomeVendedor);
          case 3:
              $("#NomeTransResponsavel_" + idServicoEdicao).val(result.NomeVendedor);
      
  );

);