Display companyname and logo in dropdownlist - c#

I want to display company name and logo in dropdownlist.I have fetch all the company name in dropdownlist but i am not able to add logo with name.
I have xml file where company name and images are specified.
Structure of xml file:
<ente>
<nazione>ALBANIA</nazione>
<name>Tirana</name>
<img>tvsh-albania.png</img>
<descri>TVSH - Rruga Ismail Quemali 11, Tirana</descri>
<latitudine>41.321102</latitudine>
<longitudine>19.823112</longitudine>
<zoom>-4</zoom>
</ente>
I have all images in image folder also.
I have use this code:
Protected Sub BindDataToGridviewDropdownlist()
Dim xmlreader As New XmlTextReader(Server.MapPath("XMLFILE.xml"))
Dim ds As New DataSet()
ds.ReadXml(xmlreader)
xmlreader.Close()
If ds.Tables.Count <> 0 Then
ddlDetails.DataSource = ds
ddlDetails.DataTextField = "nome"
ddlDetails.DataValueField = "nome"
ddlDetails.DataBind()
End If
End Sub
What i need to do so i can also display image with company name.

Dropdown list out of the box does not support adding images. Look for 3rd party components.

I think it's quite hard to achieve in html and .net but it should be easier with a jQuery plugin, for example this one

Try this using jQuery
http://www.htmldrive.net/items/show/749/Image-Select-Elements-with-jQuery-and-CSS3.html
Or try this
http://designwithpc.com/Plugins/ddSlick
At example 2.. the HTML need to look like this
<select id="demo-htmlselect">
<option value="0" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
data-description="Description with Facebook">Facebook</option>
<option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
data-description="Description with Twitter">Twitter</option>
<option value="2" selected="selected" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
data-description="Description with LinkedIn">LinkedIn</option>
<option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
data-description="Description with Foursquare">Foursquare</option>
</select>
You can create that HTML from Code Behind by binding to a repeater
<asp:Repeater id="rp" runat="server">
<HeaderTemplate>
<select id="demo-htmlselect">
</HeaderTemplate>
<ItemTemplate>
<option value='<%#Container.DataItem("name")%>' data-imagesrc='<%#Container.DataItem("img")%>'
data-description='<%#Container.DataItem("descri")%>'>
<%#Container.DataItem("name")%>
</option>
</ItemTemplate>
<FooterTemplate>
</select>
</FooterTemplate>
</asp:Repeater>

Related

SelectValue on non-asp select list in ASP.NET C# (4.5)

I have the following html code (index.aspx):
<select class="ct-input ct-term" name="term">
<option value="5">5</option>
<option value="10">10</option>
</select>
I would like to select the proper item of the select list, regarding to querystring, from the code behind on the page load event. Is it possible? Querystring looks like: index.aspx?term=10 (10, so select the option with the value of 10).
I had the same issue with number input, but that one was easy, all I had to do was make it runat="server", then write name.Value = "something".
Unfortunately that won't work here, because my form doesn't have the attr runat="server", and I don't wanna add it, because then it would add a viewstate too and make the url unreadable. Is there any other solution? Ps.: form's method must be GET.
You could set the correct item into ViewBag in your action and in the view set selected based on the value in ViewBag. eg:
public ActionResult (int term){
ViewBag.Term=term;
return View();
}
<select class="ct-input ct-term" name="term">
<option value="5" <% if(ViewBag.Term==5){<text>selected</text>} %> >5</option>
<option value="10" <% if(ViewBag.Term==10){<text>selected</text>} %> >10</option>
</select>

Getting HTML drop down list value from code behind

