如何实现DROPDOWNLIST列表图像选择以及文本中MVC4 RazorView [英] how to implement Dropdownlist list image selection as well as textbox in MVC4 RazorView
问题描述
大家好我要实现一个DROPDOWNLIST其中包含与国家code，并与相关的一个文本框图像我正在分享你所有下面的截图，我想在我的MVC4 +剃刀查看任何帮助形式来实现将AP preciated.I想要一个手机号码字段，我想在我的形式保存
Hi all I have to implement one Dropdownlist which contains the image with country code and one textbox associated with that i am sharing you all the below screenshot which i want to Implement in my Form with MVC4+Razor View any help will be appreciated.I want one Mobile No field which i want to save in my form
有人能请分享一些样品code，这样我就可以实现，也是我经历的形式来保存值
Can some one please share some sample code so that i can implement and also i have to save the values through form
推荐答案
这看起来像上启用了自动完成功能的文本框。您可以使用任何自动完成插件像jQuery UI库自动完成，实现this.jQuery用户界面允许您自定义自动完成选项项目的HTML标记包括图像。
This looks like a textbox with auto complete feature enabled on that. You can use any autocomplete plugin like jQuery UI library autocomplete to achieve this.jQuery ui allows you to customize the autocomplete option item's HTML markup to include the image.
第一步是加载在的的jQuery 的 jQuery UI的的库到您的网页。
The first step is to load the jQuery, jQuery UI libraries to your page.
接下来，在我们看来，我们需要一个文本框，我们需要这个功能。
Next, In our view, we need a textbox where we need this feature.
<input id="countrySearch" value="" />
下一步是写在你的控制器的操作方法，该方法以JSON格式返回所需的数据。
Next step is to write an action method in your controller which returns the data you want in JSON format.
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数据。
So this action method will return JSON data like this.
[
{
"ID": "1",
"Name": "US",
"FlagImg": "http://yoursite/usa.jpg"
},
{
"ID": "1",
"Name": "US",
"FlagImg": "http://yoursite/in.jpg"
}
]
让我们再回到客户端，在出鉴于我们有我们的文本框，现在我们需要启用在该文本框自动完成插件。默认情况下，插件会呈现一个列表项（＆LT;立GT; ）的自动提示下拉列表。我们需要告诉插件来构建我们定制的标记（其中包括标志图像）来代替。我们可以使用创建的方法做我们想要的定制。因此，有这个JavaScript code做到这一点。
Let's go back to client side, In out view we have our textbox, now we need to enable autocomplete plugin on that textbox. By default, the plugin will render a listitem(<li>) in the auto suggest dropdown. We need to tell the plugin to build our customized markup (Which includes the flag image) instead. We can use the create method to do the customization we want. So have this javascript code to do that.
<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>
就是这样。这应该给你内部的图像的自动完成功能。
That's it. This should give you the autocomplete feature with images inside that.
这篇关于如何实现DROPDOWNLIST列表图像选择以及文本中MVC4 RazorView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
