How to Solve 404 Not Found When Calling WCF from Javascript using script manager

When you and Service reference in the script manager to point to .svc file, and then calling it from javascript, sometimes it gives you script error in the page that the service cannot be found. To solve this issue, follow these steps (Considering you have IIS 7.0):

1. Make sure that .Net framework 3.0 or later is installed on the server. You can find it here.
2. Register the service model to the IIS by doing the following:
• Open CMD.exe
• Navigate to: "C:\Windows\Microsoft.NET\Framework\v3.0\Windows Communication Foundation"
• Run "ServiceModelReg.exe -r"
• then, if you have x64 Windows, Navigate to: "C:\Windows\Microsoft.NET\Framework64\v3.0\Windows Communication Foundation"
• then run: "ServiceModelReg.exe -r"
3. Open IIS. You can use Run->inetmgr.
4. Click on the site that hosts the .svc file, and browse the Features view in the IIS. Then, open the Handler Mappings.
5. In the right Panel (Actions), Choose Add Script Map.
6. A window will appear to add new script map, and fill the following parameters:

Request Path : *.svc

Executable : %SystemRoot%\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi.dll

Name: svc-ISAPI-2.0

7. Click Add Script Map again if you have x64 Windows and use the following parameters:

Request Path : *.svc

Executable : %SystemRoot%\Microsoft.NET\Framework64\v2.0.50727\aspnet_isapi.dll

Name: svc-ISAPI-2.0-64

8. Then browse the Service using your internet browser : http://yourURL/...../YourService.svc/js, if you can see the scripts generated by Microsoft Ajax then you are done. Otherwise, you should allow anonymouse in your web site.

That's it and Enjoy :).

JQuery with ASP.NET

In the past few days, I was working in development some components using JQuery. I was really impressed with the functionalities and performance as I am really a big fan of javascript.

You can take a look on JQuery and download the library from: http://jquery.com/.

Now, I’m going to give a sample about how to use JQuery ASP.NET to have an AJAX page.

1.Download the library from http://jquery.com/.

2.Create New ASP.Net web application using Microsoft Visual Studio.

3.Add new User Control in your project.

4.Add the downloaded file of JQuery to your project.

5. drag and drop the JQuery .js file into your control or just add the following line to your ascx:

<script src="jquery-1.3.1.min.js" type="text/javascript"></script>

Now we are going to start the most interesting part.

Consider a case that you want to have an expand/collapse button, when user clicks on it, it shows a form to let the user enter a data, if it is already expanded, then collapse it. Also you need to expand or collapse with animation (slide the form that will appear), that is, not just appears suddenly to the user.

Consider the following:

   1: <div>

   2:         <div>

   3:             <!--The button to expand or collapse-->

   4:             <a href="javascript:;" onclick="ExpandCollapse(this,'expandcpllapse')">+</a> Show

   5:             Panel

   6:         </div>

   7:         <!--The div that needs to be shown or hidden based on expand or collapse-->

   8:         <div id="expandcpllapse" style="display: none">

   9:             <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>

  10:             <asp:TextBox ID="txtName" runat="server"></asp:TextBox>

  11:         </div>

  12:     </div>

and the javascript to expand/collapse

   1: //Represents the current status of the panel to expand/collapse

   2: var status = 'Collapsed';

   3:  

   4: //Expand the form if collapsed. if collapsed, expand it.

   5: function ExpandCollapse(sender, div)

   6: {

   7:     switch (status)

   8:     {

   9:         case 'Collapsed':

  10:             {

  11:                 //Show the div that contains the data. the parameter "0" represents the speed to show it

  12:                 $('#' + div).show("0");

  13:                 //Change the text from "+" to "-"

  14:                 $(sender)[0].innerText = '-';

  15:                 //Change the status to be expanded

  16:                 status = 'Expanded';

  17:             }

  18:             break;

  19:         case 'Expanded':

  20:             {

  21:                 //Hide the div with speed "0"

  22:                 $('#' + div).hide("0");

  23:                 // change the text from "-" to "+"

  24:                 $(sender)[0].innerText = '+';

  25:                 //Change the status to collapsed

  26:                 status = 'Collapsed';

  27:             }

  28:             break;

  29:     }

  30: }

that was a very little from JQuery functionalities and how to use it to reach a better user experience.