javascript - Using jquery with ASP.net and C# - Stack Overflow

In my C# i used this code:using System;using System.Collections.Generic;using System.Linq;using Syst

In my C# i used this code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;

public partial class _Default : System.Web.UI.Page
{

    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ASPConnectionString"].ConnectionString);


    protected void Page_Load(object sender, EventArgs e)
    {
        con.Open();

    }
    protected void SubmitButtonClick(object sender, EventArgs e)
    {
        SqlCommand cmd = new SqlCommand("INSERT INTO Students (Name,City,Age) Values(@Name,@City,@Age)", con);
        cmd.Parameters.AddWithValue("@Name", NameText.Text);
        cmd.Parameters.AddWithValue("@City", CityText.Text);
        cmd.Parameters.AddWithValue("@Age", Convert.ToInt32(AgeText.Text));
        cmd.ExecuteNonQuery();
        con.Close();
        SuccessMessage.Visible = true;
        SuccessMessage.Text = "Successfully Inserted data";
        CityText.Text = "";
        NameText.Text = "";
        AgeText.Text = "";

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "showalert();", true);

    }

}

And my ASPX:

   <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1
        {
            text-align: center;
        }

        .auto-style2
        {
            width: 163px;
        }

        .auto-style3
        {
            text-align: center;
        }

        .auto-style4
        {
            font-size: large;
        }

        .auto-style5
        {
            text-align: right;
        }

        .auto-style6
        {
            width: 112px;
        }

        .auto-style7
        {
            text-align: center;
            width: 163px;
        }
    </style>


</head>
<body>



<div id="dialog" title="Basic dialog">
  <p>insert succussfly</p>
</div>

<button id="opener">Open Dialog</button>

    <form id="form1" runat="server">


        <div>

            <div class="auto-style3">
                <span class="auto-style4">Inserting Data to DB<br />
                </span>
            </div>
            <table align="center" style="width: 41%; height: 179px;">
                <tr>
                    <td class="auto-style5">Name:</td>
                    <td class="auto-style6">
                        <asp:TextBox ID="NameText" runat="server"></asp:TextBox>
                    </td>
                    <td class="auto-style2">
                        <asp:RequiredFieldValidator ID="NameValidation" runat="server"
                            ControlToValidate="NameText" ErrorMessage="Name is reqiured"
                            Style="color: #FF0000; text-align: left">*</asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style5">City:</td>
                    <td class="auto-style6">
                        <asp:TextBox ID="CityText" runat="server"></asp:TextBox>
                    </td>
                    <td class="auto-style2">&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style5">Age:</td>
                    <td class="auto-style6">
                        <asp:TextBox ID="AgeText" runat="server"></asp:TextBox>
                    </td>
                    <td class="auto-style2">
                        <asp:RangeValidator ID="AgeValidation" runat="server"
                            ControlToValidate="AgeText" Display="Dynamic"
                            ErrorMessage="Age need to be between 20 to 50" MaximumValue="50"
                            MinimumValue="20" Style="color: #CC0000">*</asp:RangeValidator>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                            ControlToValidate="AgeText" Display="Dynamic" ErrorMessage="Age is required"
                            Style="color: #CC0000">*</asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style1" colspan="2">
                        <asp:Button ID="SubmitButton" runat="server" OnClick="SubmitButtonClick"
                            Style="text-align: center" Text="Insert" />
                    </td>
                    <td class="auto-style7">&nbsp;</td>
                </tr>
            </table>

            <asp:ValidationSummary ID="ValidationSummary1" runat="server"
                Style="color: #CC0000" />

            <asp:Label ID="SuccessMessage" runat="server" Text="" Visible="False"></asp:Label>

        </div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:ASPConnectionString %>"
            SelectCommand="SELECT * FROM [Students]"></asp:SqlDataSource>
    </form>

    <link rel="stylesheet" href="//ajax.googleapis/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript">

            $(function () {
                $("#dialog").dialog({
                    autoOpen: false,
                    show: {
                        effect: "blind",
                        duration: 1000
                    },
                    hide: {
                        effect: "explode",
                        duration: 1000
                    }
                });

                function showalert() {
                    $(document).ready(function () {
                        $("#dialog").dialog("open");
                    });
                }
        /*        $("#opener").click(function () {
                    $("#dialog").dialog("open");
                });*/
            });

    </script>
