Update ASP.Net FormView on Button click without page PostBack using jQuery AJAX

Last Reply 5 months ago By dharmendr

Posted 5 months ago

i was told that if i dont want a postback or page reloading after inserting record i should put the datalist into a update panel, but still it didnt meet my question, if am to use jquery button to insert a number into table, is there no way to see the result appear on datalist instantly.

here is the html markup

    <asp:FormView runat="server" ID="dlResultOnClick">
        <ItemTemplate>
            <table>
                <tr>
                    <td>
                        <asp:Button Text="Add" runat="server" ID="btnAddnumber" OnClick="btnAddnumber_Click" />
                        UserId:
                    </td>
                    <td>
                        <asp:Label ID="Label1" Text='<%#Eval("USERID") %>' runat="server"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>
                        Count:
                    </td>
                    <td>
                        <asp:Label ID="Label2" Text='<%#Eval("Result") %>' runat="server"></asp:Label>
                       
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:FormView>

for instance this example on this forum points to what you said using ajax, but if you look at the jquery you will see the reload code that makes the page reload when the button add is click, this reload helps to see the instant result, but it still the same with server postback that reload the page, is there a way to view the jquery instant result on page without postback issue, this what i mean by jquery instant result view.

http://www.aspforums.net/Threads/109879/Change-Button-text-from-add-to-added-when-users-choice-is-updated-using-jQuery-Ajax-in-ASPNet/

Posted 5 months ago

Using the below sample i have modified the javascript code.

Change Button text from add to added when users choice is updated using jQuery Ajax in ASP.Net

Check this example. Now please take its reference and correct your code.

Login.aspx

<table>
    <tr>
        <td>
            UserName:
        </td>
        <td>
            <asp:TextBox ID="txtUserName" runat="server" />
        </td>
    </tr>
    <tr>
        <td>
            Password:
        </td>
        <td>
            <asp:TextBox ID="txtPassword" runat="server" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:Button ID="Button1" Text="Login" OnClick="ValidateLogin" runat="server" />
        </td>
    </tr>
</table>

Login.aspx.cs

protected void ValidateLogin(object sender, EventArgs e)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        string query = "SELECT UserName FROM Users WHERE UserName = @Username AND Password = @Password";
        using (SqlCommand cmd = new SqlCommand(query, con))
        {
            if (!string.IsNullOrEmpty(txtUserName.Text.Trim()) && !string.IsNullOrEmpty(txtPassword.Text.Trim()))
            {
                cmd.Parameters.AddWithValue("@Username", txtUserName.Text.Trim());
                cmd.Parameters.AddWithValue("@Password", txtPassword.Text.Trim());
                con.Open();
                string userName = cmd.ExecuteScalar().ToString();
                Session["UserName"] = userName;
                con.Close();
                if (!string.IsNullOrEmpty(userName))
                {
                    Response.Redirect("Home.aspx");
                }
                else
                {
                    ClientScript.RegisterClientScriptBlock(this.GetType(), "Alert", "alert('Invalid UserName or Password!')", true);
                }
            }
            else
            {
                ClientScript.RegisterClientScriptBlock(this.GetType(), "Alert", "alert('UserName and Password Required!')", true);
            }
        }
    }
}

Home.aspx

