how to make chat like facebook(multichat at single time) in asp.net c#RSS

3 replies

Last post May 28, 2018 07:15 AM by Brando ZWZ

‹ Previous Thread|Next Thread ›

Shortcuts

mukesh1

Member

6 Points

33 Posts

how to make chat like facebook(multichat at single time) in asp.net c#

May 22, 2018 05:08 AM|mukesh1|LINK

i created facebook like chat but problem is that on click of user, it open chat,but if i click on multiple user,then wqant to open all clicked user chat but here only one chat is openeing. 2nd problem is that i saved sender and receiver of each msg,but how will show in msg differently means in different color which msg i sent and different color which msg i receive.

<link href="style.css" rel="stylesheet"/>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="script.js"></script>

<div class="chat_box">
	<div class="chat_head"> Chat Box</div>
	<div class="chat_body"> 
	<div class="col-md-12"> <%--Krishna Teja--%>
        <asp:GridView ID="grduser" runat="server" DataKeyNames="client_id,company" AutoGenerateColumns="false" GridLines="None" OnRowUpdating="grduser_RowUpdating">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <div class="user">
                        <asp:LinkButton ID="LinkButton1" runat="server" Font-Underline="false" ForeColor="Black" CommandName="update" Text='<%# Eval("company") %>'></asp:LinkButton>
                            </div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
	</div>
	</div>
  </div>
<asp:Panel ID="Panel1" runat="server"></asp:Panel>
<div class="msg_box" id="msgbox" style="right:290px">
	<div class="msg_head">Krishna Teja<asp:Label ID="lblcompanyid" runat="server" Text="id"></asp:Label><asp:Label ID="lblcompany" runat="server" Text="company"></asp:Label>
	<div class="close">x</div>
	</div>
       
	<div class="msg_wrap">
         <asp:GridView ID="grdchat" runat="server" AutoGenerateColumns="false" GridLines="None" >
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
		<div class="msg_body">
			<div class="msg_a">This is from A '<%# Eval("title") %>'	</div>
			<div class="msg_b">This is from B, and its amazingly kool nah... i know it even i liked it :)</div>
			<div class="msg_a">Wow, Thats great to hear from you man </div>	
			<div class="msg_push"></div>
		</div>
                          </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
	<div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div>
</div>




protected void grduser_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        var index = e.RowIndex;
        GridViewRow row = grduser.Rows[index];
        lblcompanyid.Text = grduser.DataKeys[row.RowIndex].Values[0].ToString();
        lblcompany.Text = grduser.DataKeys[row.RowIndex].Values[1].ToString();
grdchat.DataSource = sql.getds("select title from consultant_notification where consultantid='" + lblcompanyid.Text + "'");
        grdchat.DataBind();
    }

- Reply
Brando ZWZ
Star

9791 Points

3119 Posts
Re: how to make chat like facebook(multichat at single time) in asp.net c#

May 23, 2018 03:03 AM|Brando ZWZ|LINK
Hi mukesh1,

mukesh1
i created facebook like chat but problem is that on click of user, it open chat,but if i click on multiple user,then wqant to open all clicked user chat but here only one chat is openeing.

According to your codes, I found you bind linkbutton with gridview OnRowUpdating event.

In the gridview OnRowUpdating event, I found you just rebind the grdchat's datasource and rebind the grdchat gridview.

This method will just update the grdchat gridview not create a new one.

If you want to add multiple user's chart, I suggest you could create the grdchat dynamically into the panel.

You could firstly store the user which has already opened the grdchat into session or list.0

Then you could dynamically add the grdchat after click the user link button or in the pageload event.

mukesh1
2nd problem is that i saved sender and receiver of each msg,but how will show in msg differently means in different color which msg i sent and different color which msg i receive.

I suggest you could modify the data stored in the database.

We could create two column in the data table.

One is receive message another one is send message.

Then we could bind the different value in the gridview template.

