locked
Bootstrap, FontAwesome, and ASP.NET webforms RRS feed

  • Question

  • User-1466119671 posted

    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

    Thursday, March 4, 2021 12:37 AM

All replies

  • User-939850651 posted

    Hi Wallym,

    According to your description, I created a simple example to implement the problem you described, have you tried using hidden buttons?

    Something like this:

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.5.1.min.js"></script>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/bootstrap.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
        <script>
            function triggerSubmit() {
                var form = document.getElementById('form1');
                if (form.checkValidity()) {
                    //alert('client script');
                    submitEvent();
                <%=hidden.ClientID %>.value = "submit";
                    $('#triggerBtn').prop('disabled', true);
                }
                <%=btnHidden.ClientID %>.click();
            }
    
            function submitEvent() {
                console.log('client function finished..');
            }
        </script>
    </head>
    <body>
        <form runat="server" id="form1">
            <asp:HiddenField runat="server" ID="hidden" />
            <div class="col-md-4">
                <label for="box1" class="form-label">box1</label>
                <input type="text" class="form-control" id="box1" value="Mark" required="required" />
                <div class="invalid-feedback">
                    Please choose a username.
                </div>
            </div>
            <div class="col-md-4">
                <label for="box2" class="form-label">box2</label>
                <input type="text" class="form-control" id="box2" value="Otto" required="required" />
            </div>
            <div class="col-md-4">
                <label for="box3" class="form-label">box3</label>
                <input type="text" class="form-control" id="box3" required="required" />
            </div>
            <div class="col-md-12">
                <label for="box4" class="form-label">box4</label>
                <input type="text" class="form-control" id="box4" required="required" />
            </div>
            <div class="col-12">
                <button type="button" id="triggerBtn" runat="server" class="btn btn-default" onclick="triggerSubmit()">
                    <i class="fa fa-pen fa-fw" aria-hidden="true"></i>
                    Update
                </button>
    
                <asp:Button runat="server" Style="display: none;" ID="btnHidden"
                    OnClick="btnSubmission_ServerClick"></asp:Button>
                <%--<button id="btnSubmission" type="button" onserverclick="btnSubmission_ServerClick"  runat="server" class="buttonAsLink nav-link pl-0" ><i class="fa fa-pen fa-fw"></i> Update</button>--%>
            </div>
        </form>
    </body>
    protected void Page_Load(object sender, EventArgs e)
            {
                if (hidden.Value == "submit") {
                    HtmlControl Submitbutton = Page.FindControl("triggerBtn") as HtmlButton;
                    Submitbutton.Disabled = true;
                }
            }
    
            protected void btnSubmission_ServerClick(object sender, EventArgs e)
            {
                Response.Write("<script>console.log('server method finished..')</script>");
            }

    It will verify that the input is valid before submitting the form, and will execute the script code ( submitEvent ) you need before postback.

    Hope this can help you.

    Best regards,

    Xudong Peng

    Thursday, March 4, 2021 8:58 AM
  • User-1466119671 posted

    Thanks XuDong.  I actually went a slightly different route.

    after a lot of googling and trying some things, I figured out that the onclick was overriding the onserverclick when I looked at the html generated. I looked at the code, and finally figured out out to do it. If someone finds this usefully, here goes. I had to use my client side javascript. Inside of it, I created an __dopostback passing the id of the button and a parameter. I then had to in my pageload event, look for the parameter, and if I found it, I called my update method. I feel dirty.

    Thursday, March 4, 2021 9:04 PM