locked
How to access and perform CRUD to SQL Server Database from a Windows 8 app written in Javascript/HTML through WCF Service?

    Question

  • I have added a new SQL Server Database to the App_Data folder from the sample project below.

    code.msdn.microsoft.com/How-to-consume-JSON-Web-5db0174b#content

    I have added 2 new textbox, 1 button in the HTML for user to enter name, address and a click button to save in database.

    But I don't know how to pass the value entered from the HTML text box, button using WinJS.xhr to the WCF and then perform CRUD from SQL Server database and will display the output in the app.

    default.html

      <input id="txtName" type="text" />
      <input id="txtAddress" type="text" />
      <button id="insertbtn">insert</button>

    JSONWCFService.svc.cs

    public void Insert(int name, int address)
            {
                string connectionString = System.Configuration.ConfigurationManager.
    ConnectionStrings["Database1ConnectionString1"].ConnectionString;
                SqlConnection con = new SqlConnection(connectionString);
    
                string sql = "INSERT INTO Table1(Name, Address) VALUES (@Name, @Address)";
    
                SqlCommand cmd = new SqlCommand(sql, con);
                cmd.Parameters.AddWithValue("@Name", name);
                cmd.Parameters.AddWithValue("@Address", address);
                try
                {
                    con.Open();
                    int numAff = cmd.ExecuteNonQuery();
    
                }
                catch (SqlException exc)
                {
                }
                finally
                {
                    con.Close();
                }
            }

    IAddService.cs

    public interface IAddService
        {
            [OperationContract]
            [WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Wrapped)]
            void Insert(string name, string address);
                
        }


    default.js 

    function insertButtonClick() {
    
            var baseURI2 = "http://localhost:45573/AddService.svc/Insert";
            var name = document.getElementById('txtName').value;
            var address = document.getElementById('txtAddress').value;
    
    WinJS.xhr({
                type: "POST",
                url: baseURI2,
                headers: { "Content-type": "application/json" },
                data: JSON.stringify(txtName+ txtAddress)
            }).then(function complete(request) {
                var resdata = request.responseText;
            }, function error(er) {
                var err = er.statusText;
            })
        }
                  


    Please help  to correct my code or share me some correct sample code (WinJS.xhr and JSONWCFService).

    Thank you very much!

    Friday, August 9, 2013 5:27 PM

Answers

  • Hi Mike,

    For help with the WCF -> SQL server connection you'll be better off posting in a WCF or SQL forum.

    For the Windows Store app -> WCF side, it looks like the problem is that the data you are passing to your service isn't correct. The "data: JSON.stringify(txtName+ txtAddress)" line will just merge the txtName and txtAddress directly so if txtName is "Rob" and txtAddress is "rob@example.com" you will get "Robrob@example.com".

    What you want is something like the following

    data: '{"name":' + txtName+ ',"address":' + txtAddress+ '}' 
    

    so you end up with {"name":"Rob","address":"rob@example.com"}

    You can debug your WCF service to make sure the arguments it receives are what you expect so you know which side of the contract you need to look at.

    --Rob

    • Marked as answer by MikeWhitesand Saturday, August 10, 2013 3:11 PM
    Friday, August 9, 2013 9:48 PM
    Owner

All replies

  • Hi Mike,

    For help with the WCF -> SQL server connection you'll be better off posting in a WCF or SQL forum.

    For the Windows Store app -> WCF side, it looks like the problem is that the data you are passing to your service isn't correct. The "data: JSON.stringify(txtName+ txtAddress)" line will just merge the txtName and txtAddress directly so if txtName is "Rob" and txtAddress is "rob@example.com" you will get "Robrob@example.com".

    What you want is something like the following

    data: '{"name":' + txtName+ ',"address":' + txtAddress+ '}' 
    

    so you end up with {"name":"Rob","address":"rob@example.com"}

    You can debug your WCF service to make sure the arguments it receives are what you expect so you know which side of the contract you need to look at.

    --Rob

    • Marked as answer by MikeWhitesand Saturday, August 10, 2013 3:11 PM
    Friday, August 9, 2013 9:48 PM
    Owner
  • Hi, I've solved my error by using your suggested code! Thanks a lot Rob!
    • Edited by MikeWhitesand Saturday, August 10, 2013 3:14 PM wrong spelling
    Saturday, August 10, 2013 3:12 PM