как заполнять текстовые поля на основе выбора выпадающего списка mvc

Question

Я новичок в MVC и очень новичок в JQuery. Я пытаюсь заполнить текстовые поля на основе выбора выпадающего списка. Модель My Product содержит поля ProductId, Name и Price. Я хочу заполнить поля ProductId и Price в моих QuoteDetails на основе выбранного имени продукта. Мои действия контроллера заключается в следующем:

public ActionResult AddProduct(int quoteId, int quoteDetailId) 
     { 
      var items = db.Products.ToList(); 
      ViewBag.ProductData = items; 


      ViewData["QuoteId"] = quoteId; 
      ViewData["QuoteDetailId"] = quoteDetailId; 
      return PartialView("EditQuoteDetail", new QuoteDetail { QuoteId = quoteId, QuoteDetailId = quoteDetailId, ProductId = 1, ProductName = " ", Amount = 1, ListPrice = 0, Discount = 0, Price = 0 }); 
     } 

Соответствующая часть частичного просмотра EditQuoteDetail выглядит следующим образом:

   @Html.HiddenFor(model => model.QuoteId, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.HiddenFor(model => model.QuoteDetailId, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.EditorFor(model => model.ProductId, new { htmlAttributes = new { @id="ProductId", @class = "form-control" } }) 
       @Html.DropDownList("ProductName", new SelectList(ViewBag.ProductData, "Name", "Name"), new { @id = "ProductName" }) 
       @Html.EditorFor(model => model.Amount, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.EditorFor(model => model.ListPrice, new { htmlAttributes = new { @id="Price", @class = "form-control" } }) 
       @Html.EditorFor(model => model.Discount, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control" } }) 

Сценарий Я использую, чтобы попытаться заполнить ProductId и цену полей следующим образом :

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#ProductName').change(function() { 
      $('#ProductId').val($(this).val()); 
      $('#Price').val($(this).val()); 
     }); 
    }); 
</script> 

Но когда я делаю выбор выпадающего списка, ничего не происходит. Что я делаю не так? Любая помощь приветствуется.

Answer 1

Наконец-то я нашел ответ. travis.js начал меня по правильному пути, когда он сказал, что помощник BeginCollectionItem обгоняет мой HTML, поэтому мне пришлось использовать синтаксис id, чтобы он работал. Работает JQuery (в родительском виде) выглядит следующим образом:

<script type="text/javascript"> 
      $(document).ready(function() { 
       $(document).on("change", '[id*="ProductList"]', function() { 
        $.post("/QuoteViewModel/GetProduct", { pId: $(this).val() }, function (data) { 
         $("[id*='ProductId']").val(data.ProductId); 
         $("[id*='Price']").val(data.Price); 
        }); 
       }); 
       }); 
      </script> 

И действие контроллера (спасибо Усман) выглядит следующим образом:

[HttpPost] 
     public ActionResult GetProduct(int pId) 
     { 
      var data = db.Products.Find(pId); 
      return Json(data); 
     } 

Уф!

Answer 2

Проблема не в сценарии вы Populating dropdown ViewBag.ProductData, "Name", "Name" по имени так id из dropdown также будет его Name, а также ProductId и Price оба int так что вы не можете установить значение текста в int поле

Таким образом, вы должны установить ViewBag.ProductData, "Id", "Name" когда-либо вы будете запускать скрипт будет получить значение productId

Edit

, если вы хотите получить данные, основанные на код продукта вы должны сделать AJAX вызова для этого в JQuery, и вы должны сделать действие для этого в контроллере

[HttpPost] 
     public ActionResult GetProduct(int pId) 
     { 
      var data = db.Products.Find(id); 
      return Json(data); 
     } 

и ваш вид будет

 @model CMSUsersAndRoles.Models.QuoteDetail 

    @{ 
     ViewBag.Title = "EditQuoteDetail"; 
     Layout = null; 
    } 

    @{ 
     var quoteId = (int)ViewData["QuoteId"]; 
     var quoteDetailId = (int)ViewData["QuoteDetailId"]; 
    } 

    <!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

</head> 
<body>   
    <div id="row"> 
     <table> 

      @using (Html.BeginCollectionItem("quoteDetail")) 

      { 

       <tr> 
        @Html.HiddenFor(model => model.QuoteId, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.HiddenFor(model => model.QuoteDetailId, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.TextBoxFor(model => model.ProductId, new { htmlAttributes = new { @id="ProductId", @class = "form-control" } }) 
        @Html.DropDownList("ProductList", new SelectList(ViewBag.ProductData, "ProductId", "Name"), new { @id = "ProductList" }) 
        @Html.EditorFor(model => model.Amount, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.TextBoxFor(model => model.Price, new { htmlAttributes = new { @id="Price", @class = "form-control" } } 
        @Html.EditorFor(model => model.Discount, new { htmlAttributes = new { @class = "form-control" } }) 
        @Html.EditorFor(model => model.ListPrice, new { htmlAttributes = new { @class = "form-control" } }) 
           @Ajax.ActionLink(" ", "DeleteProduct", "QuoteViewModel", new { quoteId = Model.QuoteId, quoteDetailId = (Model.QuoteDetailId) }, 
           new AjaxOptions 
           { 
            HttpMethod = "POST", 
            Confirm = "Are you Sure You Want to Delete " + Model.ProductName, 
            OnSuccess = "RemoveRow" 
           }, 
           new { @class = "btn btn-danger glyphicon glyphicon-trash" }) 
          </tr> 
      } 

     </table> 
    </div> 
<script type="text/javascript"> 
      $(document).ready(function() { 
       $('#ProductList').change(function() { 
        $.post("/QuoteViewModel/GetProduct", { pId: $(this).val() }, function (data) { 
         $('#ProductId').val(data.ProductId); 
         $('#Price').val(data.Price); 
        }); 
       }); 
      }); 
    </script> 

</body> 
</html> 

Answer 3

Вот что я думаю, что происходит ...

(1)@Html.DropDownList("ProductName", new SelectList(ViewBag.ProductData, "Name", "Name"), new { @id = "ProductName" })

Эта линия создает <select> HTML элемент с идентификатором "ProductName", как и ожидалось; хотя value из options в этом списке являются текстовыми значениями. Потому что вы используете «Имя» как для значения, так и для текста option. Например:

<select id="ProductName" name="ProductName"> 
    <option value="Product 1">Product 1</option> 
    <option value="Product 2">Product 2</option> 
</select> 

(2)@Html.EditorFor(model => model.ProductId, new { htmlAttributes = new { @id="ProductId", @class = "form-control" } })

Поскольку вы используете помощник EditorFor Html, он пытается проверить целое число (я предполагаю) в ProductID. Ваш javascript пытается вставить строку, например «Продукт 1».

(3)@Html.EditorFor(model => model.ListPrice, new { htmlAttributes = new { @id="Price", @class = "form-control" } })

Это имеет немного другой вопрос.Идентификатор элемента HTML по умолчанию будет «ListPrice» и не будет переопределен вашим свойством @id в объекте htmlAttributes. Боковой вопрос, вы хотите поставить @id = "Price" на элемент «ListPrice»? Даже если вы исправляете атрибуты идентификатора этих элементов, вы все равно можете столкнуться с проблемой типа данных из (2) выше.

Попробуйте переключить целевой элемент на TextBoxFor как быстрый тест.