如何在MVC4 RazorView中实现Dropdownlist列表图像选择以及文本框
大家好我必须实现一个下拉列表，其中包含带有国家代码的图像和一个与之关联的文本框我将分享您在下面的屏幕截图，我希望在我的表单中使用MVC4 + Razor实现任何帮助将不胜感激。我想要一个Mobile No字段，我想保存在我的表单中
有人可以分享一些示例代码，以便我可以实现，我也必须通过表单保存值
这看起来像是一个启用了自动完成function的文本框。 您可以使用任何自动完成插件（如jQuery UI库自动完成）来实现此function.jQuery ui允许您自定义自动完成选项项的HTML标记以包含图像。
第一步是将jQuery ， jQuery UI库加载到您的页面。
接下来，在我们看来，我们需要一个文本框，我们需要这个function。
下一步是在控制器中编写一个动作方法，以JSON格式返回所需的数据。
public ActionResult Countries(string term) { var list=new List(); // 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的视图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", "Name": "US", "FlagImg": "http://yoursite/in.jpg" } ]
让我们回到客户端，在视图中我们有文本框，现在我们需要在该文本框上启用自动完成插件。 默认情况下，插件将在自动建议下拉列表中呈现listitem（
）。 我们需要告诉插件来构建我们的自定义标记（包括标志图像）。 我们可以使用create方法进行我们想要的定制。 所以有这个javascript代码来做到这一点。
而已。 这应该为您提供自动完成function，其中包含图像。
据我所知， dropdown和textbox是不同的，并且彼此相邻。 根据dropdown项目选择， textbox值会更改。
用于下拉链接的图像下拉检查
http://fairwaytech.com/2012/08/adding-images-select-lists-mvc3/