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

时间:2016-09-08 14:04:26

标签: javascript jquery asp.net-mvc forms

我有一个控制器,我在

中制作了两个动作结果
    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
                }
            });
        });
        //

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

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

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

我能做错什么?

1 个答案:

答案 0 :(得分: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

如果您传递的术语是集合的子字符串,则Contains方法将返回true。例如,如果您的产品名称为" MotorCar"和#34; 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?了解详细示例代码