I have drop down list and asp button in my page like this:
<select id="select1" >
<option value="smiley.gif">Smiley</option>
<option value="angry.gif">Angry</option>
<option value="stickman.gif">Stickman</option>
</select>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
Once the button is clicked, I need to get the selected value from the drop down list and save it in the session.
But when the list is changed, it should not reload the page (Simply I don't need to use runat="server").
How to do this?
You get the value from the Request object.
Edit, thanks to comment by #Péter, add name property to the select element:
<select id="select1" name="select1">
<option value="smiley.gif">Smiley</option>
<option value="angry.gif">Angry</option>
<option value="stickman.gif">Stickman</option>
</select>
In code-behind:
var selectedOption = Request["select1"];
Though, if you are using asp.net I suggest you use the server version (runat=server) of the select and thereby could access the value directly from a Select object in code-behind.
To avoid postback you can set AutoPostback=false, the following solution would not post back when selecting a value in the drop down list. And you get the bonus of type safety etc by using an asp.net control for your drop down:
<asp:DropDownList id="select1" runat="server" AutoPostback="False">
<asp:ListItem Value="smiley.gif" Text="Smiley"/>
<asp:ListItem Value="angry.gif" Text="Angry"/>
<asp:ListItem Value="stickman.gif" Text="Stickman"/>
</asp:DropDownList>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
In code-behind:
var selectedOption = select1.SelectedValue;
You need to set name of the html control, and then you can get it from Request Object.
<select id="select1" name="myselect" >
<option value="smiley.gif">Smiley</option>
<option value="angry.gif">Angry</option>
<option value="stickman.gif">Stickman</option>
</select>
Inside you button click event handler:
string selection = Request["myselect"];

Accessing htmlcontrols from codebehind

Is there any way to access html controls in ASP.net code behind.
Some control similar to Findcontrol() to access the html controls. I am using
HtmlSelect htsel1;
htsel1 = (HtmlSelect)FindControl("stage_txt1");
but htsel1 is returning null.
You need to add runat=server and an ID.
aspx:
<select id="stage_txt1" runat=server" >
<option value="1">stage 1</option>
<option value="2">stage 2</option>
<option value="3">stage 3</option>
<option value="4">stage 4</option>
</select>
codebehind:
HtmlSelect myDdl = (HtmlSelect)FindControl("stage_txt1");
or just use the servercontrols like Panel instead of div or TextBox instead of HtmlInputText or DropDownList instead of HtmlSelect and so on.
If the page is the NamingContainer( they are not nested in child-controls like Repeater) you can also access them directly without to use FindControl.
HtmlSelect myDdl = this.stage_txt1;
You need the runat="server" attribute. For instance:
<div id="myServerSideDiv" runat="server"></div>
Just give the html element a runat="server" and id attribute and the control will be accessable from code behind

Using databinding to populate a HtmlSelect with optgroup elements in asp.net

I am using asp.net and have a HtmlSelect element on my page (with runat="server"). Normally I will just set the DataSource to some loaded data and DataBind. However in this case the data has one level of hierarchy and I want to represent this in the HTML with an optgroup. Google hasn't come up with any joy - is this even possible?
I've had a similar problem to solve and this is how I did it. Before I continue I did find all sorts of re-fracturing methods for lists, which probably do work. However, I did not think this the best route to go for my solution. Here's what I did:
I also needed to know which option a user selected in the drop down list but found that you can't build drop down list with option groups in ASP.net. So to do this I just built a simple <select> with <optgroup>'s and <option>'s in each group. Then I placed a <div> with a hidden textbox, which had the runat="server" set. I set the "onchange" event, on the select, to change the text value of the hidden textbox to whatever the value the option was, which was selected by the user, using javascript. Then, when the post back occurs, the code behind had access to the value the user selected, via the hidden textbox's runat="server". Problem solved! The code looks something like this:
Code in the HTML (aspx):
<div id="selectDiv">
<select id="selectItems" onchange="document.getElementById('hiddenselectDiv').getElementsByTagName('input')[0].value = this.options[this.selectedIndex].value;">
<optgroup label="Johannesburg">
<option value="Wilropark">Wilropark</option>
<option value="Bryanpark">Bryanpark</option>
<option value="Hurlingham">Hurlingham</option>
<option value="Midrand ">Midrand </option>
<option value="Glenvista">Glenvista</option>
<option value="Sunninghill">Sunninghill</option>
<option value="Edenvale ">Edenvale </option>
<option value="Parkhurst">Parkhurst</option>
</optgroup>
<optgroup label="Cape Town">
<option value="Tokai">Tokai</option>
<option value="Durbanville">Durbanville</option>
</optgroup>
<optgroup label="Durban">
<option value="Musgrave">Musgrave</option>
</optgroup>
<optgroup label="Pretoria">
<option value="Hatfield">Hatfield</option>
</optgroup>
</select>
</div>
<div id="hiddenSelectDiv">
<!--
Note: You probably want to set the hidden value to the first item you have seleced when you build the <select> object.
-->
<input type="hidden" id="selectedItem" value="Wilropark">
</div>
In the Code behind (C#):
if (!string.IsNullOrEmpty(selectedItem.Value))
{
//validation or whatever you want....
}
I've been looking around for the same thing, and it doesn't look like ASP supports this natively. One Google search found someone recommending a library at http://www.codeplex.com/SharpPieces, but I've never used it and I don't know how good it is. Other people talk about writing your own renderer for optgroup support.

Call JQuery from C# PageLoad

Is there any way how to call JQuery function from PageLoad C# file?
Basically I have some selects, some inputs which are not generated by C# code but are defined in .aspx file manually. When I send form get query to another page I would like to set same variables that are defined in querystring. I know how to do that when I use runat="Server" but I want pure JQuery solutions without having runat="server" objects.
Example:
Select input:
<form method="get" action="/list/search">
<select id="txtSearchFullTyp" name="typ">
<option value="all">Sell, Rent</option>
<option value="1">Sell</option>
<option value="2">Rent</option>
<select>
</form>
Now after sending querystring to another page I am analyzing querystring and running function with defined parameter.
I want to be able to set form to querystring defined as "typ". I dont know how to do it from C# when I dont have runat="Server" option.
Is there a way to do this?
Thanks.
Here's a code for it. It's quite hacky but nevertheless it answers your question:
<form method="get" action="/list/search">
<select id="txtSearchFullTyp" name="typ">
<option value="all">Sell, Rent</option>
<option value="1">Sell</option>
<option value="2">Rent</option>
<select>
</form>
<asp:Literal runat="server" ID="litJqueryCode"/>
and from the code behind you can do the following
litJqueryCode.Text = "<script type='text/javascript'>$(function(){ $('#txtSearchFullTyp').val('"+ Request.QueryString["dropdownValue"] +"') })</script>";

Categories