DropDown在mvc中更改时,从模型设置TextBox值

时间:2013-07-26 16:40:53

标签: jquery asp.net-mvc razor

我有一个名为Bill的ViewModel,它有一个名为Product的模型列表,使用Bill ViewModel的Index视图有一个带有产品名称的DropDown和一个我要设置产品价格的文本框(位于根据下拉列表中选择的产品,进入文本框。

以下是产品型号:

    public class Product
    {
    public string ProductName { get; set; }
    public decimal Price { get; set; 
    }

以下是比尔模型:

    public class BillViewModel
    {
    public SelectList ProductList { get; set; }
    public int ProductSelected { get; set; }
    public List<Product> ListProducts { get; set; }

    }

这是索引视图:

这是我用来更改下拉值的脚本,我使用产品列表下拉列表中选择的值来获取产品价格,但它始终是第一个呈现的值,文本框不会更新值我改变了选择。

<script type="text/javascript">

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

<fieldset>
    <legend>BillViewModel</legend>

    <div class="display-label">
        @Html.Label("Product")
        @Html.DropDownListFor(model => model.ProductSelected, Model.ProductList, "Select Product", new {id = "select"})
    </div>

</fieldset>
<div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary" data-dismiss="modal" id="submit">Save changes</a>

如果我没有使用正确的架构方法,请告诉我。

1 个答案:

答案 0 :(得分:1)

UI更改时,您的模型未更新。该模型仅提供“intellisense”类型功能,以确保属性和UI之间的强绑定。它也可以由模型绑定器用于在提交表单时将这些表单字段映射回具体对象。一旦它被渲染到客户端浏览器,就不再有实际的模型了。它仅在服务器端呈现和绑定期间有效。

您需要更新Change处理程序以从$(this)获取所选值,而不是尝试使用模型,其中“$(this)”是触发的jQuery包装的DOM元素变化事件 - 你的下拉。只是看看如何抓住价值。我目前无法进行代码示例,但应该很容易找到如何访问更改下拉列表的选定值。

编辑:将模型属性视为常量值。它们在渲染时插入服务器上的标记,结果将发送到浏览器。在这种情况下,您的change处理程序基本上是向.val()调用发送硬编码值。它一旦在浏览器上呈现就永远不会改变。