ASP.Net MVC: Creating an AutoComplete with Images for profile with MVC and Jquery

Sometime we need to create a autocomplete textbox in our projects, whihc containes images of the user. whether its MVc or Asp.net. JqueryUI have a control for this and you can leverage to make your wish fullfil. its need a Array of data. Here is the solution how to do that.
You need to take the reference of the latest jqueryui script.
On the View
<input type="text" id="txtUserSearch" />
<script type="text/javascript">
    $(document).ready(function () {
        $('#txtUserSearch').autocomplete({
            source: '@Url.Action("GetMatchingUser", "Home")',
            minLength: 1,
            select: function (event, ui) {
                window.location.href = '@Url.Action("ProfilePage", "UserProfile")' + '?who=' + ui.item.id;
            },
            }
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
            var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.image + '"></div><div class="label">' + item.label + '</div><div class="description">' + item.description + '</div></div></a>';
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append(inner_html)
                .appendTo(ul);
        };
    });

</script>
On the Controller

        public JsonResult GetMatchingUser(string term)
        {
            Response.CacheControl = "no-cache";
            YourDBContext DB = new YourDBContext();
            var usrScreenNamelst = DB.Users.Where(a => (a.UserScreenName.StartsWith(term) || a.UserFirstName.StartsWith(term) || a.UserLastName.StartsWith(term))).ToList();
string userProfileImagePath ="~/Images/";
            var lst = usrScreenNamelst.Select(m => new { id = m.UserId, value = m.UserScreenName, label = m.UserScreenName, description = m.UserFirstName + " " + m.UserLastName, image = Url.Content(userProfileImagePath + (string.IsNullOrEmpty(m.UserImage) ? "NoProfileImage.png" : m.UserImage)) }).ToList().Take(5);
            return Json(lst.ToArray(), JsonRequestBehavior.AllowGet);
        }

Comments

Post a Comment

Popular posts from this blog

LINQ: Using int.TryParse() within a LINQ where clause

I pretty new to LINQ, and I’m keen to get more experience using it, so whenever an opportunity arises I like to try writing LINQ queries. I needed to write a method to extract a comma separated list of numbers from a config file, and return this as List. I was looking at ways to do this using LINQ, but hit a problem. I wanted my LINQ query to filter out any values in the CSV string that could not be parsed as an int, without causing an exception. Using int.TryParse() seemed like a possible solution, but I had problems because the TryParse() method has an out parameter to store the parsed result. I ended up with the code below, which seems to work, but looks very messy, because I think it is parsing the string twice. public static List<int> AuthorisedGroups { get       {             string[] authorisedGroupsStr = ConfigurationManager.AppSettings["AuthorisedGroups"].Split(new char[] { ...
Read more

ASP.Net MVC: Configuring asp.net session state in SQL Server.

Image
Step 1 : Go to the command prompt and run the following  commanad aspnet_regsql.exe -S <ServerName>- E -ssadd -sstype p where < ServerName > is the  name of the server where your  Database is located. here for my local machine we have given (local). Before running the command we need to check  file v4.0.30319 on the following path C:\Windows\Microsoft.NET\Framework if it is not found then we need to install  it.   After running the command it will create database for SQL session tables. So now go to the SQL server and there we can see that it has created Database named “ASPState”. For more option here is the Link http://msdn.microsoft.com/en-us/library/ms229862(v=vs.80).aspx See the following image. Step 2: Now go to the Security Tab (outside the Database)> Login >app pool  user here for my local system it is pspl-PC21\pspl Right click on app pool user ( pspl-PC21\p...
Read more

IIS: Publish Project to remote IIS with Web Deploy.

Image
To Push a build is too much hectic task. Like you need to publish to local machine and then copy to the remote IIS. Then can be eased by directly push the build to the remote IIS through web deploy. For this there is 2 things you need configure on in the remote IIS and other on your project file. Configuration on Remote IIS To make this whole thing work you need to install Microsoft Web Deploy and you need to choose all the feature to be install on the machine. you need to add the feature of IIS Management Service. for this you need to make sure you have added Management tool feature to the IIS. Configuration on the Project side In the Visual Studio right click on the solution and make a rebuild. Then right click on the web project and select the menu "Publish". On the Profile tab Drop down list select New Custom Profile. Give a name to the publish Profile and click OK. Then click next and on the next tab "Connection" sele...
Read more