Question

我是MVC的新手，也是JQuery的新手。我正在尝试根据下拉列表选择填充文本框。我的产品型号包含ProductId，Name和Price字段。我想根据所选的产品名称填充QuoteDetails中的ProductId和Price字段。我的控制器操作如下：

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和Price字段的脚本如下：

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

但是当我选择下拉列表时，没有任何反应。我究竟做错了什么？任何帮助将不胜感激。

Answer 1

问题不在于您填充的脚本中dropdown ViewBag.ProductData, "Name", "Name"按名称，id的{{1}}也是dropdown，Name和ProductId都是Price所以你不能在int字段

中设置文本值

因此，您应该设置int，只要您运行脚本，它就会获得ViewBag.ProductData, "Id", "Name" int的值productId

修改

如果你想根据你的产品ID获取数据，你必须在jquery中对它进行ajax调用，你必须在控制器中对它进行操作

 [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 2

这就是我认为正在发生的事情......

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

此行创建一个<select> html元素，其id为“ProductName”，符合预期;虽然该列表中value的{{1}}是文本值。因为您对options的值和文本使用“名称”。例如：

option

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

由于您使用的是EditorFor Html帮助程序，因此它正在尝试验证ProductId的整数（我假设）。您的javascript正在尝试插入字符串，例如“Product 1”。

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

这个问题略有不同。 HTML元素的ID将默认为“ListPrice”，并且不会被htmlAttributes对象中的@id属性覆盖。附带问题，您的意思是将@Html.EditorFor(model => model.ListPrice, new { htmlAttributes = new { @id="Price", @class = "form-control" } })放在“ListPrice”元素上吗？即使您修复了这些元素的ID属性，您仍可能遇到上述（2）中的数据类型问题。

尝试将目标元素切换为TextBoxFor作为快速测试。

Answer 3

最后，我找到了答案。当travis.js说他的BeginCollectionItem助手超过了我的HTML时，我就开始了正确的道路，所以我不得不使用id contains语法来使它工作。工作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>

控制器动作（感谢Usman）如下：

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

呼！

如何根据下拉列表选择mvc填充文本框

3 个答案: