ASP.NET MVC: как показать значение в метке из выбранного элемента выпадающего списка?

Question

Я пытаюсь показать значение выбранного элемента выпадающего списка в метке. Мне удалось сделать эту работу с веб-формами, но с 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 и сделать следующее:

$(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)

Answer 2

Я согласен со всеми этими парнями. Однако есть две важные вещи, на которые стоит обратить внимание:

1) Вам следует присвоить объекту ViewData имя с тем же именем ключа, что и для элемента управления в представлении. Таким образом, вам не нужно будет указывать в своем View фактический объект «ViewData», так как механизм MVC найдет его.

2) Да, вы можете сохранить поиск цен в объекте JSON на стороне клиента. Но это может стать большим, сложным и неуправляемым. Я бы предложил сделать асинхронный вызов с помощью jQuery. Посмотрите на функцию jQuery "$ .getJSON" и используйте ее вместе с MVC JsonResult.

Дайте мне знать, если вам нужна более подробная информация:)

Answer 3

Измените свое действие, чтобы поместить 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, который необходимо обновить - обратите внимание, что значение будет исходить от выбора, когда вы публикуете его, а не TD.

процессор ) ViewData ["Processor1List"], "" Выберите продукт ")%> Итого 0,00 €

Теперь добавьте немного javascript для обновления TD при изменении выбора

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

Answer 4

Я бы предложил вам добавить новое действие на ваш контроллер, которое будет возвращать цену продукта с учетом идентификатора продукта. Идентификатор продукта должен представлять значение раскрывающегося списка:

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 5

Вы можете сделать это с помощью jQuery:

Добавьте идентификатор вашей общей ячейки:

...
             <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. Надеюсь, это поможет.