用于调用运行不完整的操作结果的脚本

Question

我有一个控制器，我在里面做了两个动作结果

    public ActionResult ProductSearch(string term)
    {
        // Get Products from database
        InvoiceDBEntities db = new InvoiceDBEntities();
        var myproducts = (from E in db.Products
                          orderby E.Product ascending
                          select E.Product.Trim());

        return this.Json(myproducts.Where(t => t.Contains(term)), JsonRequestBehavior.AllowGet);
    }

    public ActionResult DetailsFetch(string term)
    {
        InvoiceDBEntities db = new InvoiceDBEntities();
        var mydetails = (from E in db.Products
                          orderby E.Product ascending
                          select new
                          {
                              Product = E.Product.Trim(),
                              Price = E.Price.ToString(),
                              UM = E.UM
                          }).ToArray();

        return this.Json(mydetails.Where(t => t.Product.Contains(term)), JsonRequestBehavior.AllowGet);
    }

并在查看相应的脚本

        //auto complete products
        $('#itemName').autocomplete(
        {
            source: '/Invoices/ProductSearch'
        });
        //prefill some inputs
        $("#UM").focus(function () {
            var MySelection = $("#itemName").val().trim();

            $.ajax({
                type: "POST",
                data: { term: MySelection },
                url: "/Invoices/DetailsFetch/",
                dataType: "json",

                succes: function (data) {
                    $("#UM").val(data.UM);
                    $("#rate").val(data.Price);
                },

                error: function () {
                    //Manage errors if any
                }
            });
        });

        $("#itemName").blur(function () {
            var MySelection = $("#itemName").val().trim();

            $.ajax({
                type: "POST",
                data: { term: MySelection },
                url: "/Invoices/DetailsFetch/",
                dataType: "json",

                succes: function (data) {
                    $("#UM").val(data.UM);
                    $("#rate").val(data.Price);
                },
                error: function () {
                    //Manage errors if any
                }
            });
        });
        //

第一部分（自动完成）工作正常。现在我希望在我的表单（或任何其他合适的事件）中输入下一个输入以执行下一个操作结果并使用我获得的数据预先填写表单中的相关输入。 我可以在浏览器中看到结果，因此操作结果运行良好，但相关输入均未更新。 当我输入下一个输入（通过鼠标单击或键盘 [tab]）时，我在浏览器中看到的响应是：

[{"Product":"Serviciu de dezvoltare aplicatie WEB","Price":"1000.00","UM":"Buc."}]

我在我的应用程序的另一部分使用了类似的概念，唯一的区别是事件是按钮单击，并且一切正常，相关输入预先填充了来自 json 响应的数据。

我会做错什么？

Answer 1

响应看起来像一个包含一个项目的数组。所以获取第一项并使用属性值

success: function (data) {
    if(data.length)
    {
      var item =data[0]; //Get first item in the array
      $("#UM").val(item .UM);
      $("#rate").val(item .Price);
   }
},

但是您的数组可能有多个项目，因为您正在执行Contains 方法调用来获取项目的子集。但是，如果您有兴趣获取单个项目的详细信息，我建议您将唯一 id (ProductId ?) 传递给服务器，并准确获取与该 id 匹配的一条记录。因此，您将返回一个对象，而不是一个数组。在这种情况下，您可以使用旧代码。3

如果您传递的术语是集合的子字符串，则包含方法将返回 true。例如，如果您有一个名为“MotorCar”的产品和另一个名为“Car”的产品，当您发送“car”作为术语值时，您的 where 条件将返回这两个记录。所以你可能不想使用Contains 方法。

假设您的 ProductName 是唯一的，您可以直接检查 ProductName 是否与您发送的术语完全匹配。

public ActionResult DetailsFetch(string term)
{
    var db = new InvoiceDBEntities();
    var item = (from E in db.Products
                      orderby E.Product ascending
                      where E.Product 
                             .Equals(term,StringComparison.CurrentCultureIgnoreCase)
                      select new
                      {
                          Product = E.Product.Trim(),
                          Price = E.Price.ToString(),
                          UM = E.UM
                      }).FirstOrDefault();
    if(item!=null)
    {
       return Json(new {status="success",details= item }, JsonRequestBehavior.AllowGet);
    }
    return Json(new {status="error"}, JsonRequestBehavior.AllowGet);
}

现在在您的成功事件处理程序中，您只需检查响应 json 并根据需要使用详细信息

success: function (data) {
    if(data.status===="success")
    {          
      $("#UM").val(data.details.UM);
      $("#rate").val(data.details.Price);
    }
},

另外，您不需要在另一个文本框上收听模糊/焦点事件，您可以使用自动完成上的 select 事件来进行第二次 ajax 调用以获取详细信息。

select: function (event, ui) {
    var term = ui.item.label;
     // make the call here
}

查看How to make another ajax call upon selection of autocomplete text field value in ASP.NET MVC 4?获取详细示例代码