Like below:
```
         <asp:GridView ID="grdchat" runat="server" AutoGenerateColumns="false" GridLines="None" >
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
		<div class="msg_body">
			<div class="msg_a">This is from A '<%# Eval("title") %>'	</div>
			<div class="msg_b"><%# Eval("Send") %></div>
			<div class="msg_a"><%# Eval("Receive") %></div>	
			<div class="msg_push"></div>
		</div>
                          </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
```
Or you could directly store the send message and receive message as the html element to the database.

Like below:
```
			<div class="msg_a" style="color:xxx">This is from A '<%# Eval("title") %>'	</div>
			<div class="msg_b"  style="color:xxx">This is from B, and its amazingly kool nah... i know it even i liked it :)</div>
			<div class="msg_a" style="color:xxx">Wow, Thats great to hear from you man </div>	
```
Then we directly show the record to the girdview.

Besides, I don't suggest you use girdview search data from database to achieve creating a chart.

It takes too long time.

Normally, we will use client-side chat.

By using this we could avoid querying the database.

At last we could directly store all the data into database without saving the message each time.

More details about how to create chat by using signalr, I suggest you could refer to below article.

https://www.c-sharpcorner.com/UploadFile/78d182/signalr-sample-chat-application-in-C-Sharp/

Best Regards,

Brando
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

mukesh1

Member

6 Points

33 Posts

Re: how to make chat like facebook(multichat at single time) in asp.net c#

May 23, 2018 06:26 AM|mukesh1|LINK

protected void Page_Load(object sender, EventArgs e)
    {
        DataSet ds = sql.getds("select client_id,company from clients");
        grduser.DataSource = ds;
        grduser.DataBind();
    }
    protected void grduser_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        var index = e.RowIndex;
        GridViewRow row = grduser.Rows[index];
        string id = grduser.DataKeys[row.RowIndex].Values[0].ToString();
        //lblcompany.Text = grduser.DataKeys[row.RowIndex].Values[1].ToString();
        //Label myLabel = new Label();
        //Panel Panel1 = new Panel();
        //myLabel.Text = lblcompanyid.Text;
        //Panel1.Controls.Add(myLabel);
       // Literal ltrDyn = new Literal();
       // ltrDyn.Text = "<html><body>This is dynamic html</body></html>";

        grdchat.DataSource = sql.getds("select title,consultant.fname from consultant_notification join consultant on consultant.consult_id=consultant_notification.consultantid where consultantid='" + id + "'");
        grdchat.DataBind();
    }


    protected void btnsavechat_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, typeof(Page), "Alert", "<script>alert('here i will add code in databse,just to sample here');</script>", false);
    
    }



 <form id="form1" runat="server">
    <div>
    <link href="style.css" rel="stylesheet"/>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="script.js"></script>
       

<div class="chat_box">
	<div class="chat_head"> Chat Box</div>
	<div class="chat_body"> 
	<div class="col-md-12"> <%--Krishna Teja--%>
        <asp:GridView ID="grduser" runat="server" DataKeyNames="client_id,company" AutoGenerateColumns="false" GridLines="None" OnRowUpdating="grduser_RowUpdating">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <div class="user">
                        <asp:LinkButton ID="LinkButton1" runat="server" Font-Underline="false" ForeColor="Black" CommandName="update" Text='<%# Eval("company") %>'></asp:LinkButton>
                            </div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
	</div>
	</div>
  </div>

         
