Update UpdatePanel after running ajax without page refresh

Question

Update UpdatePanel after running ajax without page refresh

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Good afternoon, I need to update components that are within UpdatePanel page aspx after insertion via Ajax . The Ajax executes a function in code-behind in C# , and reloading of the entire page happens.

Ajax executing the insert:

<script type="text/javascript">
    function FunctionComment(post_id, texto) {
        if (event.keyCode == 13) {
            var adv_id = $('#<%= hdfAdvogadoID.ClientID %>').val();

            try {
                $.ajax({
                    type: "POST",
                    url: 'Default.aspx/Comentar',
                    data: "{'ComentarioTexto':'" + texto
                    + "','AdvogadoID':'" + adv_id + "','PostID':'" + post_id + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: false,
                    success: ShowMessage(" Comentadado!", 'Success', "icon fa fa-check"),
                    error: function (msg) {
                        alert(msg.d);
                    }
                });
            } catch (err) { }
        }
    }
</script>

Method responsible for entering the data in the database:

    [System.Web.Services.WebMethod]
    public static string Comentar(string ComentarioTexto, int AdvogadoID, int PostID)
    {

        if (HttpContext.Current != null)
        {
            ComentarioCRUD.SalvaComentario(ComentarioTexto, AdvogadoID, PostID);
            NotificationCRUD.AlterarFullNotificationComent();
        }

        return string.Empty;
    }

The code works perfectly but after running the page it is updated whole not just the UpdatePanel.

    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
        <asp:Repeater runat="server" ID="Repeater1" 
            OnItemDataBound="RptTime_ItemDataBound">
            <ItemTemplate>
            <codigos>....</codigos>
            <codigos>....</codigos>
                <asp:Repeater ID="RptComentario" 
                    OnItemDataBound="RptComentario_ItemDataBound" runat="server">
                    <asp:TextBox CssClass="form-control input-sm"
                        placeholder="Pressione enter para postar comentário"
                        ID="txtPost" runat="server" AutoPostBack="false" autocomplete="off"
                        onkeypress='<%# String.Format("FunctionComment(\"{0}\", this.value);", Eval("PostID")) %>'>
                    </asp:TextBox>
                    <ItemTemplate>
                    </ItemTemplate>
                </asp:Repeater>
            </ItemTemplate>
        </asp:Repeater>
    </ContentTemplate>
</asp:UpdatePanel>

You would have to use a trigger to only update UpdatePanel after the command success: of Ajax !?

Design:

javascript c# asp.net ajax

asked by anonymous 26.02.2018 / 20:22

2 answers

1

You are using the UpdatePanel component that already role of ajax you are trying to do in your question, a basic example will be demonstrated with a minimal example:

How it will work:

Clicking the button will send a message to be added in a static list only to show that the entire page is not updated only the UpdatePanel :

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormUpdatePanel.aspx.cs" 
         Inherits="WebApplicationForms.WebFormUpdatePanel" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1>Sem Refresh</h1>
        <div>
            <label><%=DateTime.Now%></label>
        </div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div>
                        <asp:TextBox runat="server" ID="TxtMensagem"></asp:TextBox>
                        <asp:Button ID="ButInserir" runat="server" Text="Inserir"
                                    OnClick="ButInserir_Click" />
                    </div>
                    <asp:Repeater ID="RptMensagem" runat="server">
                        <ItemTemplate>
                            <div>
                                <asp:Label ID="LblMensagem" runat="server" 
                                           Text='<%#Container.DataItem%>'></asp:Label>
                            </div>
                        </ItemTemplate>
                    </asp:Repeater>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

Code

using System.Collections.Generic;
namespace WebApplicationForms
{
    public partial class WebFormUpdatePanel : System.Web.UI.Page
    {
        public static List<string> Messages = new List<string>();

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Messages.Clear();
                RptMensagem.DataSource = Messages;
                RptMensagem.DataBind();
            }
        }

        protected void ButInserir_Click(object sender, EventArgs e)
        {
            Messages.Add(TxtMensagem.Text);
            TxtMensagem.Text = string.Empty;
            RptMensagem.DataSource = Messages;
            RptMensagem.DataBind();
        }
    }
}

In your code instead of doing this by static method, you can put the code in the default event, for example the Button is OnClick , and so on.

27.02.2018 / 01:23

Error storing byte in mysql db ASP.NET MVC - Pass data between Views [closed]

score 0 · Accepted Answer

According to the tips of @Virgilio I solved the question in a not very elegant but functional way:

I added the event OnTextChanged to TextBox within Repeater :

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <asp:Repeater runat="server" ID="RptTime" 
        OnItemDataBound="RptTime_ItemDataBound">
        <ItemTemplate>
        <codigos>....</codigos>
        <codigos>....</codigos>
            <asp:Repeater ID="RptComentario" 
                OnItemDataBound="RptComentario_ItemDataBound" runat="server">
                   <asp:TextBox CssClass="form-control input-sm"
         placeholder="Pressione enter para postar comentário" 
             OnTextChanged="txtPost_TextChanged"
                     onkeydown='<%# String.Format("setPostID(\"{0}\", this.value);", 
         Eval("PostID")) %>' ID="txtPost" runat="server" AutoPostBack="true" 
         autocomplete="off"></asp:TextBox>
                <ItemTemplate>
                </ItemTemplate>
            </asp:Repeater>
        </ItemTemplate>
    </asp:Repeater>
</ContentTemplate>

No Code-Behind C # assigns the event to ItemDataBound of Repeater :

    protected void RptTime_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {            
        if (e.Item.ItemType == ListItemType.AlternatingItem || e.Item.ItemType == ListItemType.Item)
        {
            TextBox txtPost = (TextBox)e.Item.FindControl("txtPost");
            txtPost.TextChanged += new EventHandler(txtPost_TextChanged);
    }
}

Soon I created the event that executes the save in the bank, and other actions:

protected void txtPost_TextChanged(object sender, EventArgs e)
    {
        ComentarioCRUD.SalvaComentario(Convert.ToString(hdfTexto.Value), 
                Convert.ToInt32(hdfAdvogadoID.Value), 
                Convert.ToInt32(hdfPostID.Value));

        NotificationCRUD.AlterarFullNotificationComent();

        CarregaTimeline();
    }

And to get the value of TextBox I used javascript :

<script type="text/javascript">
    function setPostID(post_id, txt) {
        document.getElementById("<%=hdfPostID.ClientID %>").value = post_id;
        document.getElementById("<%=hdfTexto.ClientID%>").value = txt;
    }
</script>

Running this way there is no refresh on the page just in UpdatePanel!