如何将所选记录的id从自动完成文本框传递给控制器

时间:2014-03-27 07:52:41

标签: jquery asp.net-mvc-3

 public class Product
{

    public int Id { get; set; }
    public string ProductName { get; set; }
    public double Weight { get; set; }
    public double PurchaseRate { get; set; }
    public double SaleRate { get; set; }
    public string Details { get; set; }
    public int Vendor { get; set; }
    public string VendorCode { get; set; }
    public int VendorId { get; set; }
    public string VendorName { get; set; }
    public string ProductCode { get; set; }

}

以上是我的产品类和产品控制器我有一个方法vendorlist返回json,这个方法如下

public ActionResult vendorList(string term)
    {
        var results = new[] 
         {
        new { id = "1", label = "Suraj Metels" },
        new { id = "2", label = "A.B. Infra" },
        new { id = "3", label = "Momin Brother" },
        new { id = "4", label = "Fort"},
        new { id = "5", label = "Malabar Hill" },

        };
        var result3 = results.Where(s => s.label.ToLower().Contains(term.ToLower())).Select(w => w).ToList();       
        return Json(result3, JsonRequestBehavior.AllowGet);
    }

下面是创建视图的视图代码

 <div class="span6" >
                       <div class="span4" >
                     <label >Vendor</label>
                </div>
                <div class="span6" >
                       @Html.TextBox("VendorName",null, new { id = "SearchBox", @class = "SearchBox" })          
              </div>
             </div>

和jquery代码如下

 <script type="text/javascript">
$(function () {
    $('.SearchBox').autocomplete({
        source: '@Url.Action("vendorList")',

        minLength: 1,

        select: function (evt, ui) { 
        }
    });

});

自动缩放功能在这里工作。但是当我选择vendorname并且当我将此数据传递给“创建”控制器时,我想发送特定记录的id。 对于前如果我选择供应商名称为“Suraj Metels”,那么我想将id = 1发送给控制器。 请帮帮我

4 个答案:

答案 0 :(得分:0)

你可以在select函数中进行ajax调用,如下所示

$('.SearchBox').autocomplete({
        source: '@Url.Action("vendorList")',

        minLength: 1,

        select: function (evt, ui) { 
                $.ajax({
                    url: "MethodName",
                    dataType: "json",
                    data : ui.item.value,
                    success : function(response) {
});             
              });

        }
    });

答案 1 :(得分:0)

试试这个

var results = new[] 
         {
        new { id = "1", label = "Suraj Metels", yourUrl=Url.RouteUrl("RouteName",new {id="1"}) },
        new { id = "2", label = "A.B. Infra", yourUrl=Url.RouteUrl("RouteName",new {id="2"})},
        new { id = "3", label = "Momin Brother", yourUrl=Url.RouteUrl("RouteName",new {id="3"})},
        new { id = "4", label = "Fort",  yourUrl=Url.RouteUrl("RouteName",new {id="4"})},
        new { id = "5", label = "Malabar Hill", yourUrl=Url.RouteUrl("RouteName",new {id="5"})},

        };

选择

select: function( event, ui ) {

                            window.location=ui.item.yourUrl;
                            return false;
                        }

答案 2 :(得分:0)

这应该有效:

select: function (event, ui) {
           var url = '@Url.Action("YourAction", "YourController", new { id = "__id__" })';
           window.location.href = url.replace('__id__', ui.item.id);
        }

答案 3 :(得分:0)

下面的代码用于将所选记录的id从自动获取文本框传递到控制器。 使用此代码,您可以选择字符串值,您可以将该记录的id传递给控制器​​。

$('#ProductList').append("<div  class='span12' style='margin-left:0px' ><div class='span2'>" +
           // "<select class='clsProductId '  name='ProductId' id='ddProductList_" + IDD + "' style = 'font-size:12px;width:200px;margin-right:80px;margin-left:20px;' onchange='get(" + IDD + ")'/> </div>" +
         "<input type='text' class='ProductName span1 pull-left' id='ProductNameID_" + IDD + "' name='Productname' value='' style = 'font-size:12px;width:200px;margin-right:80px;margin-left:20px;' placeholder='start typing to load products' /> " +
           "<input type='hidden' class='ProductName1 ' id='Pid_" + IDD + "' name='ProductID' value=''  /> " + "<hr></div>");

此代码用于动态创建产品名称的文本框。和隐藏的文本框。

以下自动填充事件代码

  $(".ProductName").on("focusin", function () {
            $(this).autocomplete({
                source: '@Url.Action("GetProductList","Product")',
                minLength: 1,                   
                select: function (evt, ui) {                     
                    newlabel = ui.item.label;
                    newlabelId = ui.item.id;

                    $('input.ProductName').attr('id');
                    var ProductName_id = $(this).prop('id');
                    var Product_Name_Index = parseInt(/ProductNameID_(\d+)/.exec(ProductName_id)[1], 10);

                    $('#Pid_' + Product_Name_Index).val(newlabelId);
                    getProductDetails(newlabelId, Product_Name_Index);                      
                }
            });
       });

和控制器方法如下

public JsonResult GetProductList(string term)
    {          
        var product_list = GetProductList();

        var Final_Products= product_list.Where(s => s.ProductName.ToLower().StartsWith(term.ToLower())).Select(product => new { id= product.Id,label=product.ProductName }).ToList();

        return Json(Final_Products, JsonRequestBehavior.AllowGet);

    }

在上面的方法“GetProductList()”是product.term的列表是我们想要找到产品名称的一封信。

当你想传递所选recodto httppost方法的id时,请使用“string [] ProductID”。这里ProductID是id的名称属性的代码。

[HttpPost]

public ActionResult Create(string [] ProductId)

{ //你的代码

}