如何根据下拉列表选择填充文本框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

回答

相关问题