大家好我必须实现一个下拉列表,其中包含带有国家代码的图像和一个与之关联的文本框我将在下面分享我想要在我的表单中使用MVC4 Razor实现的任何帮助将会受到赞赏.我想要一个移动没有要我保存在表单中的字段
解决方法
这看起来像是一个启用了自动完成功能的文本框.您可以使用任何自动完成插件(如jQuery UI库自动完成)来实现此功能.jQuery ui允许您自定义自动完成选项项的HTML标记以包含图像.
第一步是将jQuery,jQuery UI库加载到您的页面.
接下来,在我们看来,我们需要一个文本框,我们需要这个功能.
<input id="countrySearch" value="" />
下一步是在控制器中编写一个动作方法,以JSON格式返回所需的数据.
public ActionResult Countries(string term)
{
var list=new List<CountryVM>();
// Hardcoding 2 items for demo.
//to do : read data from your db and build the list.
list.Add(new CountryVM { ID=1,Name="US",FlagImg="http://yoursite/usa.jpg"});
list.Add(new CountryVM { ID=2,Name="IN",FlagImg="http://yoursite/in.jpg"});
return Json(list,JsonRequestBehavior.AllowGet);
}
假设您有一个名为CountryVM的视图模型
public class CountryVM
{
public int ID { set;get;}
public string Name { set;get;}
public string FlagImg { set;get;}
}
所以这个动作方法将返回这样的JSON数据.
[
{
"ID": "1","Name": "US","FlagImg": "http://yoursite/usa.jpg"
},{
"ID": "1","FlagImg": "http://yoursite/in.jpg"
}
]
让我们回到客户端,在视图中我们有文本框,现在我们需要在该文本框上启用自动完成插件.默认情况下,插件将在自动建议下拉列表中呈现listitem(< li>).我们需要告诉插件来构建我们的自定义标记(包括标志图像).我们可以使用create方法进行我们想要的定制.所以有这个javascript代码来做到这一点.
<script type="text/javascript">
$(function(){
$("#countrySearch").autocomplete({
source: function (request,response) {
$.ajax({
url: "@Url.Action("Countries","Home")",success: function (data) {
response($.map(data,function (item) {
return { label: item.Name,value: item.ID,image: item.FlagImg };
}))
}
})
},create: function () {
$(this).data('ui-autocomplete')._renderItem = function (ul,item) {
return $('<li>')
.append("<a><div><img src='" +item.image+ "' />"
+item.label+"</div></a>")
.appendTo(ul);
};
},select: function (event,ui) {
//you can access ui.item to get the selected item object.
console.log("Selected item id : " + ui.item.value);
return false;
}
});
});
</script>
