Perform popup ASP jQuery C #

Question

Perform popup ASP jQuery C #

Navigation

#1 by (1 votes)

2

I want to perform as an alert but with jQuery, that is, if something bad appears that shows the alert as a popup . That is to say at this moment it does the validation but with a alert of JavaScript I want it to be more friendly for that I'm doing with jQuery.

This is my current code.

<script type="text/javascript">
function ShowPopup(message) {
    $(function () {
        $("#dialog").html(message);
        $("#dialog").dialog({
            title: "jQuery Dialog Popup",
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
    });
};
</script>

asp:ScriptManager ID="ScriptManager1" runat="server">
    /asp:ScriptManager>
    asp:UpdatePanel ID="UpdatePanel1" runat="server">
        ContentTemplate>
            div id="dialog" style="display: none">
            /div>
            asp:TextBox ID="txtnumero" runat="server">
        asp:RegularExpressionValidator ID="RegexDecimal" runat="server" ValidationExpression="((\d+)((\.\d{1,2})?))$" ErrorMessage="Ingrese un monto decimal"  ControlToValidate="txtnumero" />
       asp:ValidationSummary runat="server" ShowMessageBox="true" ShowSummary="false" />
            asp:Button ID="btnShowPopup" runat="server" Text="Guardar" OnClick="btnShowPopup_Click" />
        /ContentTemplate>
    /asp:UpdatePanel>
    /form>

In the code behind :

using (SqlConnection conn = new SqlConnection("Data Source=PIEROFLORES-PC;Password=123456789;Initial Catalog=colegio;Integrated Security=True"))
{
    string sql = @"Insert into numero (numero) 
    values(@numero)";
    conn.Open();
    SqlCommand cmd = new SqlCommand(sql, conn);
    cmd.Parameters.AddWithValue("@numero", txtnumero.Text);
    string message = "Message from server side";
    cmd.ExecuteNonQuery();

    ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
}

As an example:

c# asp.net

asked by PieroDev 27.03.2017 в 04:49

source

1 answer

window.open adding styles at the time of printing Body mass index - C

score 1 · Answer 1

Following the thread of the previous question , I think we should see the problem from a different perspective. Initially, the plugin that sample samples makes a call to the server, which we can save by performing validations on the client side with JavaScript and jQuery.

For this example I used the plugin iOS Style Dialog Plugin but in the network there are plenty of plugins waiting to be used, this is quite simple to implement and use.

References to style sheets, jQuery and the same plugin (these go in the section within <head> ):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="modal.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="modal.js"></script>
<style>
body { overflow:hidden;}
.container { margin-top:70px;}
    .color-red { color: red; }
    .bg-blue{ background-color: blue; }
</style>

Remember to download the files modal.css and modal.js , place them in some folder, in this case I put them in the root folder.

JavaScript function to validate user input (I also put it in the <head> section):

<script type="text/javascript">
    function validaEntradaUsuario() {
        var input = document.getElementById('<%=txtMonto.ClientID %>').value;
        if (/^\d+$/.test(input) || /^(\d+\.?\d{0,9}|\.\d{1,9})$/.test(input)) {
            return true;
        }
        else {
            $.alert('Ingrese un monto válido');
            return false;
        }
    }
</script>

Page content and user controls:

<div>
    <label>Monto:</label><br />
    <asp:TextBox ID="txtMonto" runat="server" CssClass="txtInput"></asp:TextBox>
</div>
<div>
    <br />
    <asp:Button ID="btnSubmitForm" runat="server" Text="Submit Form" OnClick="btnSubmitForm_Click" OnClientClick="return validaEntradaUsuario();" />
</div>

Basically, when%% of the form is executed Submit , the function OnClientClick="return validaEntradaUsuario();" JavaScript gets the value of validaEntradaUsuario() and validates its content by means of two regualar expressions, is for the validation of a whole amount or that includes decimals, finally, if everything goes well continues the execution of the code, otherwise, the error message is displayed.

Note: I purposely put some things in a static way, that is, there are some things that can be automated and can work for one or more controls, it's all part of the learning process.