jquery - ASP.NET MVC : How to show value in a label from selected Drop Down List item?

Question

我正在尝试在标签中显示所选下拉列表项目的值。我成功地使用 Web Forms 完成了这项工作，但使用 MVC 时我完全迷失了。我的索引如下所示:

[...] 
   <% using (Html.BeginForm()) { %>
       <table>
          <tr>
             <td>Processor</td>
             <td><%= Html.DropDownList("lstProcessor1", new SelectList((IEnumerable)ViewData["Processor1List"], "product_price", "product_description")) %></td>
          </tr>
          <tr>
             <td>Total Amount</td>
             <td>0,00 €</td>
          </tr>
         </table>
      <input type="submit" value="Submit" />
   <% } %>
    [...]

我的 HomeController 开头为:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
using MvcApplication1.Models;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        // Connect database
        DB50DataContext _ctx = new DB50DataContext();

        // GET: /Home/
        public ActionResult Index()
        {
            // Search: Processors
            var products = from prod in _ctx.products
                           where prod.product_searchcode == "processor1"
                           select prod;

            ViewData["Processort1List"] = products;

            return View();
        }

我希望产品价格显示在表格的第二行，现在显示为 0,00 €。当下拉列表中的项目发生更改时，它还应该自动更新价格。

我想我应该使用 JQuery，但我不知道如何使用。有人可以给我一些如何做到这一点的提示吗？

Answer 1

更改您的操作以放置 IEnumerable<SelectListItem>进入 View 数据而不是实际的产品元素。然后更改您的 View 以仅使用此列表。

public ActionResult Index()
{
    // Search: Processors
    var products = from prod in _ctx.products
                   where prod.product_searchcode == "processor1"
                   select new SelectListItem { Text = prod.product_description, Value = prod.product_price };

    ViewData["Processort1List"] = products;

    return View();
}

现在是表格。将其更改为使用您在操作中创建的列表，无需额外的代码(以及默认选择)。向需要更新的 TD 添加一个 id - 请注意，该值将来自您发布时的选择，而不是 TD。

处理器 )ViewData["处理器1列表"],""选择产品") %> 总金额 0,00 欧元

现在添加一些 JavaScript 以在选择更改时更新 TD

<script type="javascript">
    $(function() {
        $('#lstProcessor1').change( function() {
            ('#price').html( $(this).val() );
        });
    });
</script>