具有自动补全功能的JqGrid无法从控制器解析数据以进行查看 [英] JqGrid with autocompletion cant parse data from controller to view
问题描述
最近几天，我试图让具有自动补全字段的jqgrid正常工作，现在我可以使其与本地数据一起工作，但是一旦我尝试从控制器数据中获取数据就没有被解析.
Last few days i was trying to get jqgrid with autocompletion fields to work, now i can get it to work with local data, but as soon as i trying to get data from my controller data didnt get parsed.
查看代码:
{ name: 'EanNummer', index: 'EanNummer', width: 65, sortable: true, editable: true, edittype: 'text', editoptions: {
dataInit:
function (elem) {
$(elem).autocomplete({ minLength: 0, source: '@Url.Action("GetBrands")' })
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.Id + ", " + item.Name + "</a>")
.appendTo(ul);
};
}
}
},
如果不是源代码:url，我使用源代码:["c ++"，"java"，"php"，"coldfusion"，"javascript"，"asp"，"ruby"]例如代码可以正常工作并显示，因此我的控制器端代码一定有问题
if instead of source: url i use source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] for example code works fine and shows up, so something must be wrong with my controller side code
控制器代码:
public JsonResult GetBrands()
{
string vendorId = "";
var username = "";
var name = System.Web.HttpContext.Current.User.Identity.Name;
var charArray = name.Split("\\".ToCharArray());
username = charArray.Last();
vendorId = service.GetVendorIdByUsername(username);
List<String> list = new List<String>();
var brands = service.getBrandsByVendor(vendorId);
var s= (from brand in brands
select new
{
Id = brand.BrandId,
Name = brand.BrandName
}).ToList();
return Json(s);
}
推荐答案
如果在客户端使用item.Id和item.Name，则不应返回List<String>.取而代之的是，您应该返回new {Id=brand.BrandId, Name=brand.BrandName}的列表.您应该只使用LINQ而不是foreach:
If you use item.Id and item.Name on the client side you should return not the List<String>. Instead of that you should returns the list of new {Id=brand.BrandId, Name=brand.BrandName}. You should just use LINQ instead of foreach:
return Json ((from brand in brands
select new {
Id = brand.BrandId,
Name = brand.BrandName
}).ToList());
UPDATED: I modified for you the demo from the answer and included jQuery UI Autocomplete support in two forms. The standard rendering:
和自定义渲染:
The Autocomplete functionality works in Advanced Searching dialog in the same way like in the Searching Toolbar:
您可以从此处下载演示.
标准自动完成功能的服务器代码为
The server code of the standard autocomplete is
public JsonResult GetTitleAutocomplete (string term) {
var context = new HaackOverflowEntities();
return Json ((from item in context.Questions
where item.Title.Contains (term)
select item.Title).ToList(),
JsonRequestBehavior.AllowGet);
}
它以JSON格式返回字符串数组.标题列表由term参数过滤，该参数将初始化为在输入字段中键入的字符串.
It returns array of strings in JSON format. The list of Titles are filtered by term argument which will be initialized to the string typed in the input field.
自定义自动完成功能的服务器代码为
The server code of the custom autocomplete is
public JsonResult GetIds (string term) {
var context = new HaackOverflowEntities();
return Json ((from item in context.Questions
where SqlFunctions.StringConvert((decimal ?)item.Id).Contains(term)
select new {
value = item.Id,
//votes = item.Votes,
title = item.Title
}).ToList (),
JsonRequestBehavior.AllowGet);
}
它使用 SqlFunctions.StringConvert 可以使用LIKE比较整数.此外，它返回具有value和title属性的对象列表.如果返回具有value和lable属性的对象，则lable属性的值将显示在自动完成"上下文菜单中，并且相应的value属性将插入到输入字段中.我们改用自定义title属性.
It uses SqlFunctions.StringConvert to be able to use LIKE in comparing of the integers. Moreover it returns the list of objects having value the title property. If you would return objects having value the lable properties the values from the lable properties will be displayed in the Autocomplete context menu and the corresponding value property will be inserted in the input field. We use custom title property instead.
客户端的代码是
searchoptions: {
dataInit: function (elem) {
$(elem).autocomplete({ source: '<%= Url.Action("GetTitleAutocomplete") %>' });
}
}
用于标准渲染，
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
dataInit: function (elem) {
// it demonstrates custom item rendering
$(elem).autocomplete({ source: '<%= Url.Action("GetIds") %>' })
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a><span style='display:inline-block;width:60px;'><b>" +
item.value + "</b></span>" + item.title + "</a>")
.appendTo(ul);
};
}
}
用于自定义呈现.
另外，我使用一些CSS设置:
Additionally I use some CSS settings:
.ui-autocomplete {
/* for IE6 which not support max-height it can be width: 350px; */
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
}
/*.ui-autocomplete.ui-menu { opacity: 0.9; }*/
.ui-autocomplete.ui-menu .ui-menu-item { font-size: 0.75em; }
.ui-autocomplete.ui-menu a.ui-state-hover { border-color: Tomato }
.ui-resizable-handle {
z-index: inherit !important;
}
如果想要一些小尺寸，可以取消注释.ui-autocomplete.ui-menu { opacity: 0.9; }设置
自动完成上下文菜单中的不透明效果.
You can uncomment .ui-autocomplete.ui-menu { opacity: 0.9; } setting if you want to have some small
opacity effect in the autocomplete context menu.
这篇关于具有自动补全功能的JqGrid无法从控制器解析数据以进行查看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
