The Angry Coder

In this post, I will explain you how to have an ajax call on custom validator control and check for the username in the database. This task will include two pages one is the form page (default.aspx in our case) in which we have the custom validator and the other one is the page which we call through AJAX to give us the result (validateUser.aspx). You can also have a web service instead of that page but in my scenario , I am using ASPX page.

So, the form will look like as following.

   1: <form id="form1" runat="server">

   2: <div>

   3: <asp:Panel ID="pnl1" runat="server" DefaultButton="Button1">

   4:     <asp:TextBox ID="TextBox1" runat="server">

   5:     </asp:TextBox>

   6:     <asp:Button ID="Button1" runat="server" Text="Submit" />

   7:     <asp:HiddenField ID="hfOutput" runat="server" />

   8: </asp:Panel>

   9:     <asp:customvalidator ID="Customvalidator1" runat="server" errormessage="Enter Valid User" ControlToValidate="TextBox1" ClientValidationFunction="ValidMe"></asp:customvalidator>    

  10: </div>

  11: </form>

Default.aspx (Form)

Notice, the hiddent field called hfOutput which we will use to store the output of the AJAX call.

Where as the page which we call through AJAX will look like as follows

   1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="validateUser.aspx.cs" Inherits="LearnWebApp.validateUser" %>

validateUser.aspx

In short, we have deleted every thing from this page except page directive. Now if we call this page we will see the simple output without having any HTML tag. we did it because we want to get rid from all the html tags so that we can have a neat and clean output at the time we call this page from Javascript (AJAX). What we want this page to return us is either "True" or "False". If you look at the code behind file of this page you will have a good idea of what we actually upto. Here is the code for that.

   1: protected void Page_Load(object sender, EventArgs e)

   2:         {

   3:             // We can also use a database call here ... right now we are compairing string.

   4:             if (Request.QueryString["username"] == "username")

   5:             {

   6:                 Response.Write("true");

   7:             }

   8:             else 

   9:             {

  10:                 Response.Write("false");

  11:             }

  12:         }

validateUser.aspx.cs

As it is there on comments, here we are only comparing string. You can have a database call and return the result accordingly.

To call the validateUser.aspx from validMe function which we have defined in ClientValidationFunction property of custom validator, we need to write the following javascript on default.aspx

   1: <script type="text/javascript">

   2:         var ajaxCalled = false;

   3:         

   4:         function ValidMe(source, args) {

   5:            callPage(args.Value)

   6:            while (document.getElementById("hfOutput").value != ""){

   7:                 if (document.getElementById("hfOutput").value == "true") {

   8:                     args.IsValid = true;

   9:                 }

  10:                 else {

  11:                     args.IsValid = false;

  12:                 }

  13:                 document.getElementById("hfOutput").value = "";

  14:                 return;

  15:             }

  16:         }

  17:  

  18:         function callPage(strName) {

  19:             var rnd = Math.random() * 1000000;

  20:  

  21:             if (window.XMLHttpRequest) { // Mozilla, Safari, IE7...

  22:                 request = new XMLHttpRequest();

  23:             } else if (window.ActiveXObject) { // IE6 and older

  24:                 request = new ActiveXObject("Microsoft.XMLHTTP");

  25:             }

  26:             var url = 'validateUser.aspx?username=' + strName + '&R=' + rnd;

  27:             request.open("GET", url, true);

  28:             request.onreadystatechange = SetPage;

  29:             request.send(null);

  30:             

  31:         }

  32:  

  33:  

  34:         function SetPage() {

  35:             if (request.readyState == 4) {

  36:                 var objHf = document.getElementById("hfOutput");

  37:                 if (request.status == 200) {

  38:                     if (objHf) {

  39:                         objHf.value = request.responseText;

  40:                     }

  41:                 }

  42:             }

  43:             

  44:         }

  45:     </script>

Let me describe what we have done here, I am calling CallPage function from ValidMe which will call from the asp.net validation mechanism. CallPage function is an AJAX call which will call validateUser.aspx and SetPage function will be called once the AJAX call is finish and we have output ready to use.