<div>
    <asp:FormView ID="FormView1CHOICE" runat="server" OnDataBound="FormView1CHOICE_DataBound">
        <HeaderTemplate>
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <th>
                        Id
                    </th>
                    <th>
                        UserName
                    </th>
                    <th>
                        FriendUserName
                    </th>
                    <th>
                        UserStatus
                    </th>
                    <th>
                        Count
                    </th>
                    <th>
                    </th>
                </tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <asp:Label Text='<%# Eval("Id") %>' runat="server" />
                </td>
                <td>
                    <asp:Label ID="Label1" Text='<%# Eval("UserName") %>' runat="server" />
                </td>
                <td>
                    <asp:Label ID="Label2" Text='<%# Eval("FriendUserName") %>' runat="server" />
                </td>
                <td>
                    <asp:Label ID="Label3" Text='<%# Eval("UserStatus") %>' runat="server" />
                </td>
                <td>
                    <asp:Label ID="Label4" Text='<%# Eval("Count") %>' runat="server" />
                </td>
                <td>
                    <asp:LinkButton ID="btnADD" Text="Add" runat="server" />
                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
        <PagerTemplate>
            <table>
                <tr>
                    <td>
                        <asp:LinkButton ID="FirstButton" CommandName="Page" CommandArgument="First" Text="<<"
                            runat="server" />
                    </td>
                    <td>
                        <asp:LinkButton ID="PrevButton" CommandName="Page" CommandArgument="Prev" Text="<"
                            runat="server" />
                    </td>
                    <td>
                        <asp:LinkButton ID="NextButton" CommandName="Page" CommandArgument="Next" Text=">"
                            runat="server" />
                    </td>
                    <td>
                        <asp:LinkButton ID="LastButton" CommandName="Page" CommandArgument="Last" Text=">>"
                            runat="server" />
                    </td>
                </tr>
            </table>
        </PagerTemplate>
    </asp:FormView>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
    $(function () {
        $('[id*=btnADD]').on('click', function () {
            var username = $(this).closest('tr').find('[id*=Label1]').text();
            var button = $(this);
            var userStatus = $(this).closest('tr').find('[id*=Label3]');
            var count = $(this).closest('tr').find('[id*=Label4]');
            $.ajax({
                type: "POST",
                url: "Home.aspx/UpdateStatus",
                data: '{userName: "' + username + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $(button).text(($(button).text() == "Add") ? "Added" : "Add");
                    $(userStatus).text(($(userStatus).text() == "False") ? "True" : "False");
                    $(count).text(($(count).text() == "0") ? "1" : "0");
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });

            return false;
        });
    });
</script>

Home.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindFormView();
    }
}
 
string count = "";
protected void FormView1CHOICE_DataBound(object sender, EventArgs e)
{
    (FormView1CHOICE.FindControl("btnAdd") as LinkButton).Text = count == "1" ? "Added" : "Add";
}
 
public void BindFormView()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    SqlConnection con = new SqlConnection(constr);
    if (Session["UserName"] != null && !string.IsNullOrEmpty(Session["UserName"].ToString()))
    {
    }
    SqlCommand cmd = new SqlCommand("SELECT * FROM Status WHERE UserName = @UserName", con);
    cmd.Parameters.AddWithValue("@UserName", Session["UserName"].ToString());
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    sda.Fill(dt);
    count = dt.Rows[0]["Count"].ToString();
    FormView1CHOICE.DataSource = dt;
    FormView1CHOICE.DataBind();
}
 
[System.Web.Services.WebMethod]
public static void UpdateStatus(string userName)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    SqlConnection con = new SqlConnection(constr);
    SqlCommand cmd = new SqlCommand("SELECT * FROM Status WHERE UserName = @UserName", con);
    cmd.Parameters.AddWithValue("@UserName", userName);
    con.Open();
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    DataTable dt = new DataTable();
    con.Close();
    sda.Fill(dt);
    if (dt.Rows.Count > 0)
    {
        string status = dt.Rows[0]["UserStatus"].ToString();
        string count = dt.Rows[0]["Count"].ToString();
 
        SqlConnection con1 = new SqlConnection(constr);
        SqlCommand cmd1 = new SqlCommand("UPDATE Status SET UserStatus = @Status, Count = @Count WHERE UserName = @UserName", con1);
        con1.Open();
        cmd1.Parameters.AddWithValue("@UserName", userName);
        if (status.ToLower() == "true" && count == "1")
        {
            cmd1.Parameters.AddWithValue("@Status", "0");
            cmd1.Parameters.AddWithValue("@Count", "0");
        }
        else
        {
            cmd1.Parameters.AddWithValue("@Status", "1");
            cmd1.Parameters.AddWithValue("@Count", "1");
        }
        cmd1.ExecuteNonQuery();
        con1.Close();
    }
}

Screenshot