Using Bootbox prompt in ASP.NET webforms

Question

I'm having trouble figuring out how to use the Bootbox's prompt functionality in my ASP.NET webforms.Currently I'm using the default JS prompt as follows:

<script language='javascript'>
    function defaultval() {
        var pmt = prompt('Please enter a name for the template.',
            document.getElementById('HiddenFieldCurrentTemplate').value);
        return pmt;
    }
</script>

<asp:Button ID="btnSaveTemplate" runat="server" CssClass="btn-primary"  OnClientClick="HiddenField1.value = defaultval()" Text="Save as Template" />

Basically I need help in replacing the default JS prompt with Bootbox's prompt and assign the value returned by the prompt to a hidden field like I currently doing with OnClientClick="HiddenField1.value = defaultval()"

The dialog just pops up and postback happens no matter what :-( — ranasrule, Jan 16 '19 at 09:54
As we note in the [documentation](http://bootboxjs.com/documentation.html#bb-prompt-dialog), you can't use bootbox.prompt as a drop-in replacement for the native prompt. I would need some time to create an answer, but basically, you need to prevent postback, call the prompt function, and then manually trigger postback ([like so](https://stackoverflow.com/questions/3591634/how-to-use-dopostback)) if the result fits your criteria. — Tieson T., Jan 17 '19 at 02:59

Ratheesh · Answer 1 · 2019-01-16T12:22:47.943

Try below code snippet.

Use asp.net web controls instead of html control i used below

function defaultval() {
 bootbox.prompt("This is the default prompt!", function(result){ $("#HiddenField1").val(result);
$('#form1').submit();
 });
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" />
<form id="form1" action="" method="post">
<input type='submit' onclick='return defaultval()' id='btnSubmit' name='btnSubmit' value="Save as Template" />

<input type='hidden' id='HiddenField1' name='HiddenField1' />
</form1>

[Edit]

Please find the ASP.NET version

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" />

</head>
<body>
 <form id="form1" runat="server">
     <asp:Button runat="server" ID="btnSubmit"  OnClick="btnSubmit_Click" OnClientClick='return defaultval()' Text="Save as Template" />
     <asp:HiddenField ID="HiddenField1" runat="server" />
</form>
    <script>
        function defaultval() {
            event.preventDefault();
            bootbox.prompt("This is the default prompt!", function (result) {
                if (result != null && result!='') {
                    $("#HiddenField1").val(result);
                    $("#<%=btnSubmit.ClientID%>").click();
                } else {
                    alert('please enter something in textbox');
                    return false;
                }
            });
           
        }
    
    </script>
</body>
</html>

C# Code

   protected void btnSubmit_Click(object sender, EventArgs e)
        {
            Response.Write(HiddenField1.Value);
        }

Thank you for your reply.The value does get assigned to the hidden field as the alert displays it but unfortunately postback isnt occurring when I use asp.net button control — ranasrule, Jan 16 '19 at 10:59
Earlier you said, you dont want postback . I think you want to use the assigned hidden value in the code behind. , right? I edited the code. — Ratheesh, Jan 16 '19 at 11:12
Nope. Not working. I do want a postback once I have had a chance to enter a value in the prompt and that value is saved to the hidden field as I wasn't to deal with the value in hidden field at server-side...sorry I want clear about that. Also I think the forced form submission works on html forms and not webforms if I remember correctly. — ranasrule, Jan 16 '19 at 11:17
webforms are rendered as HTML forms. Forced submitssion work on webforms as well. Further to add this, you can check call back feature of bootbox — Ratheesh, Jan 16 '19 at 11:35
Copied and pasted your code as is. Nothing happens now when button is clicked.Just a postback occurs. Browser console in Firefox shows the following error: ReferenceError: event is not defined[Learn More] WebForm2:29:9 defaultval http://localhost:4359/WebForm2:29:9 onclick http://localhost:4359/WebForm2:1:8 — ranasrule, Jan 16 '19 at 14:00

Using Bootbox prompt in ASP.NET webforms

1 Answers1