And on that SetPage function we are setting the Hidden field  called hfOutput to get used by ValidMe function.

That's it ..... :) . You can also download the complete project give below.

Membership API is yet another enhancement from asp.net team. In this post, I will guide you through the configuring of Membership API to the enhanced usage.

So, to get started let me clear one more confusion which most of people have in there mind

They think that Membership API does not use any database behind and asp.net runtime engine perform some miracle at the back end  and all the user information is stored somewhere which is known by runtime engine.

 

That is wrong ..... big WRONG ....

By default, asp.net uses SQL Server as the back end of Membership API. If you have planned to use it, before doing any thing you need to implement the schema of Membership API to your database.

Step 1 (Implement Schema & Configure Database):

To do that, you need to use aspnet_regsql. which can be accessed by the instruction give below.

• Go to X:\\WINDOWS\\Microsoft.NET\\Framework\\v2.0.50727 (version of dotnet framework can be vary but it should be at least 2.0)
• Find and execute aspnet_regsql which will appear following screen.

• Once you click next, you will be asked to "Configure SQL Server for application services" or "Remove application services information from existing database". You need to select the first one.
• Select the appropriate database, click next and you are done with the database stuff.

Step 2 (Configure Asp.net Application):

In this step we will configure our existing or new asp.net application to user asp.net membership API.

Please bear in mind that Asp.net Web Application Administration is a very handy and useful tool to check Membership API integration.

Now, to use API you need to specify the connection string of the database which we have configured with aspnet_regsql.

• Add the following connection string in web.config

   1: <add name="ConnectionString" connectionString="Data Source=SAMHEAVEN;Initial Catalog=Northwind;User Id=sa;Password=usam;"

   2:      providerName="System.Data.SqlClient" />

• Specify membership and role configuration under system.web of web.config.

   1: <roleManager enabled="true">

   2:    <providers>

   3:      <clear/>

   4:      <add name="AspnetSqlRoleProvider" applicationName="/AppName" connectionStringName="ConnectionString" type="System.Web.Security.SqlRoleProvider"/>

   5:    </providers>

   6:  </roleManager>

   7:  <membership>

   8:    <providers>

   9:      <clear/>

  10:      <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" connectionStringName="ConnectionString" enablePasswordRetrieval="true" enablePasswordReset="true" requiresQuestionAndAnswer="false" applicationName="/DanyTech" requiresUniqueEmail="true" passwordFormat="Clear" maxInvalidPasswordAttempts="5" minRequiredPasswordLength="4" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10" passwordStrengthRegularExpression=""/>

  11:    </providers>

  12:  </membership>

• Finally, you need to set authentication type.

   1: <authentication mode="Forms" />

To be descriptive, we have specified settings for two basic parts of Membership API. which is using Connection String called "connectionString" which we have created in the first step.

AspNetSqlMembershipProvider and  AspnetSqlRoleProvider have an attribute called applicationName which is really important. All the information of the Membership API will stored in the database against the applicationName specified here.

Where as, AspNetSqlMembershipProvider have a list of settings. Click here to get the complete list of Membership Provider settings.

Now the configuration stuff is complete. You can check is every thing running fine by clicking on the Asp.net Configuration Icon give right above the solution explorer.

Go to the security tab and check you can create some users and roles (at least administrator, user) . If not then make sure you have not skipped any step.

Here is the quick code of downloading the zip file from asp.net (vb.net)

   1: Dim _strBeingViewedName As String = "MyZip"

   2: Response.ContentType = "application/x-zip-compressed"

   3: Response.AppendHeader("Content-Disposition", "attachment; filename=" + _strBeingViewedName + ".zip")

   4: Response.TransmitFile("..\\zipPath\\" & _strBeingViewedName + ".zip") 'Full Path of the zip file

   5: Response.End()

public class EmailFilter : Stream{private string _path;private Stream _response;public EmailFilter(Stream response, string path){_response = response;_path = path;}

public override int Read(byte[] buffer, int offset, int count){return _response.Read(buffer, offset, count);}

public override void Write(byte[] buffer, int offset, int count){}} 

