I must add X images to the view. Each image on click should show own input below on click.
I am getting list of images into my model. In the foreach loop I can add them dynamicly but how is it possible to make onclick function original for each one, so each input will separated for each image.
#foreach (var image in Model.Image)
{
<div class="col-md-2" style="cursor: pointer">
<img src="#Url.Content(image)" alt="image" />
<input type="text" class="form-control" style="visibility: collapse"/>
</div>
}
You can write a JavaScript function that takes a parameter, such as the clicked image element, to indicate which image was clicked and take appropriate action:
<img src="#Url.Content(image)" alt="image" onclick="processImage(this)" />
The keyword this is a reference to the element causing the event to trigger - in this case, an image element that's been clicked.
Related
I'm using jansy bootstrap to replace the asp.net FileUpload. I've successfully retrieved the file using HttpPostedFile with the help of this answer:
HttpPostedFile image = Request.Files["myFile"];
Now, how do I allow multiple files to be selected? With the asp.net FileUpload it was simply adding AllowMultiple="True" parameter and then in the code behind I simply looped through:
foreach (var image in FileUpload1.PostedFiles)
{...}
How do I do this with a custom control? THis is my current html (which is the first Image Upload Widget example):
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
<input type="file" id="myFile" name="myFile"></span>
Remove
</div>
</div>
You can add multiple attribute and set its value to multiple to allow select of multiple files
<input type="file" id="myFile" name="myFile" multiple="multiple">
I want to display image and text side by side (image on the left and text on the right(which is ordered using ).
I achieved this in .html page in visual studio
For image div I gave float: left and for text div I gave float:right
I want to achieve the same by passing the html page code to a string variable and displaying the ouput in WebBrowser.
Eg:
string html= #"<div style=""float:left"">
<img src=""smiley.jpg"" alt=""smiley"" />
<div style=""float:right;font-family:Calibri"">
<h2>Dispalying Image and text</h2>
</div>
</div>"
webBrowser1.DocumentText = html;
But here, the image and text is not displayed side by side instead the text is displayed in the next line.
Float:right is not working as expected here. How to resolve this?
You may do it like this:
<div style="float:left">
<img style="display:inline-block;vertical-align:middle" src="http://www.smilys.net/lachende_smilies/smiley7702.jpg" alt="smiley" />
<div style="display:inline-block;font-family:Calibri">
<h2>Dispalying Image and text</h2>
</div>
</div>
<img> is an inline element, and <div> and <h2> are block elements, you are mixing both together. And also, you can't set "float" to inline element.
Maybe you can try to put img inside, like this:
<div>
<div style=""font-family:Calibri"">
<h2>
<img src=""smiley.jpg"" alt=""smiley""/>
Dispalying Image and text
</h2>
</div>
</div>
This is little different view to this problem, but it is really simple, without any additional styles.
Well if you want to put your image to the left and the text to right you are doing well just assign the float:left style to the image instead of the main block like:
string html= #"<div>
<img src=""smiley.jpg"" alt=""smiley"" style=""float:left""/>
<div style=""float:left;font-family:Calibri"">
<h2>Displaying Image and text</h2>
</div>
</div>"
I've got the expected output by placing image in one div and text in one div and both the div in one div. It worked:)
Like,
<div>
<div><img></div>
<div>text</div>
</div>
You could use a table.
<table>
<tr>
<td> <img src="smiley.jpg" alt="smiley"/> </td>
<td> Displaying Image and text </td>
</tr>
</table>
I am working on a self design dashboard page. Users drag&drop custom sized boxes in a div element and place some data inside boxes. Once they finish, I would like to save the certain attributes of these boxes in a db, instead of saving whole html code.
<div id="widget0" class="box span2">
<div class="box-header well" style="padding-left: 3px;" data-original-title="">
<div style="float:left">
<i class=" icon-chevron-left"></i>
<i class=" icon-chevron-down"></i>
<i class=" icon-chevron-up"></i>
<i class=" icon-chevron-right"></i>
</div>
<div style="float: right !important; margin-right: -15px;">
<i class="icon-remove"></i>
</div>
</div>
<div class="box-content">
<div id="boxContent0" style="width:100%;height:250px;border-collapse:collapse;" class="ui-droppable">
</div>
</div>
</div>
Above is a sample html code of my box. I'll just save div id, class and contents.
What I've done so far is, I saved required values in an asphiddenfield on a button click event in this format:
"2|widget0,span4,content1,content2|widget1,span3,0,0"
I did this by handling form submit event using jquery, triggered by asp button click. But the db write operations required in my server button click function didn't work. I think this is because I handled the form submit event before btnSaveDashboard_Click(object sender, EventArgs e) function handles and submit the form from jquery..
What I would like to do is, when user click on "save dashboard" button, before redirecting to the dashboard view page, to save these values in my db then redirect.
I just couldn't find a way how to do this with one button click;
get the required html values
save them in a hidden field or somewhere else reachable like viewstate
save these values in my database
I can more provide more details in case needed.
Thanks.
You could use the Button's OnClientClick client side event to populate the HiddenField with the values you need before the Postback occurs.
If you accomplish that, you should have the values you want on the Button's OnClick server side event. You should be able to do whatever you want with them at this point.
I currently have a page which displays two buttons both when clicked go to different pages and i wanted when the user is done with completing whatever they are doing and save i wanted them routed back to the page they started from (the page displaying the two buttons).
The path where the page with buttons is: .../School/CreatePartySchool...
Fieldset on page that is displayed with the two buttons:
<fieldset>
<legend>Schools</legend>
<div id="address">
<%Html.RenderPartial("SchoolAddress"); %>
</div>
<div id="buttonSaveCancelAlign" style="margin-bottom: 4px">
<a class="glossyBtn" href='<%:Url.Action("Create", "School")%>'>
<img style="vertical-align: middle" alt="" src="<%:Url.Content("~/Content/blueprint/plugins/buttons/icons/add.png")%>" />
<span style="vertical-align: middle">Add School</span> </a>
<input class="glossyBtn" type="submit" name="button" style="vertical-align: middle; padding-right: 13px;" value="Select School"/>
After clicking the Select School .... selecting and saving school
The page returned to is: .../Party/Edit (this page is a level higher than /Schools/CreatePartySchool. I want it to return to /Schools/CreatePartySchool).
your questions do not define the problem..wht u actlly trying to do.as per my knowledge navigation can be handled from code behind,in the onclick event for the button.
I'm writing an ASP-MVC application in C#. I have an input element of type submit and I want it to display an image. Here is the declaration of my button:
<input type="submit" value="Login" />
How can I display an image on that button?
Something like this should work:
<input type="image" src="/images/mypic.gif" />
Not sure I understand your question.