</body>
</html>

I want to open the dialog after postback and it runs the alert function after finished the insert. Can you help me thanks. I'm now getting showalert() is not defined.

In my C# i used this code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;

public partial class _Default : System.Web.UI.Page
{

    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ASPConnectionString"].ConnectionString);


    protected void Page_Load(object sender, EventArgs e)
    {
        con.Open();

    }
    protected void SubmitButtonClick(object sender, EventArgs e)
    {
        SqlCommand cmd = new SqlCommand("INSERT INTO Students (Name,City,Age) Values(@Name,@City,@Age)", con);
        cmd.Parameters.AddWithValue("@Name", NameText.Text);
        cmd.Parameters.AddWithValue("@City", CityText.Text);
        cmd.Parameters.AddWithValue("@Age", Convert.ToInt32(AgeText.Text));
        cmd.ExecuteNonQuery();
        con.Close();
        SuccessMessage.Visible = true;
        SuccessMessage.Text = "Successfully Inserted data";
        CityText.Text = "";
        NameText.Text = "";
        AgeText.Text = "";

        ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "showalert();", true);

    }

}

And my ASPX:

   <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .auto-style1
        {
            text-align: center;
        }

        .auto-style2
        {
            width: 163px;
        }

        .auto-style3
        {
            text-align: center;
        }

        .auto-style4
        {
            font-size: large;
        }

        .auto-style5
        {
            text-align: right;
        }

        .auto-style6
        {
            width: 112px;
        }

        .auto-style7
        {
            text-align: center;
            width: 163px;
        }
    </style>


</head>
<body>



<div id="dialog" title="Basic dialog">
  <p>insert succussfly</p>
</div>

<button id="opener">Open Dialog</button>

    <form id="form1" runat="server">


        <div>

            <div class="auto-style3">
                <span class="auto-style4">Inserting Data to DB<br />
                </span>
            </div>
            <table align="center" style="width: 41%; height: 179px;">
                <tr>
                    <td class="auto-style5">Name:</td>
                    <td class="auto-style6">
                        <asp:TextBox ID="NameText" runat="server"></asp:TextBox>
                    </td>
                    <td class="auto-style2">
                        <asp:RequiredFieldValidator ID="NameValidation" runat="server"
                            ControlToValidate="NameText" ErrorMessage="Name is reqiured"
                            Style="color: #FF0000; text-align: left">*</asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style5">City:</td>
                    <td class="auto-style6">
                        <asp:TextBox ID="CityText" runat="server"></asp:TextBox>
                    </td>
                    <td class="auto-style2">&nbsp;</td>
                </tr>
                <tr>
                    <td class="auto-style5">Age:</td>
                    <td class="auto-style6">
                        <asp:TextBox ID="AgeText" runat="server"></asp:TextBox>
                    </td>
                    <td class="auto-style2">
                        <asp:RangeValidator ID="AgeValidation" runat="server"
                            ControlToValidate="AgeText" Display="Dynamic"
                            ErrorMessage="Age need to be between 20 to 50" MaximumValue="50"
                            MinimumValue="20" Style="color: #CC0000">*</asp:RangeValidator>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                            ControlToValidate="AgeText" Display="Dynamic" ErrorMessage="Age is required"
                            Style="color: #CC0000">*</asp:RequiredFieldValidator>
                    </td>
                </tr>
                <tr>
                    <td class="auto-style1" colspan="2">
                        <asp:Button ID="SubmitButton" runat="server" OnClick="SubmitButtonClick"
                            Style="text-align: center" Text="Insert" />
                    </td>
                    <td class="auto-style7">&nbsp;</td>
                </tr>
            </table>

            <asp:ValidationSummary ID="ValidationSummary1" runat="server"
                Style="color: #CC0000" />

            <asp:Label ID="SuccessMessage" runat="server" Text="" Visible="False"></asp:Label>

        </div>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:ASPConnectionString %>"
            SelectCommand="SELECT * FROM [Students]"></asp:SqlDataSource>
    </form>

    <link rel="stylesheet" href="//ajax.googleapis./ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis./ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript">

            $(function () {
                $("#dialog").dialog({
                    autoOpen: false,
                    show: {
                        effect: "blind",
                        duration: 1000
                    },
                    hide: {
                        effect: "explode",
                        duration: 1000
                    }
                });

                function showalert() {
                    $(document).ready(function () {
                        $("#dialog").dialog("open");
                    });
                }
        /*        $("#opener").click(function () {
                    $("#dialog").dialog("open");
                });*/
            });

    </script>