public override void Write(byte[] buffer, int offset, int count){string html = System.Text.Encoding.UTF8.GetString(buffer);string emailPattern = @"\\w+([-+.']\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*";

Regex objRegex = new Regex(emailPattern);MatchCollection objCol = objRegex.Matches(html);

foreach (Match m in objCol){string email = m.Value;Font objFont = new Font("Arial", 12, FontStyle.Bold);int width = (int) getTextWidth(email, objFont);Bitmap objBitmap = new Bitmap(width, 20);Graphics objGraphics = Graphics.FromImage(objBitmap);objGraphics.FillRectangle(Brushes.White, new Rectangle(0, 0, width, 20)); //getting white bgobjGraphics.DrawString(email, objFont, Brushes.Black, new Point(0, 0));string relpath = "images/" + Guid.NewGuid().ToString() + ".jpg";string saveFileName = _path + relpath;objBitmap.Save(saveFileName,System.Drawing.Imaging.ImageFormat.Jpeg);objGraphics.Dispose();objBitmap.Dispose();string imgMarkup = "<img src='" + relpath + "'/>";html = html.Replace(email, imgMarkup);}buffer = System.Text.Encoding.UTF8.GetBytes(html);_response.Write(buffer, offset, count);}protected float getTextWidth(string strText, Font f){float width = 0;Bitmap objBitmap = new Bitmap(1, 1);Graphics objGraphics = Graphics.FromImage(objBitmap);try{width = objGraphics.MeasureString(strText, f).Width;return width;}catch (Exception){return 0;}finally{objBitmap.Dispose();objGraphics.Dispose();}} 

protected void Page_Load(object sender, EventArgs e){Response.Filter = new EmailFilter(Response.Filter, Server.MapPath("/").ToString());}

<div>aghausman@gmail.com </br>aghausman@ciberstrategies.com</br>me@aghausman.net</br></div>

public class EmailToImages : IHttpModule{public void Dispose(){

}public void Init(HttpApplication application){HttpContext context = HttpContext.Current;

context.Response.Filter = new EmailFilter(context.Response.Filter, context.Server.MapPath("/"));}}<httpModules><add name="EmailToImage" type="LearnWebApp.EmailToImages, LearnWebApp"/></httpModules> 

protected void Page_Load(object sender, EventArgs e){DirectoryInfo di = new DirectoryInfo(@"C:\\agha"); //Path of folder you want get file/folder fromDirectoryInfo[] objDi = di.GetDirectories();foreach (DirectoryInfo d in objDi){MenuItem objMenuItem = new MenuItem(d.Name);FileInfo[] objfi = d.GetFiles("*.*");foreach (FileInfo f in objfi){objMenuItem.ChildItems.Add(new MenuItem(f.Name));}Menu1.Items.Add(objMenuItem);}}

1. Have Hidden Field in Link button column2. Pass PK in command argument3. Using Data key names.

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load   If Not Request.QueryString("Id") Is Nothing Then 'check if there is nothing in query string       Response.Write("Product Id Is : " + Request.QueryString("Id").ToString()) 'print the id   End IfEnd Sub 

 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"  DataSourceID="SqlDataSource1"><Columns><asp:BoundField DataField="ProductName" HeaderText="ProductName" /><asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" /><asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" /><asp:TemplateField><ItemTemplate><asp:HiddenField ID="hfKey" runat="server" Value='<%#Eval("ProductID") %>' /><asp:LinkButton ID="Edit" CommandName="edt" runat="server">Edit</asp:LinkButton></ItemTemplate></asp:TemplateField></Columns></asp:GridView>  

 Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand    If e.CommandName.ToLower() = "edt"  Then       Dim lb As LinkButton = CType(e.CommandSource, LinkButton) 'getting clicked link button       Dim strKey As String = CType(lb.Parent.FindControl("hfKey"), HiddenField).Value 'getting PK Value       Response.Redirect("EditForm.aspx?id=" + strKey) 'redirecting    End IfEnd Sub  

<asp:TemplateField><ItemTemplate><asp:LinkButton ID="Edit" CommandName="edt" CommandArgument='<%#Eval("ProductId") %>' runat="server">Edit</asp:LinkButton></ItemTemplate></asp:TemplateField>

Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As  System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand    If e.CommandName.ToLower() = "edt" Then       Dim strKey As String = e.CommandArgument  'Getting Pk Value from argument       Response.Redirect("EditForm.aspx?id=" + strKey) 'redirecting    End IfEnd Sub  

Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand    if e.CommandName.ToLower() = "edt" Then       Dim lb As LinkButton = CType(e.CommandSource, LinkButton)       Dim gvRow As GridViewRow = lb.BindingContainer 'Getting current row to get index       Dim strKey As String = GridView1.DataKeys(gvRow.RowIndex)(0).ToString()       Response.Redirect("EditForm.aspx?id=" + strKey) 'redirecting    End IfEnd Sub

TextBox objtext = new TextBox();Page.Form.Controls.Add(objtext);RequiredFieldValidator objReq = new RequiredFieldValidator();objtext.ID = "MyTextBox";objReq.ControlToValidate = objtext.ID;objReq.ErrorMessage = "Please tell us some thing";Page.Form.Controls.Add(objReq);

 <Advertisements>

 <Ad>

  <ImageUrl>/images/expand_blue.jpg</ImageUrl>

  <NavigateUrl>www.aghausman.net</NavigateUrl>

  <AlternateText>expand_blue.jpg</AlternateText>

  <Impressions>1</Impressions>

</Ad>

 <Advertisements>

 

<asp:AdRotator ID="AdRotator1" runat="server" /> 

private void bindFiles()        {            string strPath = "/images/"; //Folder Path            DirectoryInfo di = new DirectoryInfo(Server.MapPath(strPath));            if (di.Exists)            {                string filename = Server.MapPath("/upload/temp.xml");              ��                XmlTextWriter objtw = new XmlTextWriter(filename, System.Text.UTF8Encoding.UTF8);                objtw.WriteStartDocument();                objtw.WriteStartElement("Advertisements");                               FileInfo[] objFile = di.GetFiles("*.jpg"); //you can extract multiple format of images                foreach (FileInfo f in objFile)                {                    objtw.WriteStartElement("Ad");                    objtw.WriteStartElement("ImageUrl");                    objtw.WriteString(strPath + f.Name);                    objtw.WriteEndElement();                                       objtw.WriteStartElement("NavigateUrl");                    objtw.WriteString("#"); // Passing # means no action                    objtw.WriteEndElement();                                              objtw.WriteStartElement("AlternateText");                    objtw.WriteString(f.Name);                    objtw.WriteEndElement();                           objtw.WriteStartElement("Impressions");                    objtw.WriteString("1"); //As we don't know of any priotiry, keep it 1 for every one                    objtw.WriteEndElement();                           objtw.WriteEndElement();                }                       objtw.WriteEndElement();                objtw.WriteEndDocument();                               objtw.Flush();                objtw.Close();            }        } 

if  (!Page.IsPostBack) {bindFiles();AdRotator1.AdvertisementFile = "/upload/temp.xml"; }

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px"CellPadding="3" DataKeyNames="CategoryID" DataSourceID="SqlDataSource1"ForeColor="Black" GridLines="Vertical" Width="100%" onrowcommand="GridView1_RowCommand"><Columns><asp:BoundField DataField="CategoryID" HeaderText="CategoryID"InsertVisible="False" ReadOnly="True" SortExpression="CategoryID" /><asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" /> <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" /><asp:TemplateField><ItemTemplate><asp:LinkButton ID="lbDelet" CommandName="del" runat="server" Text="Delete" OnClientClick="javascript:return confirm('Are you sure you want to delete ?');"></asp:LinkButton></ItemTemplate></asp:TemplateField></Columns><FooterStyle BackColor="#CCCCCC" /><PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" /><SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" /><HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" /><AlternatingRowStyle BackColor="#CCCCCC" /></asp:GridView>