如何根據下拉列表選擇填充文本框mvc

我是MVC的新手，對JQuery非常新穎。我正在嘗試根據下拉列表選擇填充文本框。我的產品型號包含字段ProductId，Name和Price。我想根據所選的產品名稱在我的QuoteDetails中填充ProductId和Price字段。我的控制器操作如下：如何根據下拉列表選擇填充文本框mvc

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" } })

我使用的嘗試填充產品ID的腳本和價格領域如下：：

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

但是，當我使下拉列表選擇，沒有任何反應。我究竟做錯了什麼？任何幫助將非常感激。

來源

2017-02-19 Dwight Mendoza

這些元素ID是否存在於頁面上？是否執行了'change'處理程序？ – David

我添加了id（參見上文）。但是，當我更改下拉列表選擇時，沒有任何反應。 –

最後，我找到了答案。當他說BeginCollectionItem助手超過了我的HTML時，travis.js開始了我的正確路徑，所以我必須使用包含語法的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); 
     }

呼！

來源

2017-03-09 23:28:40

的問題是不是在你的姓名填充dropdown ViewBag.ProductData, "Name", "Name"腳本，以便在dropdown的id也將是其Name也ProductId和Price都是int所以你不能設置文本值int場

所以你應該設置ViewBag.ProductData, "Id", "Name"當你運行腳本時它會得到int的值productId

編輯

如果您要根據您的產品ID，你必須讓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>

來源

2017-02-19 03:19:55 Usman

評論不適用於擴展討論;這個對話已經[轉移到聊天]（http://chat.stackoverflow.com/rooms/136069/discussion-on-answer-by-usman-how-to-populate-text-boxes-based-on-dropdownlist- S）。 –

這就是我認爲正在發生的事情...

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

此行創建一個<select> html元素，其ID爲「ProductName」，如預期;儘管該列表中的options的value是文本值。因爲您正在使用「姓名」作爲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幫助，它試圖驗證一個整數（我假設）的產品編號的。您的JavaScript試圖插入一個字符串，如「產品1」。

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

這有一個稍微不同的問題。HTML元素的ID默認爲「ListPrice」，不會被htmlAttributes對象中的@id屬性覆蓋。旁邊的問題，你的意思是把@id = "Price"放在「ListPrice」元素上？即使您修復了這些元素的ID屬性，您仍可能遇到上面（2）中的數據類型問題。

嘗試將目標元素切換到TextBoxFor作爲快速測試。

來源

2017-02-19 03:23:31

我將上例2）和3）中的EditorFor改爲TextBoxFor，仍然沒有運氣。當我更改下拉列表選擇時沒有任何反應。 –

有趣的......如果你所做的只是在這兩行上將EditorFor改爲TextBoxFor，那麼我期望（2）能夠工作，但（3）不會因爲提到的id /命名問題。這是我重新創建場景時發生的事情。 –

JavaScript沒有解僱，我不明白爲什麼。 –

如何根據下拉列表選擇填充文本框mvc

回答

相關問題