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.
Related
I am developing a website using asp.net/C#
I want to create a button that can save user data then move to a div tag at the same page.
I already did the saving part, but how do I make the same button to navigate to a different div tag within the same page?
some people use the response.redirect method to navigate to a different page. I want to navigate to a div tag within the same page. For example:
Experience
after I press that it will take me to:
<div class="panel" id="experience">
I want to do the same but with button that can do both that and saving to a DB. As I said, I already did the saving part.
I tried this:
<asp:Button ID="Button1" runat="server" Text="Save & Continue" OnClientClick="#experience" OnClick="Button1_Click" />
But it didn't work.
any ideas? I am trying to access that div tag from code behind
If this is WebForms and you don't want to use javascript, then, after you do the save, you can do a Response.Redirect to the same url, but with the anchor tag, e.g. Response.Redirect("myPage.aspx#experience").
This really depends on the rest of your code though. I suggest posting the relevant parts of your code behind so that we can better see what you have done. Also, don't try to avoid javascript - it is too useful to avoid.
ASP.NET has a Focus method that can be applied to the following ASP.NET server controls:
Button
LinkButton
ImageButton
CheckBox
DropDownList
FileUpload
HyperLink
ListBox
RadioButton
TextBox
At the end of your Button1_Click event handler code-behind, add something along this lines of this:
TextBoxExperience.Focus();
Note - The TextBox control with ID of TextBoxExperience control would be inside of the experience DIV.
I have two button in my cshtml page. When i click the first button data fetch from the database and bind it my controls. The records are many so the second button goes down, then i click the second button same thing happened fetch from the database and bind the grid, so the page is loaded then the page goes up. I want to stay same place when i click the second button. How to prevent it.
make your button like this :
<input type="button" id"button2" onclick="CallAjax();return false;"/>
//then in javascript
function CallAjax()
{
//your ajax call here to retrieve or update data
}
This is MVC 101...
Make your button a standard HTML5 button, which calls a JavaScript function on click...
<input type="button" id="goButton" value="Go ยป" onclick="goFunction();">
(I don't think you have to "return false" with a button, only with a submit)
Then, use Razor helpers in your view to do the Ajax call to the controller...
function goFunction() {
var url = '#Url.Action("MyActionMethodName", "MyControllerName")';
var settings = { 'some data': 'some values' };
$.ajax(url, settings);
}
See the JQuery Ajax page for more information about how to work the "settings" object.
BTW - sounds like you are "paging a grid" but you just forgot to say so... use a tool for that, such as Kendo. Paging is solved, don't solve it again.
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.
I have a form in asp.net webpage which contains 2 drop down lists and a hyperlink + a button.
I want that if user changes an option is dropdowns to change navigate url.
I have done like so:
<asp:DropDownList ID="ddlPackages" AutoPostBack ="true" runat="server"
onselectedindexchanged="ddlPackages_SelectedIndexChanged"></asp:DropDownList>
and then I have the method defined.
The point is that I don't want to make a submit when I change the drop down. Can I do it using only aspx or I have to use javascript?
If I understand you correctly you want to change the href of the hyperlink based on the selected value of the dropdown. You can do this with javascript. Make sure you have AutoPostBack="false" and remove the OnSelectedIndexChanged attribute as well.
To do it using jQuery, use something like this:
<script type="text/javascript>
$(function(){
var $dropdown = $('#<%= ddlPackages.ClientId %>');
$dropdown.change(function(){
//Put logic to decide the link here based on the select value
var newPage = 'page' + $dropdown.val() + '.aspx';
$('#linkId').attr('href', newPage);
});
});
</script>
Edit:
In case you absolutely must have the logic for getting the new url based on the drop down value on the server side, you can turn the method into a Page Method and call it using ajax from the jQuery script above. But you can probably get away with creating the javascript dynamically in the aspx page instead.
I see two options:
1) Wrap the controls in an Update Panel (.NET 3+). Put AutoPostBack=true on the dropdownlist, and define a SelectedIndexChange event for it that changes the hyperlink control's Navigate URL property. When the user changes the dropdown, you're method will fire without the APPEARANCE of a form submission. Downside: there's a slight delay between the dropdown changing and the link changing. If your server is really, really slow, this delay could potentially cause problems (but this is probably unlikely).
2) Use custom JavaScript and do away with your .NET controls completely. This is what I would probably do, assuming you don't need to do anything else with these controls programatically. Your JavaScript function would monitor the dropdown for a SelectedINdexChange and adjust the href attribute of the anchor tag accordingly. Look into jQuery to speed up development if you aren't too familiar with plain JavaScript.
If the control is an ASP:DropDownList, you can use the AutoPostBack="True|False" property to prevent a postback
If you don't want to use the AutoPostBack you have to post the form using jQuery or Javascript
You can add an event on your drop down list onchange and add the code you need to post the form usin jQuery:
$('#formId').submit();
http://api.jquery.com/submit/
If you to want navigate to another Url add the below code at your DropDownList control (make sure AutoPostBack=false)
onchange="window.location.href='yourUrl'"
it would be better put that Javascript on a separate file anyway
I have a pretty simple web-form set up in .Net where I am leveraging jQuery for some of the functionality. I am using the DOMWindow portion for part of the presentation layer.
There is a login form in a div that is set to display:none. When a user clicks a button on the page, it displays the login form. However the .Net button for the login form will not fire it's event when display is set to none. If i take this out, it fires fine. I have also tried using the visibility attribute, but no luck.
the div code is:
<div id="Login" style="display:none;">
The launching code is:
click here to login.<br />
the jQuery code is:
function LaunchLoginWindow() {
$(document).append("#Login");
$.openDOMWindow({
loader: 1,
loaderImagePath: 'animationProcessing.gif',
loaderHeight: 7,
loaderWidth: 8,
windowSourceID: '#Login'
});
}
Any help or explanation that anyone can offer is appreciated.
I noticed i had some code in there defining a client-side function on the Login div. I removed this so as to eliminate it as a possible issue.
I can see in your code that you are appending the div #Login but not setting its style property back to normal like block so. Set it back to block and i am sure it will work
try adding somthing like:
$(document).append("#Login").show();
OK, after playing around with this using firebug, I found the issue: When the jQuery plug-in DOMWindow creates its display layer, it appends to the HTML node of the DOM, which places the control outside the asp.net form tag. Therefore the button and actions associated with it via the DOMWindow are not recognized by .Net. So i edited the DOMWindow source file to append to the DOM form node rather then the html node.
The drawback is that the source has now been customized and will have to be QA'd thoroughly, especially if any further changes are made. But I hope to manage this effectively via commenting in the file.
Hope this helps anyone else who hits this issue.
pbr