Bootsrap, Required, Fontawesome, and ASP.NET webforms - asp.net

I'm trying to do something which I think should be doable, but I'm having problems with. Here are my requirements:
I need to check that four values on a webform form are entered.
I need to allow a user to submit the data on a button click.
The button has some text and has some fontawesome icons in it.
When the data is submitted, I need to turn off the button so that the user does not inadvertently click it again and submit the exact same data the second time.
Get the required popups from bootstrap on an insert/update of data, assuming some data has not been entered.
I am only able to get pieces of this working. Here is what I have tried:
An asp:LinkButton. I can get everything but the bootstrap required popups. I found that this seems to be caused because bootstrap required looks for a button of type "submit".
An asp:Button. I can get everything but the fontawesome icons. I found that I can actually insert this on a jquery document ready method, but I get all kinds of asp .net security violations when I try this. I simply can't open this up.
A button tag with a runat="server" on it. I've tied this in with the asp.net button click event like below. Unfortunately, when I click the button, if there is a client side onclick event handler, the server side click event never gets called. I am able to style the button like a link. This is the option that seems to get me the closest. Unfortunately, I seem to be able to get the client side onclick event or the server side onserverclick event, but not both. I'm open to any and all suggestions here.
<button type="submit" ID="btnSubmission" runat="server"
onserverclick="lbCaseUpdate_Click"
class="buttonAsLink nav-link pl-0" ><i class="fa fa-pen fa-fw"></i> Update</button>
What I need is a button/link that activates the "required" display in bootstrap, contains the fontawesome icons, runs some client side javascript to somehow communicate an update is occurring, turns off the input button, and then performs the server side operation. I don't see how to get it. I'm open to any and all suggestions.
TIA

Related

Browser redirect to previous page after entering in input fields

I have 2 pages.
Login page
Search page (after login)
On my search page, I have several input box (text, radio, checkbox ...) .
The problem is, when the cursor is at one of the input fields, and the user presses Enter, the browser send the user back to the login page.
I fixed this issue using JQuery to capture keypress event on input items. However I still don't understand why is this happening?
P/s : if you need to see my HTML code please comment. The code stays on my work computer with restricted access so I can't post it here, but I will type it here if necessary.
Place your input inside a panel and set the default button to your default control.
<asp:Panel runat="server" ID="pnlForDefault" DefaultButton="btnSearch">
<!-- your input -->
</asp:Panel>
Now why is going back - and why I show you this panel method.
1. Maybe because you all ready have this panel on your page with wrong default button.
2. The user can press enter either when its on a text box, but also at any time, but only when the focus is inside a text box can be actually redirect that enter to some control. So either you may have some other library that take action on enter, either you press enter when you are focus on go back button....
You can also read
Default button not working in asp.net panel

Need an asp.net control to click the button in another asp.net control

First time I have used the site. I appreciate the help I have gotten from the users before and hope to contribute as well as ask. Now, for the question.
I am developing a static toolbar that rests on the bottom on the webpage. The purpose is to display a couple of values to a user purchasing something and for the toolbar to update the information to reflect the choices. There is currently a box on the page that does this, but it rests at the top and the user would have to continuously scroll to see options appear, price changes, etc.
The values update just fine with the price in that box when certain check box buttons are clicked that auto-refresh the page (due to these check boxes changing pieces of the code). However, some things that can effect the price require a button on the page that 'recalculates' to be clicked. The information on this page is put on the page with a controller. The toolbar I am creating is a separate control.
What I am trying to do is have a button within the toolbar that will mimic the actions of the purchase button that recalculates. I tried doing this:
Code on control page for toolbar:
<input type="button" id="buttonID" class="buttonClass" runat="server" onclick="__doPostBack('<%= btnIDOtherControl.ClientID %>','OnClick');" value="Recalculate" />
Code on control with the purchase info:
<asp:ImageButton ID="btnIdOtherControl" runat="server" ImageUrl="~/image.jpg"
AlternateText="Recalculate" OnClick="recalcFunction_Click" />
That is just the current iteration. Before I did not have the 'OnClick' piece of the __doPostBack, I had ''. I also tried using a bit of jQuery. There are quite a few questions about firing an ASP.net button from javascript, but none seemed to work.
What happens is I have gotten it to a point where clicking the recalculate button in the toolbar actually DOES refresh the page, but none of the values change. If I click the recalculate button from the purchase page (where it exists normally), the value in the toolbar does not change even though the values on the page do. If I hit the recalculate button from the toolbar AFTER recalculating from the main page, the toolbar values reflect the regular values. Any other normal use of the page (such as the checkbox that auto-refreshes) will change the values correctly in both places.
If more info is needed just let me know.
Appreciate the help ahead of time!
This has to be done by using javascript or jQuery.
Use the code below:
$("#buttonID").click(function(){
$("#btnIdOtherControl").click();
});
This will trigger the button on other control to be triggered.
PS: Make sure that the ids are correct once the page is rendered in html as visual studio will append the ids of the button in the control to be (id of the control)_(actual id of the button) i.e. If on your page you have referenced control as
<user:control id="control" runat="server">
The id of your button (buttonID) on html will be control_buttonID, so you will need to use that (control_buttonID) in jQuery.
So your code will be
$("#control_buttonID").click(function(){
$("#control1_btnIdOtherControl").click();
});
On you other control make a public property with set only and call your button's click event in it, Then on your working control you have to call only that public property of other control. it should be like this :
public void PublicPropertyCallingEvent
{
set
{
Button1_ClickEvent(null,null);
}
}
You have to access this property only wherever you need.

