WCF Service Java Script Client

In this session we will learn how to consume wcf service into java script application . First we need to create wcf class library project . Inside the interface i defined one method with three parameters.

Here is the method ..


  [OperationContract]
 string InsertStudentRecord(string Name, string Email, string Address, string Mobile);


Here is the code for method  implementation .

  public string InsertStudentRecord(string Name, string Email, string Address, string Mobile)
        {
SqlConnection con = new SqlConnection(@"Data Source=.;Initial Catalog=3TierInWindowsApplication;Integrated Security=True");
 SqlCommand cmd = new SqlCommand("AddNewStudent", con);
  cmd.CommandType = CommandType.StoredProcedure;

 cmd.Parameters.AddWithValue("@Name", Name);
 cmd.Parameters.AddWithValue("@Address", Address);
 cmd.Parameters.AddWithValue("@EmailId", Email);
 cmd.Parameters.AddWithValue("@Mobile", Mobile);

  con.Open();
  cmd.ExecuteNonQuery();
  con.Close();
   return "Success";
        }

Then we need to add another project with .svc file and in this project we need to ad reference from our wcf service . Finally just add a web page .


Here is the code for .svc file .


 <%@ ServiceHost Language="C#" Debug="true" Service="StudentServiceWcf.StudentService"%>



Here is the screen shot of the web page ..
Here is the HTML code ..



<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">
        function CallDataService() {
            var Name = document.getElementById("TxtName").value;
            var Address = document.getElementById("TxtAddress").value;
            var Email = document.getElementById("TxtEmail").value;
            var Mobile = document.getElementById("TxtMobile").value;
         
            tempuri.org.IService1.InsertStudentRecord(Name, Email, Address, Mobile, null, null);
        }

        function ShowMessage() {
            LblMessage.innerHTML = "Data Inserted Successfully";         
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table style="height: 170px; width: 295px">
                <tr>
                    <td>Name:</td>
                    <td>
                        <input type="text" id="TxtName" /></td>
                </tr>
                <tr>
                    <td>Address:</td>
                    <td>
                        <input type="text" id="TxtAddress" /></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td>
                        <input type="text" id="TxtEmail" /></td>
                </tr>
                <tr>
                    <td>Mobile:</td>
                    <td>
                        <input type="text" id="TxtMobile" /></td>
                </tr>
                <tr>
                    <td>
                        <input type="button" id="BtnSendDetails" value="Submit" onclick="CallDataService()" /></td>
                    <td>
                        <label id="LblMessage"></label>
                    </td>
                </tr>
            </table>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
                <Services>
                    <asp:ServiceReference Path="~/StudentService.svc" />
                </Services>
            </asp:ScriptManager>
        </div>
    </form>
</body>
</html>

1 comment:

  1. Excellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep rocking. r语言代写

    ReplyDelete