2013-08-28 13 views
1

我用這kendo ui autocomplete widget爲文本框:無法通過控制器使用下面的方法來提自動完成擴展數據文本字段

public ActionResult GetItems(string term) 
{ 
    ContextObject contextObject = new ContextObject(); 
    TransactionHistory transactionhistory = new TransactionHistory(); 
    var items = transactionhistory.GetItems(contextObject, term); 
    // the above method will gives list of strings 
    return Json(items, JsonRequestBehavior.AllowGet);      
} 

,這是我的看法:

@(Html.Kendo().AutoComplete() 
     .Name("ItemSearch") 
     .DataTextField("RPersonDetails") 
     .DataSource(source => { 
      source.Read(read => 
      { 
       read.Action("GetItems", "TransactionHistoryResults") 
        .Data("onAdditionalData"); 
      }) 
      .ServerFiltering(true);    
     }) 
     .HtmlAttributes(new { style = "width:100px" }) 
) 

<script type="text/javascript"> 
    function onAdditionalData() { 
     return { 
      text: $("#ItemSearch").val() 
     }; 
    } 
</script> 

在鏈接我們得到了datatextfield這是爲指定自動完成使用的產品(表)的哪個屬性,在我的方案中,此方法transactionhistory.GetItems(contextObject, term);給出的字符串列表,所以在那種情況下,我需要什麼在此字段中提及DataTextField("RPersonDetails")代替RPersonDetails

我是否需要更改GetItems方法?請給出任何建議和想法在這一個.... 非常感謝在提前....

+1

如果您的結果集只是也許你並不需要指定'DataTextField'字符串列表;嘗試刪除它。 – asymptoticFault

+0

'RPersonDetails'是'TransactionHistory'的一個屬性嗎? – asymptoticFault

+0

刪除'DataTextField'是否解決了這個問題? – asymptoticFault

回答

1

這是一個完整的工作樣本,用於kendo ui自動完成並檢索控制器中的選定值。它使用hidden field來設置選定的值。

控制器

public class SampleController : Controller 
    { 


     public ActionResult Index() 
     { 
      return View(); 
     } 

     public JsonResult MyProducts() 
     { 
      List<string> myStrings = new List<string>(); 
      myStrings.Add("AA"); 
      myStrings.Add("AB"); 
      return Json(myStrings, JsonRequestBehavior.AllowGet); 
     } 

     [HttpPost] 
     public ActionResult PostValues(sampleModel model) 
     { 

      string temp = model.SelectedItem; 
      return View("Index"); 

     } 

    } 

型號

public class sampleModel 
    { 
     public string SelectedItem { get; set; } 
    } 

VIEW

@model MyNamespace.sampleModel 

@Scripts.Render("~/bundles/jquery") 
@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 

@using(@Html.BeginForm("PostValues","Sample")) 
{ 
@Html.HiddenFor(model => model.SelectedItem) 


@(Html.Kendo().AutoComplete() 
     .Name("productAutoComplete") 
     .DataSource(source => 
     { 
       source.Read(read => 
      { 
       read.Action("MyProducts", "Sample") 
          .Data("onAdditionalData"); 
      }); 
     } 
    ) 
     .Events(e => e 
     .Select("autocomplete_select") 
     .Change("autocomplete_change") 
    ) 

) 

<input id="Button1" type="submit" value="PostValues" /> 
} 
<script> 
    function onAdditionalData() { 
     return { 
      text: $("#productAutoComplete").val() 
     }; 
    } 

    function autocomplete_select() 
    { 

    } 

    function autocomplete_change() { 
     $('#SelectedItem').val($("#productAutoComplete").val()); 
     alert($('#SelectedItem').val()); 
    } 


</script> 
+1

謝謝現在它的工作.... –

0

DataTextField方法是用於指定列表中的對象的屬性。如果你的結果集只是一個字符串列表,也許你不需要指定DataTextField;嘗試刪除它。

1

對於服務器過濾參考以下:

public JsonResult MyProducts(string text) 
{ 
    List<string> myStrings = new List<string>(); 
    myStrings.Add("Aa"); 
    myStrings.Add("ACB"); 
    myStrings.Add("cc"); 

    System.Text.RegularExpressions.Regex regEx = new System.Text.RegularExpressions.Regex(text, RegexOptions.IgnoreCase); 
    var results = myStrings 
     .Where<string>(item => regEx.IsMatch(item)) 
     .ToList<string>(); 

    return Json(results, JsonRequestBehavior.AllowGet); 
} 

UI:

@(Html.Kendo().AutoComplete() 
    .Name("productAutoComplete") 
    .DataSource(source => 
    { 
     source.Read(read => 
     { 
      read.Action("MyProducts", "Sample") 
       .Data("onAdditionalData"); 
     }) 
     .ServerFiltering(true); //If true the DataSource will not filter the data on the client. 
    } 
    ) 
    .Events(e => e 
     .Select("autocomplete_select") 
     .Change("autocomplete_change") 
    ) 
) 

腳本:

function onAdditionalData() { 
    return { 
     text: $("#productAutoComplete").val() 
    }; 
} 
相關問題