I was wondering is there a way to list image and label using #Html.DropDownListFor helper in MVC razor?
Something like this:
(source: dotnetspeaks.com)
There's nothing like this built into MVC, but I'm sure there are many 3rd-party components. I personally use dijit for this kind of thing, but since you have JQuery as one of your tags, you could probably use the Menu from JQuery UI.
DropDownListFor renders a <select>. This HTML element does not support an image in the list. you will need to use a JavaScript library to get this effect. several of the libraries use a <select> as the basis (they hide the select but get values form it.) there are dozens of select replacement libraries.
Have a look at this tutorial, this will help you creating drop down list with images.
look here. It is jquery, it is easy to implement with a few lines
<link rel="stylesheet" type="text/css" href="../Scripts/msdropdown/dd.css" />
<script type="text/javascript" src="../Scripts/msdropdown/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/msdropdown/js/jquery.dd.js"></script>
<div>
<select name="webmenu" id="webmenu">
<option value="calendar" title="~/Content/Images/arrow.png">Calendar</option>
<option value="shopping_cart" title="~/Content/Images/SendtoFriend.jpg">Shopping Cart</option>
<option value="cd" title="~/Content/Images/facebook.png">CD</option>
<option value="email" title="~/Content/Images/Email.png">Email</option>
<option value="faq" title="~/Content/Images/VotePositive.png">FAQ</option>
<option value="games" title="~/Content/Images/VoteNegative.png">Games</option>
</select>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#webmenu").msDropDown();
});
</script>
In order to work. I have to changed a Little.. I prefer to use title to show the image. It Works to me
Related
I'm trying to automate html events using c#.
I have html dropdown and on change of its value it shows/hides specific divs.
Below is sample HTML code.
<!DOCTYPE html>
<html>
<body>
<select id="ddl">
<option value="1" selected="selected">TextBox</option>
<option value="2">Button</option>
</select>
<input style="display: none" type="text" class="textboxclass" />
<div class="btn" style="display: none">
<button type="button">Submit</button>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$('#ddl').change(function()
{var name = $('#ddl option:selected').text();
var id = $('#ddl option:selected').val();
if(id =="1"){$('.textboxclass').show();$('.btn').hide();}
else{$('.textboxclass').hide();$('.btn').show();}});
</script>
</body>
</html>
I'm using mshtml.dll to read the HtmlDocument and I have to fire "change" event programmatically.
Tried different ways like below ones:
HTMLOptionElement drpelem.select=true; HTMLSelectElement
elem.click();
But it's not working. Please guide me.
I think this question was already asked and answered in a different form, here: https://stackoverflow.com/a/1456714/19020 or here: https://stackoverflow.com/a/11175179/19020 -- since mshtml is used by Internet Explorer.
But really, to load a full browser experience you'll need to load an ActiveX control, or COM control or whatever they're called by Microsoft nowadays. As far as I know, mshtml.dll just renders the HTML.
Is there any technique that can be used to get attributes of an element in a web page? I'm trying to get properties of elements such as Links, Buttons, check boxes and Radio Buttons for test automation purposes to make it more easier. But I couldn't find any solution. I heard that CODEDUI can be used. If so, how can I implement it?
As you have mentioned html tag in your question, one solution is using jQuery like this:
$( elemement ).attr( "attribute" )
you do not get property of html page with program language php and c# you should useing jquery and Similar libraries or JavaScript .
for this problem you must using this code in select html with jquery :
<select id="selectVehicle">
<option value="1" data-year="2011">Mazda</option>
<option value="2" data-year="2015">Honda</option>
<option value="3" data-year="2008">Mercedes</option>
<option value="4" data-year="2005">Toyota</option>
</select>
$("#selectVehicle").change(function () {
alert($(this).find(':selected').data("year"));
});
or get attribute of elements :
$(this).attr('data-fullText');
So I have a listbox I want to change, that looks like this:
How do I change the July value? I need this to be 100% automated and change it to January. I made a lot of accounts on various websites and need to change them all back to the same birthdate. Yes, I'm aware I'll have to find the ID of it, etc.
View the HTML of the website and identify the id and values of the dropdownlist, for example:
<select id="bdayMonthId" size="1" name="bdayMonth">
<option value="">Month</>
<option value="Jan">January</>
<option value="Feb">February</>
<option value="Mar">March</>
</select>
To pre-select the dropdownlist value in the WebBrowser control use this Winform code:
webBrowser1.Document.GetElementById("bdayMonthId").SetAttribute("value", "Feb");
I'm a bit confused about your question. If you just want to alter an element in the HTML, Jeremy's answer is the best, and simplest, way to go. If you wanted to call the document's javascript, this should work:
Let's assume that the webbrowser's document contains the following HTML:
<html>
<head>
<title>Invoke Test</title>
</head>
<body>
<div id="testdiv">Waiting...</div>
<script>
function changeDate(date) {
var x=document.getElementById("testdiv");
x.innerHTML = date;
}
</script>
</body>
</html>
To invoke the webbrowser document's javascript method, you can use something like this:
private void button1_Click(object sender, EventArgs e)
{
object o = webBrowser1.Document.InvokeScript("changeDate('june')");
}
No System.Web, ASP, ScriptManagers or Interop are needed. All the tools you need to control webbrowser and document objects and events come with the webbrowser control.
I am trying to create tabs in my mvc application using jquery ui.
I tried the following code:
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tabs').tabs();
});
</script>
<div id="tabs">
<ul>
<li>Exploded pie slice</li>
<li>Normal pie chart</li>
</ul>
<div id="tabs-1">#(Html.Partial("PartialView1"))</div>
<div id="tabs-2">#(Html.Partial("PartialView2"))</div>
</div>
I saw something like the above code in jquery ui demo. Please advice me what I'm missing in my code because I only get two links instead of tabs and my two partial view pages are displayed in the index page.
Thanks,
Anandaraj
You haven't included the jQuery UI CSS file.
Either use the default skin, or pick one, or even build your own.
Bear in mind that you'll need all the images too, so follow my second link to download the whole theme (either an existing one or one you have built).
So I have a listbox I want to change, that looks like this:
How do I change the July value? I need this to be 100% automated and change it to January. I made a lot of accounts on various websites and need to change them all back to the same birthdate. Yes, I'm aware I'll have to find the ID of it, etc.
View the HTML of the website and identify the id and values of the dropdownlist, for example:
<select id="bdayMonthId" size="1" name="bdayMonth">
<option value="">Month</>
<option value="Jan">January</>
<option value="Feb">February</>
<option value="Mar">March</>
</select>
To pre-select the dropdownlist value in the WebBrowser control use this Winform code:
webBrowser1.Document.GetElementById("bdayMonthId").SetAttribute("value", "Feb");
I'm a bit confused about your question. If you just want to alter an element in the HTML, Jeremy's answer is the best, and simplest, way to go. If you wanted to call the document's javascript, this should work:
Let's assume that the webbrowser's document contains the following HTML:
<html>
<head>
<title>Invoke Test</title>
</head>
<body>
<div id="testdiv">Waiting...</div>
<script>
function changeDate(date) {
var x=document.getElementById("testdiv");
x.innerHTML = date;
}
</script>
</body>
</html>
To invoke the webbrowser document's javascript method, you can use something like this:
private void button1_Click(object sender, EventArgs e)
{
object o = webBrowser1.Document.InvokeScript("changeDate('june')");
}
No System.Web, ASP, ScriptManagers or Interop are needed. All the tools you need to control webbrowser and document objects and events come with the webbrowser control.