ASP.NET MVC：如何從選定的下拉列表項中顯示標籤中的值？

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

我想PRODUCT_PRICE展示在桌子上，它現在說0,00€的第二行。當下拉列表中的項目改變時，它也應該自動更新價格。

我想我應該使用JQuery，但我不知道如何。有人可以給我一些提示如何做到這一點？

Answer 1

您可以用jQuery做到這一點：

添加一個id爲您的總格：

... 
      <td>Total Amount</td> 
      <td id="total">0,00 €</td> 
... 

然後，添加一些JavaScript，將火的時候，選擇的變化：

<script type="text/javascript" src="jquery-1.4.1.js"></script> 
<script type="text/javascript"> 

$(function() { 
    // Update total when the page loads. 
    $('#total').html($('#lstProcessor1').val()); 

    // Update total when the selection changes. 
    $('#lstProcessor1').change(function() { 
     $('#total').html($(this).val()); 
    }); 
}); 

</script> 

當然，你可以優化這段代碼，這樣它就不會重複（DRY），你可能想把它移到外部的JS文件中。我希望這有幫助。

Answer 2

更改您的操作，將IEnumerable<SelectListItem>放入視圖數據中，而不是實際的產品元素。然後改變你的觀點，以簡單地使用這個列表。

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。

處理器 ）計算機[ 「Processor1List」] 「」 選擇產品「）％> 總量 0,00€

現在添加一個位的JavaScript來更新TD時選擇變化

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

Answer 3

我建議你添加一個新的動作在您的控制器上，將返回給定產品ID的產品的價格。產品ID應該代表下拉值：

public ActionResult Price(int? productId) 
{ 
    decimal price = 0; 
    var product = _ctx.products 
     .Where(prod => prod.id == productId) 
     .FirstOrDefault(); 
    if (product != null) 
    { 
     price = product.Price; 
    } 
    return Json(new { price = price }); 
} 

當你改變下拉框中的值這個動作將被調用：

$(function() { 
    $('#lstProcessor1').change(function() { 
     var productId = $(this).val(); 
     $.getJSON('/controller/price', { productId: productId }, function(json) { 
      $('#total').html(json.price); 
     }); 
    }); 
}); 

Answer 4

我與所有這些人同意。但是，有兩件重要的事情你應該看一下：

1）您應該爲您的ViewData對象命名，其名稱與您視圖中控件的名稱相同。這樣，您不需要在View中指定實際的「ViewData」對象，因爲MVC引擎會找到它。

2）是的，你可以堅持你的價格查找在客戶端的JSON對象。但是，這可能會變得龐大，複雜和不守規矩。我會建議使用jQuery進行異步調用。查看jQuery「$ .getJSON」函數，並將其與MVC JsonResult結合使用。

讓我知道，如果你想了解更多詳細:)

Answer 5

如果你想抓住的價格，或任何其他數據，從服務器，你可以使用jQuery做t這：

$(lstProcessor1).change(function (product) { 
    $.getJSON('/products/getproduct', { id: $(this).val() }, function(product) { 
     $('#product-total').val(product); // or use .html() if it's not an input element 
    }) 
}) 

在你的控制器中，你只需要返回一個json序列化的產品return Json(product)