I am new to the ASP.NET world and I need to do a popup to select some data.
The idea is that the user can select one or more options with a CheckBox. When he presses a button a popup appears with a list of options loaded from the database.
I don't know how to create a popup with those options and receive the selected options when the popup close. But I know how to do the option list from the database with a repeater.
there is no such popup control in ASP.NET.
However there are numerous 3rd party plugins, which provide popup controls.
ajax tool kit model popup extender
jquery built popups
you can create your own. popup is nothing but a hidden container, which appears upon some action, and whose location and background is as per your choice.
create a popup like this:
<div class="parent">
<div class="popup">
</div>
</div>
<input type="button" value="popup" id="btnpopup" />
and css
.parent
{
position:relative;
background-color:#CCCCCC;
width:200px;
height:200px;
}
.popup
{
width:50%;
height:50%;
position:relative;
top:20%;
left:20%;
background-color:#DDDDDD;
display:none;
}
and jQuery code
$('#btnpopup').click(function(){
$('.popup').toggle(200);
});
see this fiddle
You can use the OnClientClick of the button to open the popup. Depending on it being a normal browser popup or a jQuery dialog you have two general options:
Standard Popup
Standard popups open as if they are a separate page. When you click OK you may have to store the selection into the user's session if the data is needed on the page that triggered the popup, or store it directly in the database. If the former is the case, when you return to the page and submit it, the data from the popup will be available in the session to process.
jQuery Dialog or particularly any js-triggered html dialog. You can show it with the corresponding js again in the OnClientClick function, and perform the selection. On the OK button click of the dialog almost nothing is needed (except hiding it). Since the dialog input controls are part of the page, they will be posted on submit and be process-able on the server.
That's basically all you need to do, but some more reading on the topic won't hurt. Good luck.
Related
I am working on a project in which I am binding Cart:
As shown in image I am populating my cart. Using User Control. And in User control I have populated that using One simple aspx form that is minicart. So now as you can see there is one button Checkout in That page. Which is populated through User Control but actaully its inside my minicart form. So now if I am trying to redirect using that Checkout link button. But that is not calling my click event rather its just postback the page.
Basically I want to call aspx page's click event through user control in my another aspx page.
I have tried to call that click event through many ways. But still page is only doing postback. I just want respose.redirect to my checkout page.
Even I have tried by using <a> also:
<a id="lnkcheckout" runat="server" href="javascript:return false;"
onclick="checkout_onclick">Checkout</a>
But not succeed..
Don't go for a server side for only redirecting you can take one achor tag also
<div align="right" style="padding-top: 10px;"> <a id="lnkcheckout" href="checkout1">Checkout</a> </div>
And it will work :) I hope this will help you
Try to use event.preventDefault() or use return false like ,
jQuery(function(){
jQuery(document).on('click','.morebutton', function(e){
e.preventDefault();
alert('ok');// you code in place of alert;
});
});
I have an ASP.NET project (non-MVC) and I'm also using Bootstrap 3.0. This is my first time using this combination and need some guidance.
I have a gridview with a buttonfield column. Right now everything is showing up just fine with my gird and Bootstrap table formatting and its binding to my datatable - no problems there.
Next, I want to make the click of the button in the Buttonfield column to initiate a modal window and display a modal based on a unique ID from the row button that opened it.
I don't really know how to tie this all together with ASP.NET and Bootstrap. HTML literals? Dynamic ASP.NET panels? It doesn't matter to me whether there is a postback or not, I'd really just like some guidance or even pseudo-code on how these can be tied together.
Since the OP specifically requested bootstrap help...
You should go through the bootstrap documentation for modals http://getbootstrap.com/javascript/#modals
It makes no difference if you are using MVC or not and you should not need to do any kind of post back to display the modal.
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" />
Will trigger element with id myModal to be shown.
Using bootstrap's own demo code in this jsfiddle demonstrates opening and dismissing the modal.
For the second part of the question, this updated jsfiddle shows how you can also use the button click event to set a value in the modal. You could do other actions in that event handler like get or send data to the backend or change other elements in the modal.
For your case, you would want to handle all button clicks in a single event handler but you can store the id in a custom attribute on the button element. I like to use custom attributes instead of parsing from name, id, or class attributes. This is the bootstrap convention.
$(function() {
$('button.btn').on('click', function() {
var value = $(this).attr('data-value')
$('div.modal').find('#target').text(value);
});
});
Here I have broken out how to get the custom attribute value from the button instance which was clicked.
Post what you have so far and what you still can't get working.
This also shouldn't be tagged with C# or asp.net as that is irrelevant.
You might need a simple js function to take care of that(as mike mentioned this has nothing to do with using or not using bootstrap since it is just some css stuff):
var RunDialog;
$(document).ready(function () {
RunDialog = $("#Id").dialog();
});
You can use ASP.Net Ajax ModalPopup for ASP.Net Web Form. You can google a lot of examples regarding GridView with ModelPopup.
ModalPopupExtender inside a GridView ItemTemplate
I want to make the click of the button in the Buttonfield column to
initiate a modal window and display a modal based on a unique ID from
the row button that opened it.
ModalPopup should work with Bootstrap.
I have a page where If you click a link, e.g. 'search' it will open a search page and you can then select an item from the gridview to use in the previous (parent) page.
I was wondering how I would go about sending back the information to the parent page and then refresh the parent page to fill in the other data?
I am guessing it will be some kind of javascript dynamically created in the code behind?
window.opener is the window that opened the current window.
So, if you popup a temporary window from some page, you can use window.opener from the popup window to reference the previous page objects or global variables in that page to put data back into the parent window.
Most web apps these days avoid popups because of the various popup restrictions in browsers. Instead, folks tend to use overlays in the same window which don't run afoul of popup blockers.
For example, from the popup window, you could do something like this:
window.opener.document.getElementById("result") = myHTML;
or:
window.opener.searchData.choice = "foo";
or:
window.opener.myFunc(data);
Use popup div showed when u change the value of the input , the necessary 2 steps : sending ajax data and receiving the data in the same page
The best way that I see is calling parent function from opener
I don't know which html has your popup page but maybe something like this:
//child
...
<table>
<tr>
<td>item 100</td> <td><input type="button" id="searchResult100" onclick="updateParent(100)"></td>
</tr>
</table>
...
function updateParent(id){
if(window.opener){
window.opener.updateData(id);
window.close();
}
}
I don't know how you want to use ID that is selected on the popup, you can hide all results that have different ID or put id inside some hiddenfield and do a postback to use the ID on the code behind. Need more information about the purpose.
//parent
...
function updateData(searchId){
// use searchId to update
}
I have an asp.net page with 4 tab controls using the following html for each (changing their ID's for each one etc):
<ul id="ulTabs">
<li class="displayItem" id="liSummary" style="display: block"><a ref="#divSummary">
<span style="font-weight: bold; color: #4b6c9e">Margin Analysis Summary</span>
</a></li></ul>
The problem I have is that, on two of the tabs I have GridViews that open a new modal/screen. When this modal/screen is then closed, the page refreshes and the focus automatically goes back to the first tab regardless of which tab was selected when the modal/screen was opened.
Any ideas on how I can keep focus set to the current tab? I've tried a few solutions on different links but have found nothing so far.
Store the ID of the currently opened tab in a HiddenField when the tab opened is changed.
Then on load (after the refresh) open the tab represented by the ID stored in the hidden field.
I've done this with javascript and jquery when I've used jquery tabs in the past and it works really well. In fact, if it helps, here's how to do it with jquery. I'm sure you'll be able to adapt it for your own needs (or if you're doing it all in the code behind the page then it'll be even easier).
Is there a way to open a pop-up via window.open(....), let it stay on top of the main window, and upon its close, give focus to a text box on the calling page?
I have been tasked to adjust functionality written by someone else. The .NET 3.5 page currently allows restocking of inventory and upon a button click, a new popup displays a receipt. The html for the pop-up is stored in a hidden field and is opened by a call to a js function.
On the page is also a text box which I have been asked to keep focus in. I have it working except for when the receipt is displayed. If I call a server or client side function to maintain focus of textbox, the pop-up window appears on top of the main window for a second and then is overlayed by the main page because the textbox receives focus, and that is not what is desired.
Is it possible for you to take a different design and use something like a jQuery dialog for the receipt instead of posting back to the server? Maintaining the focus client-side will be much easier than trying to force it through the server-side.
A solution that might work for you is to have the pop-up page tell it's "parent" page to set focus to one of it's controls when it is getting closed. You can do this with javascript.
On your pop-up page, add this to the body tag
<body onbeforeunload='window.opener.getElementById("textbox_to_focus").focus();'>
Caveat: The onbeforeunload event fires whenever the user navigates away from the page (ie, postback, back button, close button, etc). If your pop-up page doesn't have any navigation or any post backs, then this should work for you.
It might not be the most efficient way, but you could open the window and have JS timer run on the main window with an interval of every second. Then use if(window.closed) to determine if the window has been closed. If it has, then set focus to the textbox and disable the timer.
Here's an example page of how the above could be implemented:
<html>
<head>
<script type="text/javascript">
testwindow = window.open("<your page>","window");
function timer()
{
var t=setTimeout("checkWindow()",1000);
}
function checkWindow()
{
if(testwindow.closed)
document.getElementById("tbox").focus();
else
timer();
}
</script>
</head>
<body onload="timer()">
<input name="tbox" />
</body>
</html>