</body>
</html>

I want to open the dialog after postback and it runs the alert function after finished the insert. Can you help me thanks. I'm now getting showalert() is not defined.

Share Improve this question edited Oct 24, 2014 at 17:29 Taha asked Oct 24, 2014 at 16:26 TahaTaha 6512 gold badges6 silver badges18 bronze badges 1
  • what's wrong? What's your question? Are you getting javascript errors? – DLeh Commented Oct 24, 2014 at 16:32
Add a ment  | 

4 Answers 4

Reset to default 1

Since you have used javascript closure , and inside that you have showalert, so it will not be accessible to outside. For more info on closure read this - http://www.w3schools./js/js_function_closures.asp and How do JavaScript closures work?

To make it work, please use this.

function showalert() {
$(function () {
    $("#dialog").dialog("open");
});
}

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "showalert()", true);

NOTE - The code you are using SqlCommand cmd = new SqlCommand("INSERT INTO Student .... is prone to SQL injection , you need to use parameterized query for this.

Your code is working fine. I think you might be missing jquery and/or jqueryui.

Or you have script error in other part of your code. Create a stand along aspx page and test with the following code.

<asp:Button ID="SubmitButton" runat="server"
    Text="Submit"
    OnClick="SubmitButton_Click" />
<link rel="stylesheet" href="//ajax.googleapis./ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis./ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });
    });
    function showalert() {
        $(function () {
            $("#dialog").dialog("open");
        });
    }
</script>
<div id="dialog" title="Basic dialog">
    <p>insert successfully</p>
</div>

Code Behind

protected void SubmitButton_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this, this.GetType(), 
        "script", "showalert();",  true);
}

Your on the proper approach, you code actually looks correct (Aside you use jQuery UI Dialog rather than Alert. Here would be some items to help you a bit more.

function Submit() {
     if(!confirm("Are you sure you would like to submit?")) {
          return false;
     } else { 
          return true; 
     }
}

That particular function will act for a confirmation on the on click event. Then for your front-end you would have:

<asp:Button 
      id="btnSubmit" runat="server" 
      OnClientClick="return Submit();" 
      OnClick="btnSubmit_Click" />

So when you hit the button, it will bring a confirm dialog up for the user. On the code behind:

protected void btnSubmit_Click(object sender, EventArgs e)
{
     // Do your database stuff, then to call Javascript from code behind.
     ScriptManager.RegisterStartupScript(this.GetType(), "Alert", "ResponseToClient();", true);
}

Your calling a function called ResponseToClient and your wrapping it in the <script> tag. So lets build our function:

function ResponseToClient() {
     alert("You successfully saved.");
}

Though the example is primitive it should provide more detail and information for you to make it useful for the User Experience correctly. Important: I usually if I do a call from code behind to front-end, I use a function. It is often far more reliable and doesn't always error in the closure of your script tag. Hope this gets you started.

Noticed: Your code could be subject to SQL Injection. You should use parameter approach:

string query = @"SELECT * FROM [Table] WHERE ([Column] = @Id);";
using(SqlConnection connection = new SqlConnection(...))
     using(SqlCommand mand = new SqlCommand(query, connection))
     {
          mand.Parameters.AddWithValue("@Id", parameter); // OR
          mand.Parameters.Add("@Id", SqlDbType.Int).Value = parameter;
     }

That is the proper approach, as it implements IDispose and properly parameterizes your query.

To add to Arindam Nayak's ment, your showalert function is only valid inside the scope of the anonymous function defined at the top of your script : $(function () { ... }.

You just need to move the definition of the showalert function after the first function for it to work:

$(function () { $("#dialog").dialog({ autoOpen: false, show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); });

function showalert() {
    $(function () {
        $("#dialog").dialog("open");
    });
}

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745533509a4631802.html

相关推荐

  • javascript - Using jquery with ASP.net and C# - Stack Overflow

    In my C# i used this code:using System;using System.Collections.Generic;using System.Linq;using Syst

    1天前
    30

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信