CHAPTER 11 ERROR.

Caden11998 · August 1st, 2012, 05:19 PM

Hello, My name is Caden Ratcliff and i am 13 years old. it is my second time going through "Beginning ASP.NET 4 in visual basic and c#" . my language of choice is visual basic. My father has been doing ASP.NET for years and we are just flabbergasted on this one "Try it out" on page 395 at the end of the try it out, it says that when you complete the form a load bar will do a slide operation till it reaches the top of the form. it did. BUT, the problem is that when the message sent box comes up it does not grow long and shorten again it just stays short. Me and my dad have been racking our brains trying to find something wrong and we just cant see anything wrong. Help fellow nerds!

Imar · August 1st, 2012, 05:40 PM

Hi Caden,

Can you post the code for the page (the markup as well as the code behind)? And which browser are you using?

Hope you like the book, and please say Hi to your dad....:-)

Imar

Caden11998 · August 1st, 2012, 05:51 PM

(markup beggining)

<% If False Then %>
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<% End If%>
<style type="text/css">
.style1
{
width: 100%;
}

.Watermark
{
font-style: italic;
color: Gray;
}
</style>
<script type="text/javascript">
function ValidatePhoneNumbers(Source, args) {
var phoneHome = document.getElementById('<%= PhoneHome.ClientID%>');
var phoneBusiness = document.getElementById('<%= phoneBusiness.ClientID%>')
if (phoneHome.value != '' || phoneBusiness.value != '') {
args.IsValid = true;
}
else {
args.IsValid = false;
}
}
</script>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<div id="TableWrapper">
<table class="style1" runat="server" id="FormTable">
<tr>
<td colspan="3">
This contact form alows you to get in touch with me for reasons conserning the
site. please enter information here.</td>
</tr>
<tr>
<td>
Name</td>
<td>
<asp:TextBox ID="Name" runat="server"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="Name" CssClass="ErrorMessage" ErrorMessage="Enter your name">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
E-mail address</td>
<td>
<asp:TextBox ID="EmailAddress" runat="server"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="EmailAddress" CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="Enter an e-email address">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ControlToValidate="EmailAddress" CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="Enter a valid e-mail address"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*</asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>
E-mail address again</td>
<td>
<asp:TextBox ID="ConfirmEmailAddress" runat="server"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server"
ControlToValidate="ConfirmEmailAddress" CssClass="ErrorMessage"
Display="Dynamic" ErrorMessage="Confirm the e-mail address">*</asp:RequiredFieldValidator>
<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToCompare="EmailAddress" ControlToValidate="ConfirmEmailAddress"
CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="Retype the e-mail address">*</asp:CompareValidator>
</td>
</tr>
<tr>
<td>
Home phone number</td>
<td>
<asp:TextBox ID="PhoneHome" runat="server"></asp:TextBox>
</td>
<td>
<asp:CustomValidator ID="CustomValidator1" runat="server"
ClientValidationFunction="ValidatePhoneNumbers" CssClass="ErrorMessage"
Display="Dynamic" ErrorMessage="Enter you home or business phone nuber">*</asp:CustomValidator>
</td>
</tr>
<tr>
<td>
Business phone nmber</td>
<td>
<asp:TextBox ID="PhoneBusiness" runat="server"></asp:TextBox>
</td>
<td>
 </td>
</tr>
<tr>
<td>
Comments</td>
<td>
<asp:TextBox ID="Comments" runat="server" Height="72px" style="margin-top: 1px"
TextMode="MultiLine" Width="337px"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server"
ControlToValidate="Comments" CssClass="ErrorMessage" Display="Dynamic"
ErrorMessage="Enter a comment">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
 </td>
<td>
<asp:Button ID="SendButton" runat="server" Text="Send" />
</td>
<td>
 </td>
</tr>
<tr>
<td colspan="3">
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
CssClass="ErrorMessage"

