Im trying to do a page which is similar to this http://www.manuliferetirement.sg/calculator.html on c# asp.net page. Is it possible to put multiple smaller pages/section and allow me to click next to go to the next section with c# asp.net?
Why yes! Inspecting the HTML code of the website, they merely had all the steps laid out in their own respective divs, and simply changed the CSS styling of each div from display: none to display: block to show them, and the opposite to hide them. Try right-clicking the webpage and selecting "Inspect Element", then try going through the steps. It should make everything clear.
If you want to do this, you'd need a bit of javascript knowledge, but it is very doable on ASP.NET.
If you know jQuery, It will help you a lot. Simply make your pages as div inside a single page and give them an unique ID.
<div class="page">
<div id="Page_One">
<input type="text" name="email_address" placeholder="Email Address"/>
<button id="GoToSecond">Next</button>
</div>
<div id="Page_Two" class="hidden">
<input type="password" name="password" placeholder="Password"/>
<input type="password" name="retype_password" placeholder="Retype Password"/>
<button id="GoToLast">Next</button>
<button id="ReturnToFirst">Back</button>
</div>
<div id="Page_Three" class="hidden">
<p>A confirmation code has been sent to your email. Put your code here</p>
<input type="text" name="confirmation_code" placeholder="Code"/>
<button id="AddUser">Add User</button>
<button id="ReturnToSecond">Back</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//Inside here you need to do some javascript to handle your ui transition
$("#GoToSecond").on('click', function(e){
//Do your validation to move next
$('#Page_One').hide("slide", {direction: "left"});
$('#Page_Two').delay(500).show("slide", {direction: "right"});
});
//Second Page functions
$("#ReturnToFirst").on('click', function(e){
$('#Page_Two').hide("slide", {direction: "right"});
$('#Page_One').delay(600).show("slide", {direction: "left"});
});
$("#GoToLast").on('click', function(e){
//Do your validation to move next
$('#Page_Two').hide("slide", {direction: "left"});
$('#Page_Three').delay(600).show("slide", {direction: "right"});
});
//Last Page functions
$("#ReturnToSecond").on('click', function(e){
$('#Page_Three').hide("slide", {direction: "right"});
$('#Page_Two').delay(600).show("slide", {direction: "left"});
});
$("#AddUser").on('click', function(e){
alert("Make your submission here");
});
})
</script>
<style>
.page{
margin: 0 auto;
width: 300px;
min-height: 200px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
}
.hidden{ display: none;}
</style>
Related
I have bootstrap switch control that opens and closes some panel in asp.net project. My code as follows:
<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
<span class="bootstrap-switch-label"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
<input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini">
</div>
After build, my markup code looks like:
<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
<span class="bootstrap-switch-label"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-mini bootstrap-switch-id-chx_pin_data bootstrap-switch-off bootstrap-switch-animate" style="width: 64px;"><div class="bootstrap-switch-container" style="width: 93px; margin-left: -31px;"><span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 31px;">ON</span><span class="bootstrap-switch-label" style="width: 31px;"> </span><span class="bootstrap-switch-handle-off bootstrap-switch-info" style="width: 31px;">OFF</span><input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini"></div></div>
</div>
But after postback, this control's height automatically increases.
I tried to access the control via markup or code behind, but the height controlled by the element which added up by build. Also I digged css files, but appeared nowhere.
Appreciate for your help.
thats sounds weird
one solutions should be define a static height for that element in your css like
div.bootstrap-switch-container {
height: 25px;
}
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label {
padding: 3px 12px;
}
div.bootstrap-switch {
margin-top: -4px;
}
as referenced on this post
height issue in bootstrap switch,
also you can inspect the element and deactivate classes in browser then when you identify which is making it, you can search for that class in your css files
I am currently trying to use Modal Dialog box from Bootstrap. I have did exactly what the tutorial shows but whenever I click on my button, the Modal Dialog does not show. May I know why?
Here's my code
<body>
<form runat="server">
<asp:ImageButton runat="server" ImageUrl="image.url" data-toggle="modal" data-target="#login" />
<div class="modal" id="login" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<label>Login</label>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>EmAIL-iD</label>
<input type="text" placeholder="Email-Id" id="email" />
</div>
</form>
</div>
<div class="modal-footer">
<button value="Login" id="login"></button>
</div>
</div>
</div>
</div>
</form>
</body>
<script type="text/javascript" src="Scripts/bootstrap.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
Bootstrap depends on jQuery already being loaded so it should be imported before the bootstrap.js file.
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.js"></script>
If that is your issue you'll be seeing a jQuery is not defined error in the browser console.
You are using server side control(asp:ImageButton). SO postback will happen.
Use button control
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#login">Open Modal</button>
There could be a few reasons for this.
First, you have nested forms. Change the outer one to a div:
<div runat="server">
Secondly, there are 2 elements with the id login:
<div class="modal" id="login" tabindex="-1">
<button value="Login" id="login"></button>
Change the id of the button to something different.
If it still fails after these corrections, open up developer tools in your browser (F12) and see if there are errors in the console (maybe the jquery lib could not be reached).
Create a css class with image as background, and add this class to button.
<style>
.bgButton{
font-size: 18px;
border: 2px solid #AD235E;
border-radius: 100px;
width: 150px;
height: 150px; background-image: url(images/Sun.jpg);
}
</style>
<button type="button" class="btn btn-info btn-lg bgButton" data-toggle="modal" data-target="#login"></button>
I do have a MVC5 C# View (razor as view engine) that sends and retrieves information from a database, it doesn't use jQuery, AJAX or JSOn to make the async calls so it refresh/reload the view every time it sends info to the database.
I want to show an image (sending image) to the user in order to let the user know that the page(MVC View) is working and that has wait, I do have jQuery code in the page and has tried this:
<script language="JavaScript" type="text/javascript">
$(window).load(function () {
$('#cargando').hide();
});
</script>
<style type="text/css">
#cargando {
width: 350px;
height: 70px;
clear: both;
background-color: #FFFF00;
color: #CC0000;
}
</style>
and has this div
<div id="cargando"><h3>Cargando página ...</h3> Sea paciente, los datos demoran en ser importados.</div>
but doesn´t work, could you please tell me how to show the image before the view renders again from the actio' controller?
this is my view
<div class="section">
<div class="container">
<div id="cargando"><h3>Cargando página ...</h3> Sea paciente, los datos demoran en ser importados.</div>
<div id="loading">
<br />
<div class="jumbotron">
<div class="container">
<img src="~/Imagenes/logo%logo.png" class="img-responsive" />
<div class="row well">
<div>
<img src="~/Imagenes/Portada.jpg" style=" height:40%; width:100%" /> <p style="margin-left: 10px">
#*<img src="~/Imagenes/Edificio.jpg" style="height:3%; width:100%" />*#
<h4>BIENVENIDO ...</h4>
<p>xxx permite ... </p>
</div>
</div>
</div>
</div>
It wont be possible without ajax because when you make a postback to your server it sends back a new HTML page and the browser processes that from scratch.
To show the user a loading image in between different pages or in between different postbacks of same page, you will have to use ajax request or you can use iframes which will complicate things more than ajax and are not preferred in such situations.
Following jQuery methods will be helpful:
$.load
$.ajax
$.get
If you want to display a "loading overlay" because your server round trip takes a while, you can do this with javascript. The new page load will re-hide the loading screen.
Place the "overlay div" outside of your main content, at the end of the page just before the </body> closing tag:
<div id="overlay" class="overlay">
<div class="loader"></div>
<!-- Alternatively you can have some text here -->
</div>
Your button would look like this:
<button id="mvc-action-button">
Some Action
</button>
Some CSS for the overlay:
html {
min-height: 100%;
}
body {
min-height: 100%;
margin: 0;
}
.overlay {
display: none;
align-items: center;
justify-content: center;
background-color: rgba(0,0,0,0.8);
position: absolute;
z-index: 100;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
Use the following JS to display the loading screen:
document.getElementById('mvc-action-button')
.addEventListener('click', function(e) {
document.getElementById('overlay').style.display = 'flex';
});
See it all together in this jsfiddle.
Note that I've used flexbox to center the content on the overlay page, this may not work on all browsers (though modern browsers should be fine).
Caveats: If your subsequent page load hangs or fails for whatever reason, the user will be stuck on the loading screen or a white screen and will have to refresh the page.
I want to be able to send text to this text box element:
<form class="compose okform initialized">
<div class="border"></div>
<div id="message_9028519832635440005Container" class="inputcontainer textarea empty">
<textarea class="clone" placeholder="Compose your message" aria-hidden="true" style="height: 21px; width: 417px; line-height: 18px; text-decoration: none; letter-spacing: 0px;" tabindex="-1"></textarea>
<textarea id="message_9028519832635440005" placeholder="Compose your message" style="height: 39px;"></textarea>
<span class="okform-feedback message empty" style="height: 0"></span>
<div class="icon okicon"></div>
</div>
<button class="flatbutton" type="submit"></button>
<div class="draft_message"></div>
<label class="checkbox" for="enter_to_send_9028519832635440005"></label>
</form>
I'm not able to location the element by searching for part of the ID (the number after message_ is dynamically generated).
I've also tried this but I get an error saying "unknown error: cannot focus element":
var textBox = DriverActions.driver.FindElements(By.ClassName("inputcontainer"));
textBox[0].SendKeys("Why hello");
Try the following css
.inputcontainer.textarea.empty>textarea:nth-child(1)
I assumed you want the first text area box with placeholder="Compose your message"
if so, you can also use the following cssSelector
[placeholder='Compose your message'][class='clone']
Partial search with id is also possible. Assuming the Container part of the div's id is unique and static, you can do the following
[id$='Container']>textarea:nth-child(1)
On the other hand, if you want the second textarea just simply change the child index
[id$='Container']>textarea:nth-child(2)
And, here is the implementation
By byCss = By.CssSelector("[id$='Container']>textarea:nth-child(1)");
IWebElement textBox = driver.FindElement(byCss);
textBox.SendKeys("Why hello");
Try this XPath using starts-with
var textBox= DriverActions.driver.FindElement(By.XPath(".//textarea[starts-with(#id,'message_')]"));
textBox.SendKeys("Why hello");
The reason that you are getting the error could be because by your selector you will end up getting a div instead of a textBox that you need.
I have an ASP page, and I have a calendar which is shown (set to visible) on the page when an image button is clicked.
The problem is everytime the calendar is shown it moves other components on the page down, and when it's invisible components move back up again.
Could anyone give me an idea plz. Here is what i did finally: (Now its fixed)
<body>
<form id="form1" runat="server">
<asp:TextBox ID="CreationTimeTextBox" runat="server" ClientIDMode="Static">Creation Time</asp:TextBox><br />
<script>
AnyTime.picker("CreationTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:TextBox ID="EndTimeTextBox" runat="server" ClientIDMode="Static">End Time</asp:TextBox>
<script>
AnyTime.picker("EndTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:Button ID="btnResetSearchInput" runat="server" Text=" Reset search input" CssClass="resetBtn" Width="140px" OnClick="btnResetSearchInput_Click" />
To not moving the rest of the page down, the calendar must a correct style that allow him to show as pseudo-dialog on the page.
The main attributes on the css that must be correct and set is the position, top and left.
Here is an example:
.dialog {
position: absolute;
top:10px;
left:20px;
width: 140px;
height: 30px;
background-color:blue;
color:white;
}
.NotDialog {
width: 200px;
height: 30px;
background-color:blue;
color:white;
}
<div>Some other text before
<div class="dialog">open as dialog</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
<br><br><br>
<div>Some other text before
<div class="NotDialog">open by moving the text down</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
More to read
CSS OVERLAY TECHNIQUES