Can I have a modal dialog from asp.net gridview edit click?

I am wondering if it is possible to have a modal dialog (like JQuery) by clicking Edit button on a asp.net built in gridview control. If yes, can anymore point me out the brief process of how it could be done. Please see the picture below for clarification.
Thanks.
I see few ways to do that:
Using OnEditCommand property (assuming you are using <asp:EditCommandColumn to draw that edit link):
You can show popup using serverside handler (for instance, popup included into ajaxcontroltoolkit.dll which allows to show popup from serverside easily on page reload)
Another option:
Make your own column with edit link for each item. It can have OnClientClick handler which will open jQuery popup directly on client (but you will need to get row info for current line from server somehow: with your own ajax call or, suppose it will be better, using webservice with webmethod)
Second option could be modified: instead of creating own column, you may add click even handler with that same jquery on default edit link with return false, so it will prevent form submition.
I never did something like this personally and even newer saw implementations of such thing, but I would select some option from those listed above. I do not think that there is some really simply, built in way of doing that.
UPD:
Here is an example of opening popup with own edit button and modalpopupextender from ajax control toolkit (similar like in my first option except that they are using own edit button, which I think could be easily replaced by default one and OnEditCommand even handler) :
http://www.c-sharpcorner.com/UploadFile/krishnasarala/edit-gridview-row-with-model-popup-extender-in-Asp-Net-ajax/

Click event for textbox

There is one column of textbox in my item template. When I run the page and click on the textbox I want an event to fire. How can I make this happen?
What do you want to do when someone clicks? Odds are it's something you'd be best off processing on the client in JavaScript, possibly using jQuery. JavaScript will happily handle a "textbox" click event, although by the time your textbox hits the browser it's been rendered as an <input type="text">.
Think of ASP.Net as being a tool that generates and manipulates HTML, and sends it to/from the browser. ASP.Net events are the result of the browser posting the entire page back to the server, the server doing something to it, and the server sending the whole page back. There's obviously times when that is what you'd want, and times when it's not, I suspect this will be the latter, unless you're doing something data related.
To show a div on textbox click, I would use the jQuery Show() and Hide() methods. Create your content in ASP.net, and use 1 jQuery function to hide the div when the page loads (on browser, not server), and another to show them. Have a look at these - http://api.jquery.com/show/ and http://api.jquery.com/hide/ . The examples on that page will translate to what you're after; don't let the ASP.Net thing distract you, by the time your page is on the browser it's in HTML.

Two ModalPopupExtenders on a page cause incorrect validation issues

I have one aspx page that has two UserControls on it; each is primarily a ModalPopupExtender. One has validators; one does not. The one that does not has a Submit button with the CausesValidation="false" attribute on it.
When that Submit button is clicked, nothing happens. Click it again, and the postback happens as expected. There is clearly some validation issue going on here, because if I remove all validators from the page, the postback succeeds on the first click.
What's going on here?
Without seeing the code, I can't say this for certain, but it sounds like you may need to utilize the validation groups. The validation group would be set on the validation components as well as the button that posts back the page.
Make sure that the buttons that show the ModalPopups are marked CausesValidation=false as well. What was happening was that the "Show Dialog" button for the non-validating dialog was not marked this way; this was causing the entire page to validate when that dialog was shown - including the other dialog, which did have validation and was failing it. This caused the Submit button to fail for apparently no reason.
Moral of the story: Make sure to use CausesValidation on any buttons that don't require it, and use Validation Groups to separate out various page parts, especially when parts of the page are not visible.
Have you tried removing the OK button property from the modal popup?

Resources