I am trying to do a multi Client - Server application. After I did some of the basic controls and functions with Windows Forms I thought to add a WebPage to my Client side.
I created a new project and edited it and it works ok, the page is connecting to the server and it receives the messages I send from the web page.
The problem I get when I need to post messages on a textbox on the web page. I searched on some pages here, on the internet and I can't find a good solution for my problem. I alose used the Page.IsPostBack but it didn't work, then I added an UpdatePanel because the page was refreshing when I clicked the buttons but that didn't work either... Now I am out of ideas.
Can anybody suggest how should I do this ? My code behind is C# and I don't know how to parse these details to JavaScript or jQuery, so any of you have some details on how to that it will also be appreciated.
Thanks in advance.
And also I will post anything needed if there is important for this question.
EDIT (Added code):
public void btnSend_Click(object sender, EventArgs e)
{
if (tbSendMessage.Text.Length > 0)
{
string message = tbSendMessage.Text;
byte[] outStream = Encoding.ASCII.GetBytes(message + "$");
serverStream.Write(outStream, 0, outStream.Length);
serverStream.Flush();
tbSendMessage.Text = string.Empty;
}
}
private void getMessage()
{
while (true)
{
try
{
serverStream = clientSocket.GetStream();
int buffSize = 0;
byte[] inStream = new byte[70000];
buffSize = clientSocket.ReceiveBufferSize;
serverStream.Read(inStream, 0, buffSize);
string returndata = Encoding.ASCII.GetString(inStream);
//tbReceivedMessages.Text += returndata + "\n";
ShowMessage(returndata);
}
catch (Exception ex)
{
ShowAlert("Connection lost.\n" + ex.Message);
//ShowMessage("Conexiunea cu serverul s-a pierdut.\n" );
serverStream.Close();
return;
}
}
}
private void ShowMessage(string message)
{
sb.AppendLine(message);
tbReceivedMessages.Text += sb;
}
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<h2><%: Title %></h2>
<p>
<asp:UpdatePanel ID="UpdatePanelConnect" runat="server">
<ContentTemplate>
<asp:Label ID="lblUsername" runat="server" Text="Enter username:"></asp:Label>
<asp:TextBox ID="tbUsername" runat="server"></asp:TextBox>
<asp:Button ID="btnConnect" runat="server" OnClick="btnConnect_Click" Text="Connect" />
</ContentTemplate>
</asp:UpdatePanel>
</p>
<p> </p>
<p>
<asp:UpdatePanel ID="UpdatePanelConnected" runat="server">
<ContentTemplate>
<asp:TextBox
ID="tbReceivedMessages"
runat="server"
Height="250px"
TextMode="MultiLine"
Width="250px"
MaxLength="2000000"
ReadOnly="True"></asp:TextBox>
</p>
<p> </p>
<p>
<asp:TextBox ID="tbSendMessage" runat="server"></asp:TextBox>
<asp:Button ID="btnSend" runat="server" OnClick="btnSend_Click" Text="Send" />
</ContentTemplate>
</asp:UpdatePanel>
</p>
</asp:Content>
If you want two server controls to communicate each other via Ajax, you will need to place them in same UpdatePanel.
FYI: If you are new to ASP.Net Web Form, do not use UpdatePanel yet. Instead, make it work with regular post back.
<asp:UpdatePanel ID="UpdatePanelConnect" runat="server">
<ContentTemplate>
<asp:Label ID="lblUsername" runat="server" Text="Enter username:"></asp:Label>
<asp:TextBox ID="tbUsername" runat="server"></asp:TextBox>
<asp:Button ID="btnConnect" runat="server" OnClick="btnConnect_Click" Text="Connect" />
<asp:TextBox
ID="tbReceivedMessages"
runat="server"
Height="250px"
TextMode="MultiLine"
Width="250px"
MaxLength="2000000"
ReadOnly="True"></asp:TextBox>
</p>
<p> </p>
<p>
<asp:TextBox ID="tbSendMessage" runat="server"></asp:TextBox>
<asp:Button ID="btnSend" runat="server" OnClick="btnSend_Click" Text="Send" />
</ContentTemplate>
</asp:UpdatePanel>
public void btnSend_Click(object sender, EventArgs e)
{
if (tbSendMessage.Text.Length > 0)
{
string message = tbSendMessage.Text;
// This code won't work.
/*byte[] outStream = Encoding.ASCII.GetBytes(message + "$");
serverStream.Write(outStream, 0, outStream.Length);
serverStream.Flush();
tbSendMessage.Text = string.Empty;*/
}
}
Related
currently i'm trying to upload an image via a FileUpload and store it in a database. My problem is that when i click the upload-button, i always get a System.NullReferenceException when trying to upload.
Now i know that there are issues with asp-FileUploads inside an UpdatePanel - so i set the upload-button as an PostBackTrigger which causes a full postback - but it's still not working.
Thats what i got so far:
<asp:UpdatePanel ID="Update_woundpic" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="woundpic_upload" />
</Triggers>
<ContentTemplate>
<div class="col-md-3">
<h3 class="label2">Upload
<small class="text-muted">maximal 5MB</small>
</h3>
<asp:FileUpload ID="uploadWoundImage" runat="server" />
<br />
<asp:LinkButton ID="woundpic_upload" runat="server" OnClick="btn_Upload_Click" CssClass="btn3d btn btn-default btn-lg"><span aria-hidden="true" class="glyphicon glyphicon-upload"></span> Hochladen</asp:LinkButton>
<asp:Label ID="lbl_success" runat="server" Text="Upload erfolgreich!" CssClass="uploadSuccess" Visible="False"></asp:Label>
<asp:Label ID="lbl_error" runat="server" Text="Upload nicht erfolgreich!" CssClass="uploadFailure" Visible="False"></asp:Label>
<br />
<br />
</div>
</ContentTemplate>
</asp:UpdatePanel>
And this is my method to upload the image / file:
protected void btn_Upload_Click(object sender, EventArgs e)
{
byte[] imgByte;
using(BinaryReader reader = new BinaryReader(uploadWoundImage.PostedFile.InputStream))
{
imgByte = reader.ReadBytes(uploadWoundImage.PostedFile.ContentLength);
}
DateTime imageUpload = DateTime.Now;
string imageFormat = uploadWoundImage.PostedFile.ContentType;
string imageName = Path.GetFileName(uploadWoundImage.PostedFile.FileName);
_db.SaveWoundImage(imgByte, imageFormat, imageName, imageUpload);
}
Now, if i click the button the line
using(BinaryReader reader = new BinaryReader(uploadWoundImage.PostedFile.InputStream))
throws the System.NullReferenceException, so i don't know why the file isn't found even with a full postback.
Thanks for any help!
I am using Ajax with asp.net C#. What I am trying to do is, on click of a link, a div should appear. A div contains file upload controls and a button named 'Upload Files'. When upload files button is clicked, it is checking if any of the file upload controls has files. If yes, it uploads files to some directory and updates a label to show how many files are uploaded 0 or more. Here is the screenshot to explain:
Here's the code snippet, I am using Ajax with asp.net C#
<div class="form-group row">
<asp:UpdatePanel runat="server" id="UpdatePanel1" updatemode="Conditional">
<ContentTemplate>
<div class="col-xs-5">
<% if (Session["MemberID"]!= null)
{%>
<asp:LinkButton ID="insertMore" runat="server" OnClick="insertMoreclicked">(Insert More Attachments)</asp:LinkButton>
<%} %>
</div><br />
<div id="moreUploadsDiv" runat="server" visible="false">
<br />
<asp:FileUpload ID="moreUpload1" runat="server" />
<asp:FileUpload ID="moreUpload2" runat="server" />
<asp:FileUpload ID="moreUpload3" runat="server" />
<asp:FileUpload ID="moreUpload4" runat="server" />
<asp:Button ID="uploadMoreFilesBtn" runat="server" Text="Upload" OnClick ="uploadMoreClicked" CausesValidation="false" />
<br />
<asp:Label ID="uploadInfoLbl" runat="server" Text=""></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
Here's the code behind file event for button:
protected void uploadMoreClicked(object sender, EventArgs e)
{
int countFiles = 0;
if (moreUpload1.HasFile)
{
moreUpload1.PostedFile.SaveAs(Server.MapPath("/Upload/") + moreUpload1.FileName);
string fn2 = moreUpload1.FileName;
bool status2 = blReg.insertFiles(fn2, FileID);
countFiles++;
}
if (moreUpload2.HasFile)
{
moreUpload2.PostedFile.SaveAs(Server.MapPath("/Upload/") + moreUpload2.FileName);
string fn2 = moreUpload2.FileName;
bool status2 = blReg.insertFiles(fn2, FileID);
countFiles++;
}
if (moreUpload3.HasFile)
{
moreUpload3.PostedFile.SaveAs(Server.MapPath("/Upload/") + moreUpload3.FileName);
string fn2 = moreUpload3.FileName;
bool status2 = blReg.insertFiles(fn2, FileID);
countFiles++;
}
if (moreUpload4.HasFile)
{
moreUpload4.PostedFile.SaveAs(Server.MapPath("/Upload/") + moreUpload4.FileName);
string fn2 = moreUpload4.FileName;
bool status2 = blReg.insertFiles(fn2, FileID);
countFiles++;
}
uploadInfoLbl.Text = countFiles + " file(s) uploaded<br/>";
}
But button click event doesn't work. Please suggest me what i am doing wrong. Thanks in Advance!
Scenario: I have a modal-style div that will be shown when the user clicks a button. At the time the div is shown, I need to get some data from the back-end to fill in some fields. Additionally, I'd like to use the jQuery method I use for all my modal windows (fades in the modal div, displays a background div as well as enabling the use of ESC key or "click offs" to close the modal).
It looks something like this:
<asp:ScriptManager ID="sc" runat="server" />
<asp:UpdatePanel ID="updForm" runat="server">
<ContentTemplate>
<h4>Testing jQuery calls combined with code behind actions</h4>
<div class="pad-content">
<asp:LinkButton ID="lnkShowIt" runat="server" OnClick="lnkShowIt_Click" Text="Load Form" OnClientClick="showForm()" />
<asp:Panel ID="pnlPopup" ClientIDMode="Static" runat="server" CssClass="box-modal" style="width:500px;display:none;z-index:1001">
<div class="header">Edit Estimate X</div>
<div class="content">
<div class="window">
<h5>Test Form</h5>
<asp:TextBox ID="tbxTime" runat="server" />
<br />
<asp:TextBox ID="tbxText" runat="server" Width="150px" />
<br />
<asp:LinkButton ID="lnkValidate" runat="server" CssClass="link-button-blue" Text="Validate" OnClick="lnkValidate_Click" />
</div>
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div id="backgroundPopup"></div>
So ... lnkShowIt calls both the jQuery (which will show pnlPopup) as well as the C# (which will populate tbxTime).
jQuery method actually just calls another method from a common js library I have that does the modal window stuff - I don't think that actual code is the problem but here is the simple function used for this page:
<script type="text/javascript" language="javascript">
function showForm() {
loadPopup('#pnlPopup');
}
</script>
Code behind methods look like this:
protected void lnkShowIt_Click(object sender, EventArgs e)
{
tbxTime.Text = System.DateTime.Now.Second.ToString();
}
protected void lnkValidate_Click(object sender, EventArgs e)
{
if (tbxTime.Text == tbxText.Text)
{
Response.Redirect("DynamicBoxesWithJQuery.aspx?mode=success");
}
else
{
tbxText.Style["border"] = "1px solid red";
}
}
I'm able to generate some level of success by doing the following but it seems like just a major hack and I have to assume there's a better approach:
protected void lnkShowIt_Click(object sender, EventArgs e)
{
tbxTime.Text = System.DateTime.Now.Second.ToString();
ScriptManager.RegisterStartupScript(this, this.GetType(), "OpenEditor", "<script type='text/javascript'>loadPopup('#pnlPopup');</script>", false);
}
protected void lnkValidate_Click(object sender, EventArgs e)
{
if (tbxTime.Text == tbxText.Text)
{
Response.Redirect("DynamicBoxesWithJQuery.aspx?mode=success");
}
else
{
tbxText.Style["border"] = "1px solid red";
ScriptManager.RegisterStartupScript(this, this.GetType(), "OpenEditor", "<script type='text/javascript'>loadPopup('#pnlPopup');</script>", false);
}
}
It seems like it should be easier than this, but the way the UpdatePanel keeps redrawing (and thus resetting the display:none on pnlPopup) is really causing me fits.
Thanks in advance
Solution I just found: putting the LinkButton in its own UpdatePanel and then the form in its own UpdatePanel and making sure the div that is the actual popup box is not in an UpdatePanel at all.
<h4>Testing jQuery calls combined with code behind actions</h4>
<div class="pad-content">
<asp:UpdatePanel ID="updLink" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnkShowIt" runat="server" OnClick="lnkShowIt_Click" Text="Load Form" OnClientClick="showForm()" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlPopup" ClientIDMode="Static" runat="server" CssClass="box-modal" style="width:500px;display:none;z-index:1001">
<div class="header">Edit Estimate X</div>
<div class="content">
<asp:UpdatePanel ID="updForm" runat="server">
<ContentTemplate>
<div class="window"style="min-width:500px;">
<h5>Here is a Test Form</h5>
<label>Time:</label>
<asp:TextBox ID="tbxTime" runat="server" />
<br />
<asp:Label ID="lblText" AssociatedControlID="tbxText" runat="server" ViewStateMode="Disabled">Text:</asp:Label>
<asp:TextBox ID="tbxText" runat="server" Width="150px" />
<br />
<asp:LinkButton ID="lnkValidate" runat="server" CssClass="link-button-blue" Text="Validate" OnClick="lnkValidate_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Panel>
</div>
Seems to do the trick without any Script Registers from the codebehind
Here's the problem:
I have a control (A) that I register/load into another control (B). then I register control (B) into a normal .aspx page
I put a 'Script Manager' in this page and I use ajax 'Update Panel' in both controls but only the main components of the control (B) works (excluding the control (A) which I registered into control (B)) .. so basically the ajax part works for the component that's loaded into a page. if it's loaded into another control it won't work!
I wanted to make sure that it's not a silly mistake in my code so I copied the code of the control that's not working and added it to a normal page and it worked!
so what do you think the problem is or can I do about it !?
EDIT Some Code
Control (B) :
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Itinerary.ascx.cs" Inherits="OTV.controls.Itinerary.ItineraryControl" %>
<p>
Add new itinerary:</p>
<p>
<br />
</p>
<div id="newItinerary_div" runat="server">
<p>
Title:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
Description:
<asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine"></asp:TextBox>
Visible:
<asp:CheckBox ID="CheckBox1" runat="server" />
<div id="itineraryDays_div" runat="server">
<h4>Itinerary days:</h4>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:PlaceHolder ID="DaysHolder" runat="server"></asp:PlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="addMoreDay_btn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="addMoreDay_btn" runat="server" Text="Add one more day"
onclick="addMoreDay_btn_Click" />
This button dynamically create itineraryDay controller to the div
</div>
</div>
</div>
Control (B) - Code Behind File:
public partial class ItineraryControl: System.Web.UI.UserControl
{
static int DaysCount = 1;
static List<Control> _daysList;
protected void addMoreDay_btn_Click(object sender, EventArgs e)
{
}
public static Control GetPostBackControl(Page thePage)
{
Control myControl = null;
string ctrlName = thePage.Request.Params.Get("__EVENTTARGET");
if (((ctrlName != null) & (ctrlName != string.Empty)))
{
myControl = thePage.FindControl(ctrlName);
}
else
{
foreach (string Item in thePage.Request.Form)
{
Control c = thePage.FindControl(Item);
if (((c) is System.Web.UI.WebControls.Button))
{
myControl = c;
}
}
}
return myControl;
}
protected void Page_Init(object sender, EventArgs e)
{
Control myControl = GetPostBackControl(this.Page);
if ((myControl != null))
{
if ((myControl.ClientID.ToString() == "addMoreDay_btn"))
{
DaysCount = DaysCount + 1;
}
}
_daysList = new List<Control>();
for (int i = 1; i <= DaysCount; i++)
{
Control OneMoreDay = LoadControl("~/controls/Itinerary/ItineraryDayAdd.ascx");
OneMoreDay.ID = "dayNo" + i;
(OneMoreDay.FindControl("DayNum_TxtBx") as TextBox).Text = i.ToString();
DaysHolder.Controls.Add(OneMoreDay);
_daysList.Add(OneMoreDay);
}
}
}
}
Control (A) :
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ItineraryDayAdd.ascx.cs" Inherits="OnlineTravelAgency1.controls.Itinerary.ItineraryDayAdd" %>
<p>
Day#:
<asp:TextBox ID="DayNum_TxtBx" runat="server"></asp:TextBox>
</p>
<p>
Title:
<asp:TextBox ID="Title_TxtBx" runat="server"></asp:TextBox>
</p>
<p>
Day:
<asp:DropDownList ID="Days_DrpDwnLst" runat="server">
<asp:ListItem Value="0">Saturday</asp:ListItem>
<asp:ListItem Value="1">Sunday</asp:ListItem>
<asp:ListItem Value="2">Monday</asp:ListItem>
<asp:ListItem Value="3">Tuesday</asp:ListItem>
<asp:ListItem Value="4">Wednesday</asp:ListItem>
<asp:ListItem Value="5">Thursday</asp:ListItem>
<asp:ListItem Value="6">Friday</asp:ListItem>
</asp:DropDownList>
</p>
<p>
Description:
<asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine"></asp:TextBox>
</p>
...This is my whole code! I'm really stuck and I didn't want to overwhelm you with my code but I can't help you enough to understand my problem
I have a recaptchavalidator, which is inside an updatepanel:
<asp:updatepanel runat=server id=updatepanel1>
<cc1:recaptchacontrol runat=server publickey=.. privatekey=.. id=recaptchavalidator1/>
<asp:button runat=server id=button1/>
</updatepanel>
I am sure that some of you can guess what happens. For those of you who haven't experienced this before, the recaptchacontrol disappears! I have tried redirecting to the same page if the recaptchacontrol returns a false validation, but this has resulted in complex codebehind, and loss of veiwstate.
Is there a simple solution to this? I have looked over some articles on the web, but they seem to be complex and not well structured. I need to change the content of the updatepanel, so keep this in mind.
Thank you for your help.
I got this to work nicely with just one updatepanel.
<recaptcha:RecaptchaControl Theme="white" ID="recaptcha" runat="server" PrivateKey="your_pub_key "
PublicKey="your_pub_key" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label Visible="false" ID="RecaptchaResult" runat="server" />
<asp:Button ID="RecaptchaButton" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</ContentTemplate>
</asp:UpdatePanel>
The key is to have your updatepanel set to conditional around your post button, so that you manually call the update to reload the recaptcha control from the server side.
Then, you call .update() on your panel after you've asked for the reload();
protected void btnSubmit_Click(object sender, EventArgs e)
{
recaptcha.Validate();
if (recaptcha.IsValid)
{
RecaptchaResult.Text = "Success";
RecaptchaResult.Text = "You got it!";
RecaptchaResult.ForeColor = System.Drawing.Color.Green;
RecaptchaResult.Visible = true;
ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "recaptcha", "recaptcha.reload();", true);
UpdatePanel1.Update();
}
else
{
RecaptchaResult.Text = this.recaptcha.ErrorMessage;
RecaptchaResult.ForeColor = System.Drawing.Color.Red;
RecaptchaResult.Visible = true;
ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "recaptcha", "recaptcha.reload();", true);
UpdatePanel1.Update();
}
}
Here is the answer that I have tried and is working:
ASP.Net, disappearing Recaptcha, UpdatePanels and Partial PostBacks: Fixed once and for all
Basically it involves creating a hidden div and using jquery to re-render the html. Also the blog post gives a nice little breakdown of the typical solutions (e.g., using RegisterClientScriptBlock with a simple reload) and why they fail.
<div runat="server" id="pbTarget" visible="false"></div>
<recaptcha:RecaptchaControl ID="recaptcha" runat="server" Theme="clean" />
code behind:
protected void btnSubmit_Click(object sender, EventArgs e)
{
recaptcha.Validate();
if (!Page.IsValid || !recaptcha.IsValid)
{
pbTarget.Visible = true;
ScriptManager.RegisterClientScriptBlock(
recaptcha,
recaptcha.GetType(),
"recaptcha",
"Recaptcha._init_options(RecaptchaOptions);"
+ "if ( RecaptchaOptions && \"custom\" == RecaptchaOptions.theme )"
+ "{"
+ " if ( RecaptchaOptions.custom_theme_widget )"
+ " {"
+ " Recaptcha.widget = Recaptcha.$(RecaptchaOptions.custom_theme_widget);"
+ " Recaptcha.challenge_callback();"
+ " }"
+ "} else {"
+ " if ( Recaptcha.widget == null || !document.getElementById(\"recaptcha_widget_div\") )"
+ " {"
+ " jQuery(\"#" + pbTarget.ClientID + "\").html('<div id=\"recaptcha_widget_div\" style=\"display:none\"></div>');"
+ " Recaptcha.widget = Recaptcha.$(\"recaptcha_widget_div\");"
+ " }"
+ " Recaptcha.reload();"
+ " Recaptcha.challenge_callback();"
+ "}",
true
);
return;
}
else
{
//normal page processing here...
Try this.
<asp:UpdatePanel ID="ContactUpdatePanel" runat="server">
<ContentTemplate>
<p>
<label>Name:</label>
<asp:TextBox ID="txtName" runat="server"
CssClass="textbox">
</asp:TextBox>
</p>
<p>
<label>Address</label>
<asp:TextBox ID="txtAddress" runat="server"
CssClass="textbox"
Height="50px"
TextMode="MultiLine">
</asp:TextBox>
</p>
<p>
<recaptcha:RecaptchaControl ID="recaptcha" runat="server"
PublicKey="public key"
PrivateKey="private key"
Theme="white" />
</p>
<p>
<asp:UpdatePanel ID="UpdatePanel2" runat="server"
ChildrenAsTriggers="false"
UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="ErrorLabel" runat="server"
EnableViewState="false"
ForeColor="Red" />
</ContentTemplate>
</asp:UpdatePanel>
<p>
</p>
<p>
<asp:Button ID="SubmitButton" runat="server"
onclick="SubmitButton_Click" Text="Submit" />
</p>
</ContentTemplate>
</asp:UpdatePanel>
Code-behind
protected void SubmitButton_Click(object sender, EventArgs e)
{
try
{
this.recaptcha.Validate();
if (recaptcha.IsValid)
{
//valid form. post it
}
else
{
ErrorLabel.Text = "Invalid Captcha. Please re-enter the words.";
ScriptManager.RegisterClientScriptBlock(
this.Page,
this.Page.GetType(),
"mykey",
"Recaptcha.reload();",
true);
UpdatePanel2.Update();
}
}
catch (Exception exception)
{
Elmah.ErrorSignal.FromCurrentContext().Raise(exception);
}
}