为什么我在 JQuery 自动完成中传递的第二个参数的值总是为零？答案

【问题标题】：Why is the value of second parameter I'm passing in JQuery Autocomplete always zero?为什么我在 JQuery 自动完成中传递的第二个参数的值总是为零？
【发布时间】：2021-02-12 01:51:49
【问题描述】：

我正在尝试将一个附加参数传递给我的控制器。一切正常，只是我似乎无法获得第二个参数的值。

我的控制器需要以下两个参数：

public JsonResult GetProductList(string term, int manufacturerid)

我的自动完成编码如下：

 $("#InternalProductNumber").catcomplete({
   delay: 0,
   min_length: 3,
   source: '@Url.Action("GetProductList", "Proposal")',
   data: {
      term: $("#InternalProductNumber").val(),
      manufacturerid: $("#ManufacturerId").val()
    }, 
     select: function (event, ui) {
        $("#ProductId").val(ui.item.value);
        $("#InternalProductNumber").val(ui.item.label);
        $("#SellPrice").val(ui.item.sellprice);
        return false;
      }
   });

Term 总是正确传入，但manufacturerid（它是一个下拉列表）总是为零。如果我在选择函数中放置一个警报，我会得到一个非零结果，告诉我我有一个值。

alert($("#ManufacturerId").val());

******* 编辑 *******

我按照建议添加了代码，现在看起来如下：

 $("#InternalProductNumber").catcomplete({
            delay: 0,
            min_length: 3,
            source: '@Url.Action("GetProductList", "Proposal")'+ `?manufacturerid=${$("#ManufacturerId").val()}`,
            select: function (event, ui) {
                alert('@Url.Action("GetProductList", "Proposal")' + `?manufacturerid=${$("#ManufacturerId").val()}`);
                $("#ProductId").val(ui.item.value);
                $("#InternalProductNumber").val(ui.item.label);
                $("#SellPrice").val(ui.item.sellprice);
                return false;
            }
        });

manufacturerid 参数仍然为 0。这是开发者选项中网络选项卡的结果。

我在选择后添加了警报只是为了仔细检查，我在警报中得到了正确的结果。

不知道从这里去哪里。我做错了什么？

谢谢。

-- 值

【问题讨论】：

我认为，因为您的后端需要整数 manufacturerid 并且您将 manufacturerid 作为字符串传递，这就是您的参数被解析为 0 的原因。试试这个：manufacturerid: +$("#ManufacturerId").val() 在您的 @987654332 @函数的data属性

标签： javascript jquery-ui-autocomplete

【解决方案1】：

您看到term 是来自文本框InternalProductNumber 的jQuery 内置参数。 term 将始终出现在您的方法 public JsonResult GetProductList(string term, int manufacturerid) 中。

我能够在 ASP.NET Core 项目中重现您的代码并得到相同的结果manufacturerid = 0。我的代码略有不同：

$("#InternalProductNumber").autocomplete({
           minLength: 3,
           source: '@Url.Action("GetProductList", "Home")',
           data: {
               term: $("#InternalProductNumber").val(),
               manufacturerid: $("#ManufacturerId").val()
           },
           select: function (event, ui) {
                console.log("In select function.");
                return false;
           }
       });

我进行了调试，在 Watch 窗口中我可以看到 Request.QueryString = '?term=aaa' 而没有看到 manufacturerid。

解决方案

$("#InternalProductNumber").catcomplete({
    delay: 0,
    min_length: 3,
    source: '@Url.Action("GetProductList", "Proposal")'+ `?manufacturerid=${$("#ManufacturerId").val()}`,
    select: function (event, ui) {
        $("#ProductId").val(ui.item.value);
        $("#InternalProductNumber").val(ui.item.label);
        $("#SellPrice").val(ui.item.sellprice);
        return false;
    }
  });

function ManufacturerId_OnChange() {
    $("#InternalProductNumber").catcomplete('option', 'source', '@Url.Action("GetProductList", "Home")' + `?manufacturerid=${$("#ManufacturerId").val()}`);
}

在我添加 manufacturerid 作为 QueryString 参数后，函数 GetProductList 正确获取 term 和 manufacturerid。

更新

关于.cshtml

@{
    ViewData["Title"] = "About";
    Layout = null;
}
<html>
<body>
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<p>Use this area to provide additional information.</p>

<input type="text" id="InternalProductNumber" name="InternalProductNumber" />

<br />
<select id="ManufacturerId" name="ManufacturerId"  onchange="ManufacturerId_OnChange();">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

<script type="text/javascript">
    console.log(`In 1 ${parseInt($('#ManufacturerId').val())}.`);

    //catcomplete
    
    $("#InternalProductNumber").autocomplete({
       minLength: 3,
       source: '@Url.Action("GetProductList", "Home")' + `?manufacturerid=${$("#ManufacturerId").val()}`,
       select: function (event, ui) {
            console.log("In select function.");
            return false;
       }
   });
   function ManufacturerId_OnChange() {
        //catcomplete
        $("#InternalProductNumber").autocomplete('option', 'source', '@Url.Action("GetProductList", "Home")' + `?manufacturerid=${$("#ManufacturerId").val()}`);
    }
</script>

HomeController.cs

public class HomeController : Controller
{
    [HttpGet]
    public JsonResult GetProductList(string term, int manufacturerid)
    {
        var strTestJSON = "{ \"test\": 1, \"cat\": 2}";

        return Json(JsonConvert.DeserializeObject(strTestJSON));
    }
}

【讨论】：

我逐行复制了您所拥有的内容，但仍然是零。这是我打电话的结果。 localhost:5001/Proposal/…
您是否从 ManufacturId 中选择了一些东西？尝试调试 C# 代码GetProductList。你是怎么得到这个 url localhost...的？
我编辑了我的帖子以添加更多详细信息。到。你的问题，我确实为 ManufacturID 选择了一些东西。我从 Chrome 的网络选项卡中获取了 URL。我只是不明白为什么当我调用 GetProductList 时 ManufacturerID 总是为零，但在其他任何地方总是选择值！非常感谢您的帮助。
我仍在调查和更新我的答案。
Val，您需要将事件处理程序onchage 添加到select 组合框。然后将source 更新为catcomplete。我刚刚再次更新了答案中的代码。