HeaderText="Please correct send errors befire you press the send button:" />
</td>
</tr>
</table>
</div>
<asp:Label ID="Message" runat="server" CssClass="Attention" Text="Message Sent" Visible="False"/>
<p runat="server" id="MessageSentPara" visible="false">Thank you for your feedback. We'll get in touch with you if necessary</p>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="PleaseWait">
Please Wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<script type="text/javascript">
$(function () {
$(':input[type=text], textarea').each
(
function () {
var newText = 'Please enter your ' +
$(this).parent().prev().text().toLowerCase().trim( );
$(this).attr('value', newText);
}).one('focus', function () {
this.value = '', this.className = ''
}).addClass('Watermark').css('width', '300px');
$('form').bind('submit', function () {
if (Page_IsValid) {
$('#TableWrapper').slideUp(3000);
}
});
function pageLoad()
{
$('.Attention').animate({ width: '600px' }, 3000).
animate({ width: '100px' }, 3000).fadeOut('slow');
}
});

</script>
(markup ending)

(Code Behind Beggining)

Imports System.IO
Imports System.Net.Mail
Partial Class Controls_ConactForm
Inherits System.Web.UI.UserControl

Protected Sub CustomValidator1_ServerValidate(source As Object, args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles CustomValidator1.ServerValidate
If Not String.IsNullOrEmpty(PhoneHome.Text) Or
Not String.IsNullOrEmpty(PhoneBusiness.Text) Then
args.IsValid = True
Else
args.IsValid = False
End If
End Sub

Protected Sub SendButton_Click(sender As Object, e As System.EventArgs) Handles SendButton.Click
If Page.IsValid Then
Dim fileName As String = Server.MapPath("~/App_Data/ContactForm.txt")
Dim mailbody As String = File.ReadAllText(fileName)

mailbody = mailbody.Replace("##Name##", Name.Text)
mailbody = mailbody.Replace("##Email##", EmailAddress.Text)
mailbody = mailbody.Replace("##HomePhone##", PhoneHome.Text)
mailbody = mailbody.Replace("##BusinessPhone##", PhoneBusiness.Text)
mailbody = mailbody.Replace("##Comments##", Comments.Text)

Dim myMessage As MailMessage = New MailMessage()
myMessage.Subject = "Response from web site"
myMessage.Body = mailbody

myMessage.From = New MailAddress("[email protected]", "Sender Name")
myMessage.To.Add(New MailAddress("[email protected]", "Receiver Name"))

Dim mySmtpClient As SmtpClient = New SmtpClient()
mySmtpClient.Send(myMessage)

Message.Visible = True
MessageSentPara.Visible = True
FormTable.Visible = False
System.Threading.Thread.Sleep(5000)
End If
End Sub
End Class

(Code Behind ending)

By the way: this code is in a user control. there is nothing but a few placeholders and the user control on the page it is providing for.

Caden11998 · August 1st, 2012, 06:00 PM

OMG are you Imar Spannjjaares!? OMG OMG OMG! i cant beillieve im talking to the writer! OMG!

Imar · August 2nd, 2012, 03:24 AM

Well, I am Imar Spaanjaars, not Imar Spannjjaares, but yes, I am the writer of the book ;-)

Anyway, take a look at this:

Code:

$(function () {
  $(':input[type=text], textarea').each
  (
  
  // Other code here
  
  function pageLoad() {
    $('.Attention').animate({ width: '600px' }, 3000).
    animate({ width: '100px' }, 3000).fadeOut('slow');
  }
});

You have nested the pageLoad function *inside* the document ready function for jQuery. It won't be fired found by the AJAX library there and is thus not executed. Move it down a bit and it should work. Here's the full, working piece of code:

Code:

<script type="text/javascript">
  $(function () {
    $(':input[type=text], textarea').each
    (
    function () {
      var newText = 'Please enter your ' +
      $(this).parent().prev().text().toLowerCase().trim();
      $(this).attr('value', newText);
    }).one('focus', function () {
      this.value = '', this.className = ''
    }).addClass('Watermark').css('width', '300px');
    $('form').bind('submit', function () {
      if (Page_IsValid) {
        $('#TableWrapper').slideUp(3000);
      }
    });
  });
  function pageLoad() {
    $('.Attention').animate({ width: '600px' }, 3000).
    animate({ width: '100px' }, 3000).fadeOut('slow');
  }
</script>

Notice how pageLoad is now directly inside the <script> block, and no longer between the curly bracec of jQuery's document ready.

Hope this helps,

Imar

Caden11998 · August 3rd, 2012, 06:44 PM

THANK YOU SO MUCH! IT WORKS PERFECTLY!