1

我有以下脚本：

$('#select').change(function () {
    var selectedIndex = $('#select').val();
    $('#priceTxt').val(@Model.ListProducts[selectedIndex].Price);
});

问题是 $('#priceTxt').val(@Model.ListProducts[selectedIndex].Price); 中的 selectedIndex 变量 说“无法解析符号 selectIndex”，例如超出范围。

为什么会发生这种情况，我该如何解决？问候

4

3 回答 3

1

您正在混合服务器端和客户端代码。javascript 代码（该var selectedIndex部分）将在客户端上运行，但 razor 代码（该@Model.ListProducts[selectedIndex].Price部分）希望在服务器上运行。

您可以在用户选择产品时“按需”下载产品数据：

$('#select').change(function () {
    var productId = $('#select').val();
    $.ajax({
      url: '@Url.Action("GetProduct")',
      data: { productId: productId },
      success: function(results) {
        $('#priceTxt').val(results.Price);
      }
    });
});
于 2013-07-26T21:46:14.227 回答
0

@Model.ListProducts[selectedIndex].Price在服务器上执行，并将结果添加到 HTML 中，然后再发送到客户端。这意味着selectedIndex超出范围，因为在浏览器中之前您不会定义和使用它。

您不能将 Razor 标记与 JavaScript 混合使用。Razor 早在 JavaScript 掌握它之前就已经完成了它的工作。

您最可能想要的是使用您的模型生成下拉菜单，使用价格作为值字段，产品作为标签。你已经把其他所有东西都连接好了；只需将您的使用替换为@ModelJavaScript 即可获取所选选项的值。

编辑：我用于 JavaScript 人员/实体选择器的一种方法是将我需要的数据序列化为分隔字符串或 JSON 字符串化对象，并将其存储为元素（或父级）上的属性。这让我可以在页面上拥有多个控件实例，并使用单个 jQuery 选择器和代码块来“恢复”或从中读取data以获取动态显示所需的任何信息。

例如：

<div data-serialized-products="@Model.PriceList.ToDataString()">
  @Html.DropDownFor(m => ..., new { @class="showPrice"})
</div>

<script type="text/javascript">
  $(function() {
    $(".showPrice").change(function() {
      var $dd = $(this);
      //Grab the selected value, then do $dd.parent("div").data("serialized-products")
      //to and either string split (for string delimited) or use JSON parse and access
      //the property you need to put in the text box. Bonus - you can put your textbox
      //target id in another data- attribute so you can repeat this set of controls.
    });
  });
</script>

您需要创建 ToDataString() 以返回串联字符串或 JSON 字符串化字符串。您的 JavaScript 函数需要匹配的 JSON 解析或分隔字符串拆分才能访问该值。只要您的对象不是很大（并且仅序列化您需要的属性），那么这应该是一种有用的方法。

于 2013-07-26T21:53:58.567 回答
0

使用 var 存储模型值

$('#select').change(function () {
    var selectedIndex = $('#select').val();
    var price='@Model.ListProducts[selectedIndex].Price';
    $('#priceTxt').val(price);
});
于 2013-07-27T06:28:21.810 回答