I have a bootstrap alert like so :
<div class="alert alert-danger">
×
First Error
</div>
My problem is I want to be able to change this text dynamically in my code behind, c#. Ideally, I would like to have multiple bullet pointed error messages in one alert like the image below:
Can anyone provide me with any ideas of how to achieve this?
In your html, have this
<div id="BootstrapErrorMessage" runat="server">
</div>
and in your code, do this
....
MyErrorString += "<li>Bad Password</li>";
....
MyErrorString += "<li>Invalid Date</li>";
....
if (!MyErrorString.isNullOrEmpty()) {
BootstrapErrorMessage.InnerHtml += "×" +
"<ul>" + MyErrorString + "</ul>";
BootstrapErrorMessage.Attributes["class"] = "alert alert-danger";
}
You can download the error messages to the client when he request the model of your page(recommended solution). Or you can post your data to the server and get list of errors to show.
Your html code should be like this:
<div class="bs-example">
<div class="alert alert-danger fade in">
<ul>
<li><strong>First</strong> Error </li>
<li>Second Error</li>
</ul>
</div>
</div>
And each li element should be updated from server(One of the options you choose).
Related
The problem is that I can not check if there is a file on the page.
There is a code in which this image is present:
<div class="specials-block">
<a href="/ru/actions/443">
<div class="specials-block-item icons-guide ico1" data-amount="5" data-toggle="tooltip" data-html="true" data-placement="bottom" title="" data-original-title="">
</div>
</a>
<div class="specials-block-item">
<img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAEsA......8X2F0UZvgYHv0AAAAASUVORK5CYII=">
</div>
</div>
And the code in which this image is missing:
<div class="specials-block">
<a href="/ru/actions/443">
<div class="specials-block-item icons-guide ico1" data-amount="5" data-toggle="tooltip" data-html="true" data-placement="bottom" title="" data-original-title="">
</div>
</a>
<div class="specials-block-item">
</div>
</div>
In order to check whether this image is present, I do a check:
var intelAtom = driver.FindElement(By.XPath("/html/body/div[5]/div[4]/div/div[1]/div[1]/div[5]/div[1]/div/img[#src='------------------------------']"));
if (intelAtom.Displayed)
{
MessageBox.Show("All is OK");
}
else
{
MessageBox.Show("WTF O_o , displayed enother Icon");
}
but I need to check both the presence of the image and if the img dislayed that the desired image is displayed.
Somthing like this:
if (driver.FindElement(By.XPath("/html/body/div[5]/div[4]/div/div[1]/div[1]/div[5]/div[1]/div/img")).Displayed)
{
var intelAtom = driver.FindElement(By.XPath("/html/body/div[5]/div[4]/div/div[1]/div[1]/div[5]/div[1]/div/img[#src='------------------------------']"));
if (intelAtom.Displayed)
{
MessageBox.Show("All is OK");
}
else
{
MessageBox.Show("WTF O_o , displayed enother Icon");
}
}
else
{
MessageBox.Show("WTF O_o , Icon Intel Pentium is't displayed");
}
But if I start second query, it was failed, because it didn't find img file
driver.FindElement(By.XPath("/html/body/div[5]/div[4]/div/div[1]/div[1]/div[5]/div[1]/div/img"))
.
Perhaps someone knows how to build the right query in order to determine whether the image was displayed on the page and the correct image was displayed
I currently have a piece of Razor script, which talks to a ViewModel containing questions and Answers pertaining to an FAQ page.
I'm aiming for this to be content-manageable through the use of a for loop as per my below code.
<div class="col-lg-6">
#if (questions.Length == answers.Length)
{
for (int i = 0; i < questions.Length; i++)
{
var html = string.Format(#"
<div class='panel-group' id='accordion{1}'>
<div class='panel panel-default'>
<div class='panel-heading' data-toggle='collapse' data-parent='#accordion{1}' data-target='#collapse{1}'>
<h4 class='panel-title'>
<a class='accordion-toggle collapsed'>{0}</a>
</h4>
</div>
<div id='collapse{1}' class='panel-collapse collapse '>
<div class='panel-body'>
{2}
</div>
</div>
</div>", questions[i], IDGenerator, answers[i]);
#Html.Raw(html)
IDGenerator.Append("1");
}
}
#{
IDGenerator.Clear();
}
This is working rather well at the moment; I am able to update Questions/answers on my DB and populate that on my view dynamically, absolutely fine.
The problem is, I need to be able to translate them through the use of Resource files, I can do this fine with static values (labels, buttons etc) but I have absolutely no idea how to do this with the use of a loop and dynamic values.
Is this possible to do at all?
I am trying to resolve the links in a google search results list by executing a javascript on the page that would normally resolve when you click the link. Basically, I am trying to resolve all of them when the page loads.
Here is the html generated by google of the first two search results:
<H2 class=hd>Search Results</H2>
<DIV id=ires>
<OL id=rso eid="3gHFUYToG6LD0gGJ2IDAAQ">
<LI class=g>
<DIV class=rc data-hveid="43"><SPAN style="FLOAT: left"></SPAN>
<H3 class=r><A onmousedown="return rwt(this,'','','','1','AFQjCNH7JvhrnBRwX-7DKsGJZoasX9zqFA','','0CCwQFjAA','','',event)" href="http://prezi.com/wnx5jat2oene/ipad/">IPad by <EM>Frunk La Je</EM> on Prezi</A></H3>
<DIV class=s>
<DIV>
<DIV style="WHITE-SPACE: nowrap" class="f kv"><CITE>prezi.com/wnx5jat2oene/ipad/</CITE>
<DIV class="action-menu ab_ctl"><A aria-haspopup=true aria-expanded=false id=am-b0 class="clickable-dropdown-arrow ab_button" role=button href="#" jsaction="ab.tdd; keydown:ab.hbke; keypress:ab.mskpe" data-ved="0CC0Q7B0wAA" aria-label="Result details"><SPAN class=mn-dwn-arw></SPAN></A>
<DIV class="action-menu-panel ab_dropdown" role=menu tabIndex=-1 jsaction="keydown:ab.hdke; mouseover:ab.hdhne; mouseout:ab.hdhue" data-ved="0CC4QqR8wAA">
<UL>
<LI class="action-menu-item ab_dropdownitem" role=menuitem><A class=fl onmousedown="return rwt(this,'','','','1','AFQjCNHsvjmPpYAOeqVOHIIs_PWPuD5JaQ','','0CC8QIDAA','','',event)" href="http://webcache.googleusercontent.com/search?q=cache:bKCj-2ogWdIJ:prezi.com/wnx5jat2oene/ipad/+frunk+la+je&cd=1&hl=en&ct=clnk&gl=us">Cached</A></LI></UL></DIV></DIV></DIV>
<DIV class="f slp"></DIV><SPAN class=st>IPad. No description. by <EM>Frunk La Je</EM> on 7 June 2012 4 Tweet <B>...</B> thanks</a></p>. Make a copy Share Embed Like. by <EM>Frunk La Je</EM> on 7 June 2012 4.</SPAN></DIV></DIV></DIV></LI>
<LI class=g>
<DIV class=rc data-hveid="48"><SPAN style="FLOAT: left"></SPAN>
<H3 class=r><A onmousedown="return rwt(this,'','','','2','AFQjCNE7-nvy-ymTrBI0x4zleJOUXlY6nA','','0CDEQFjAB','','',event)" href="http://prezi.com/user/q53evqg1dnrn/"><EM>Frunk La Je</EM> on Prezi</A></H3>
<DIV class=s>
The function that resolves the first link:
onmousedown="return rwt(this,'','','','1','AFQjCNH7JvhrnBRwX-7DKsGJZoasX9zqFA','','0CCwQFjAA','','',event)"
I tried this:
foreach (HtmlElement h in web.Document.All)
{
h.RaiseEvent("onmousedown");
}
I tried replacing "onmousedown" with "MouseDown".
I tried this too:
web.Document.InvokeScript("rwt(this,'','','','1','AFQjCNH7JvhrnBRwX-7DKsGJZoasX9zqFA','','0CCwQFjAA','','',event)");
Any ideas how I can get this function to execute? I've also looked at the getElementByID function, but I don't know what the ID is for this.
Try to simulate a click programmatically, let's say in one of your anchor tag <a>. Now using your own code we will simulate a click on your first anchor tag which is subscript 0 (as shown below), like this:
HtmlElement simulateClickAnchor = webBrowser1.Document.GetElementsByTagName("a")[0];
simulateClickAnchor.InvokeMember("click");
HtmlDocument doc = browser.Document;
HtmlElement head = doc.GetElementsByTagName("head")[0];
HtmlElement s = doc.CreateElement("script");
s.SetAttribute("text","function sayhello() { alert('hello'); }");
head.AppendChild(s);
browser.Document.InvokeScript("sayHello");
link to Jasny http://jasny.github.com/bootstrap/javascript.html#fileupload
link to what the form looks like http://img507.imageshack.us/img507/3308/picpx.png
I am using the Jasny Javascript file upload in my boot strap project, it looks like this:
ASP\HTML VIEW
<div class="row-fluid">
<div class="fileupload fileupload-new" data-provides="fileupload"><input type="hidden">
<div class="input-append">
<div class="uneditable-input span2" runat="server" id="statment1"><i class="icon-file
fileupload-exists"></i> <span class="fileupload-preview" style=""></span></div><span
class="btn btn-file"><span class="fileupload-new">Select file</span><span
class="fileupload-exists">Change</span><input type="file"></span><a href="#" class="btn
fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>
How do I go about using this in the code behind to save the attached file to my server as I would using the C# asp.net File Upload?
In ASP.net C# I would normally do this in the code behind:
ASP.net C# CodeBehind
string filename = FileUpload1.PostedFile.FileName;
FileUpload1.PostedFile.SaveAs(Path.Combine(Server.MapPath("\\Document"),
filename).ToString());
filelocation = "Document\\" + filename;
media = "Document";
The Jasny github explains how to set the layout using bootstrap which is great as it looks really good (much better than the boring asp file upload) but How do I actually get I to post on my button click? I would really like to get this to work as I think it looks heaps nicer.
Since you want to do this without a standard asp.net control, you will have to do some of the wiring that asp.net does for you.
Make sure your input has an id. I will set it here to myFile.
<div class="row-fluid">
<div class="fileupload fileupload-new" data-provides="fileupload"><input type="hidden">
<div class="input-append">
<div class="uneditable-input span2" runat="server" id="statment1">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview" style=""></span>
</div>
<span class="btn btn-file"><span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span><input id="myFile" type="file" runat="server">
</span>
<a href="#" class="btn fileupload-exists" data-dismiss="fileupload" >Remove</a>
</div>
</div>
</div>
Your page should now have a HtmlInputFile control to your page. like this:
protected HtmlInputFile myFile;
Then you should be able to receive the file:
if (IsPostBack)
{
if (myFile.PostedFile != null)
{
// File was sent
var postedFile = myFile.PostedFile;
int dataLength = postedFile.ContentLength;
byte[] myData = new byte[dataLength];
postedFile.InputStream.Read(myData, 0, dataLength);
}
else
{
// No file was sent
}
}
I need to write some code that places one of 3 choices of "blocks" of html in a specified place on the page. How can I do this?
I was thinking I can use single value databinding, but I don't think this is the correct way.
I'm using ASP.NET c#.
Edit: here is what it might look like:
MapPlaceholder.InnerHtml = #"<div class="mapContainer smallMap" id="smallGrid" runat="server" visible="false">
<div id="node1" class="gridBox" runat="server">
</div>
<div id="node2" class="gridBox" runat="server">
</div>
<div id="node3" class="gridBox" runat="server">
</div>
<div id="node4" class="gridBox" runat="server">
</div>
<div id="node5" class="gridBox" runat="server">
</div>
<div id="node6" class="gridBox" runat="server">
</div>
<div id="node7" class="gridBox" runat="server">
</div>
<div id="node8" class="gridBox" runat="server">
</div>
<div id="node9" class="gridBox" runat="server">
</div>
</div>";
and in the .aspx page:
<div id="MapPlaceholder" runat="server"></div>
One more thing, how can I tell C# to actually write the " in the string? It isnt working currently because it stop at the first " it finds.
Edit: I have another problem.
MapPlaceholder.InnerHtml = block1;
HtmlGenericControl smallGrid = (HtmlGenericControl)MapPlaceholder.FindControl("smallGrid");
containerName = "smallGrid";
smallGrid.Visible = true;
smallGrid.Attributes["Style"] = "background-image:url('" + du.getMapBackgroundImage(mapId) + "'); " + "width:300px; height:300px;";
containerName = "smallGrid";
This is what i am trying to do, but the FindControl always returns null. I debugged this and it seems that the html code is being added, but only after the pageload ends. Is there anyway i can tell c# to "render" the div so i can work with it like i need to?
To have double quotes in code, you need to have two of them when using # so it would be:
MapPlaceholder.InnerHtml = #"<div class=""mapContainer smallMap"" id=""smallGrid"" runat=""server"" visible=""false"">
<div id=""node1"" class=""gridBox"" runat=""server"">
</div>
<div id=""node2"" class=""gridBox"" runat=""server"">
</div>
<div id=""node3"" class=""gridBox"" runat=""server"">
</div>
<div id=""node4"" class=""gridBox"" runat=""server"">
</div>
<div id=""node5"" class=""gridBox"" runat=""server"">
</div>
<div id=""node6"" class=""gridBox"" runat=""server"">
</div>
<div id=""node7"" class=""gridBox"" runat=""server"">
</div>
<div id=""node8"" class=""gridBox"" runat=""server"">
</div>
<div id=""node9"" class=""gridBox"" runat=""server"">
</div>
</div>";
To your original question: have three strings with the possible "blocks" then assign the proper string:
string block1 = #"<div class=""mapContainer smallMap"">block 1</div>......";
string block2 = #"<div class=""mapContainer smallMap"">block 2</div>......";
string block3 = #"<div class=""mapContainer smallMap"">block 3</div>.......";
switch (myCond) {
case 1:
MapPlaceholder.InnerHtml= block1;
break;
case 2:
MapPlaceholder.InnerHtml= block2;
break;
case 3:
MapPlaceholder.InnerHtml= block3;
break;
}
Edit: looks like you need different approach. First, put all blocks inside the .aspx under MapPlaceholder control directly:
<div id="MapPlaceholder" runat="server">
<div class="mapContainer smallMap" id="smallGrid1" runat="server" visible="false">
block 1 contents here...
</div>
<div class="mapContainer smallMap" id="smallGrid2" runat="server" visible="false">
block 2 contents here...
</div>
<div class="mapContainer smallMap" id="smallGrid3" runat="server" visible="false">
block 3 contents here...
</div>
</div>
Having this, just show the proper control based on the condition:
switch (myCond) {
case 1:
smallGrid1.Visible = true;
break;
case 2:
smallGrid2.Visible = true;
break;
case 3:
smallGrid3.Visible = true;
break;
}
This way you don't have to mess with strings of raw HTML and can change the layout from the .aspx which is more convenient.
on Page Load you can insert what you need dynamically.
a tip: you can insert with a Label over its Text property an html block, javascript or jquery codes
Label myLabel = new Label();
myLabel.Text = #"html text";
Page.Controls.Add(myLabel);
If the question really is "how to place blocks of HTML onto the page" as a (very basic) example, you might find something like this useful:
ASPX code:
<div runat="server" id="mydiv"></div>
C# code:
mydiv.InnerHtml = "<span>hi</span>";
or
HtmlGenericControl c = new HtmlGenericControl("span");
c.InnerHtml = "hi";
mydiv.Controls.Add(c);
DataBinding is more for pushing dynamic values to page content from, e.g. a database.
The PlaceHolder control may be what you need:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.placeholder.aspx
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
protected void Button1_Click(object sender, EventArgs e)
{
Label NewLabel = new Label();
NewLabel.Text = "Hello World!";
PlaceHolder1.Controls.Add(NewLabel);
}
You can add HTML tags With concatenation of the string at label text or others
labelc.text="Html tags code here";