Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
884 views
in Technique[技术] by (71.8m points)

jquery - how to implement Dropdownlist list image selection as well as textbox in MVC4 RazorView

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

enter image description here

Can some one please share some sample code so that i can implement and also i have to save the values through form

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.

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="" />

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);
}

Assuming you have a viewmodel called CountryVM like

public class CountryVM
{
  public int ID { set;get;}
  public string Name { set;get;}
  public string FlagImg { set;get;}
}

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"
    }
]

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...