<div class="msg_box" id="msgbox" style="right:290px">
	<div class="msg_head">Krishna Teja<%--<asp:Label ID="lblcompanyid" runat="server" Text="id"></asp:Label>--%><asp:Label ID="lblcompany" runat="server" Text='<%# Eval("fname") %>'></asp:Label>
	<div class="close">x</div>
	</div>
       
	<div class="msg_wrap">
        
                    
           
		<div class="msg_body" style="overflow:auto;">
            <asp:GridView ID="grdchat" runat="server" AutoGenerateColumns="false" GridLines="None" >
              <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        
        <div id="" >
			<div class="msg_b"><%--This is from A--%> <%# Eval("title") %>       &nbsp;&nbsp;&nbsp;<small>.....  <%# Eval("fname") %>'</small>	</div>
			<%--<div class="msg_b">This is from B, and its amazingly kool nah... i know it even i liked it :)</div>
			<div class="msg_a">Wow, Thats great to hear from you man </div>--%>	
                        </div>
                    </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView> 
			<div class="msg_push"></div>
		</div>
                        
	<div class="msg_footer"><%--<textarea class="msg_input" rows="4"></textarea>--%>

    <asp:TextBox ID="txtboxchat" height="60px" Width="98%"  TextMode="MultiLine" runat="server"></asp:TextBox>
                <%--<asp:Button ID="Button2" runat="server" Text="Send" OnClick="Button2_Click" OnClientClick="return validation()" />--%>
	</div>
</div>
                      
    </div>
    
        <asp:Button ID="btnsavechat" runat="server" Visible="false" Text="Button" OnClick="btnsavechat_Click"   />
        </div>
    </form>






script code...


$(document).ready(function(){

	$('.chat_head').click(function(){
		$('.chat_body').slideToggle('slow');
	});
	$('.msg_head').click(function(){
		$('.msg_wrap').slideToggle('slow');
	});
	
	$('.close').click(function(){
		$('.msg_box').hide();
	});
	
	$('.user').click(function(){

		$('.msg_wrap').show();
		$('.msg_box').show();
		$('.msg_box').show();
	});
	
    //$('textarea').keypress(
	//$('[id*=Button2]').click(function(e){
	//    //function(e){
	//    //if (e.keyCode == 13) {
	//    //    e.preventDefault();
	//    var msg = $(this).val();
	//    $(this).val('');
	//    if(msg!='')
	//        $('<div class="msg_b">'+msg+'</div>').insertBefore('.msg_push');
	//    //$('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
	//    $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
	//    document.getElementById("txtboxchat").value = document.getElementById("txtboxchat").value;
			
	//    document.getElementById("#Button1").click();
	//    //}
	
    //});

    //$('[id*=txtboxchat]').keypress(
	$('[id*=txtboxchat]').keypress(
       
    function (e) {
        debugger;
        if (e.keyCode == 13) {
            e.preventDefault();
            var msg = $(this).val();
            $('[id*= btnsavechat]').trigger('click');
            
            $(this).val('');
            if (msg != '')
                $('<div class="msg_b">' + msg + '</div>').insertBefore('.msg_push');
            $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
            return false;
           
        }
    });
	
});

want to show multiple chat at same time if clicked on multiple user,

want to save that data in database on enter key press, my trigger event not firing button click event

how to show chat in chatbox what i sent and what reciver send in different color and according to time means if i firslt send msg,then my chat will show in right side in chatbox in different color and if reciver send msg,then that msg will show to me according to time,like if he sent msg before my ist msg,then his msg comes first on left side in my chatbox.

- Reply
Brando ZWZ
Star

9791 Points

3119 Posts
Re: how to make chat like facebook(multichat at single time) in asp.net c#

May 28, 2018 07:15 AM|Brando ZWZ|LINK
Hi mukesh1,

mukesh1
want to save that data in database on enter key press, my trigger event not firing button click event

According to your codes, I found you set the btnsavechat button's visible attribute to false.

After setting this attribute to false, the asp.net will not generate the button in the page, so your codes couldn't fired the button click event.

I suggest you could add css style "display none " to the button.

More details, you could refer to below codes:
```
           <asp:Button ID="btnsavechat" runat="server"  Style="display:none" Text="Button" OnClick="btnsavechat_Click"   />
```
Besides, I don't see the codes about clicking the multiple user.

Do you mean you want to save the user in the code-behind and show the chart box according to the user name?

If this is your requirement, I suggest you could store the user in the session.

Then in the page load event, you could create multiple girdview according to the session's user list.

Best Regards,

Brando
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›