Simple Application using Knockout.js, jQuery and ASP.NET MVC 4.0 with WEB API

Posted by: Mahesh Sabnis , on 12/6/2012, in Category ASP.NET MVC
Views: 119420
Abstract: Using ASP.NET MVC, WEB API, jQuery and Knockout.js, it becomes really easy to develop rich, client-side, data-bound web applications. In this article, we will see how the Observable pattern implemented by KO helps us reduce a lot of boiler-plate code that would be required to build same amount of responsiveness in plain JavaScript

In one of the trainings I conducted, I was asked about the use and capabilities of Knockout.js in a MVC 4 application. After showning most of the Knockout + MVC4 capabilities to my client, I decided to write this simple article for all those who are interested in using client side frameworks like Knockout.js and jQuery for application development.

Knockout.js a JavaScript library that can be used to create rich client-side data-bound web applications. The Client-Side data-binding capabilities help implement the MVVM pattern in JavaScript allowing us to build dynamic UI that changes as per user actions without necessarily having to make a server side round trip.

Knockout works well with jQuery and has its own templating engine that uses HTML5 compliant tags for data-binding. However, it can work with other templating engines as well. You can get the further information about knockout.js from www.knockoutjs.com.

In the following article, I have used some features of the knockout.js:

. observable: This is used to define model properties. When these properties are bound with UI and when the value for these properties are updated, automatically the UI elements bound with these properties will be updated with the new value.

E.g. this.EmpName = ko.observable(“Mahesh”); - Here EmpName is the observable property. KO represent an object for the Knockout.js library.

The value of the observable is read as var data= this.EmpNo();

· observableArray: This represents a collection of data elements which required notifications. Typically this is used to bind with the List kind of elements.

E.g this.Employees = ko.observableArray([]);

· applyBindings: This is used to activate knockout for the current HTML document or a specific UI element in HTML document. The parameter for this method is the view-model which is defined in JavaScript. This ViewModel contains the observable, observableArray and various methods.

Various other types of binding are used in this article:

o click: Represents a click event handler added to the UI element so that JavaScript function is called.

o value: This represents the value binding with the UI element’s value property to the property defined into the ViewModel.

o visible: This is used to hide or unhide the UI element based upon the value passed to it’s binding.

o Text: This represent the text value of the parameter passed to the UI element.

 

Creating an Application using MVC 4, WEB API, jQuery and Knockout.js

For the application, ADO.NET EF is used with the SQL server 2012 database and ‘Company’ database with the following table:

USE [Company]

GO

/****** Object: Table [dbo].[EmployeeInfo] Script Date: 11/25/2012 10:10:09 PM ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

SET ANSI_PADDING ON

GO

CREATE TABLE [dbo].[EmployeeInfo](

[EmpNo] [int] IDENTITY(1,1) NOT NULL,

[EmpName] [varchar](50) NOT NULL,

[Salary] [decimal](18, 0) NOT NULL,

[DeptName] [varchar](50) NOT NULL,

[Designation] [varchar](50) NOT NULL,

CONSTRAINT [PK_EmployeeInfo] PRIMARY KEY CLUSTERED

(

[EmpNo] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]

) ON [PRIMARY]

GO

SET ANSI_PADDING OFF

GO

Step 1: Open VS 2012 and create a new MVC 4 application, name it as ‘MVC40_Knockout_App’. Download the knockout.js library from www.knockout.js or use the ‘Manage Nuget Package Manager’ from the context menu of the project by right-clicking on the project and search for Knockout.js.

Step 2: In the project, add the ADO.NET Entity Data Model for the above table. After completing the wizard the model will be displayed as below:

edm

Step 3: Right click on the controller folder and add the new API controller of name ‘EmployeeInfoAPIController’, generate this controller from Entity Framework as below:

api_controller

You will get methods for HTTP GET, POST, PUT and DELETE by default. You can request for these methods using ajax methods provided in jQuery asynchronously.

Step 3: Add a new empty ‘EmployeeController’ into the project. In this controller class, add a new ‘Create’ method which will return the Create view as below:

public ActionResult Create()
{
    return View("Create");
}

Step 4: Add a new Create.cshtml view in the project which is not having any model class. This should be an empty view.

Step 5: Open the ‘Site.css’ inside the ‘Content’ folder and add the following css classes:

.FixedContainer
{
  float:right;
  height: 250px;
  width:500px;
  padding:3px;
   overflow:auto;
}
.FixedContent
{
  height:224px;
   overflow:auto;
}

The above CSS will be used for Div tag which are added inside the Create.cshtml for vertical scrollbar.

Step 6: Refer the following JavaScript libraries in the Create.cshtml:

<head>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/knockout-2.2.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<link href="~/Content/Site.css" rel="stylesheet" />
</head>

Step 7: Add the following HTML inside the view:

<form>
<table>
  <tr>
   <td>
   <!--Bind the TextBoxes in the Table to the observable properties defined into the ViewModel -->
    <table id="tbldml">
     <tr>
      <td>EmpNo</td>
      <td><input type="text" id="txteno disabled="disabled" /></td>
     </tr>
    <tr>
     <td>EmpName</td>
     <td><input type="text" id="txtename /></td>
    </tr>
    <tr>
     <td>Salary</td>
     <td><input type="text" id="txtsal /></td>
    </tr>
    <tr>
     <td>DeptName</td>
     <td><input type="text" id="txtdname /></td>
     </tr>
     <tr>
      <td>Designation</td>
      <td><input type="text" id="txtdesig /></td>
      </tr>
       <tr>
       <!--The click binding has the JavaScirpt methods passed to it-->
        <td><button>Save</button></td>
        <td><button>Update</button></td>
        </tr>
       </table>
      </td>
      <td>
       <div class="FixedContainer">
       <!--If the length of the Employees is greater than 0 then visible the Table-->
        <table style="border: double">
         <thead>
          <tr>
           <td>EmpNo</td>
          <td>EmpName</td>
          <td>Salary</td>
          <td>DeptName</td>
          <td>Designation</td>
          <td></td>
         </tr>
        </thead>
        <!--Iterate through an observableArray using foreach-->
        <tbody>
         <tr style="border: solid">
          <td><span></span></td>
          <td><span></span></td>
          <td><span></span></td>
          <td><span></span></td>
          <td><span></span></td>
          <td><button >Delete</button></td>
         </tr>
        </tbody>
       </table>
      </div>
     </td>
    </tr>
   </table>
  </form>

Now if you run the application and navigate to the Create action, the view will be displayed with Textboxes for Employee information and the Table will have only headings.

Step 8: Before closing body tag define the <script> block where the ViewModel will be defined as below:

<script type="text/javascript">
var EmpViewModel = function () {
//Make the self as 'this' reference
var self = this;
//Declare observable which will be bind with UI
self.EmpNo = ko.observable("0");
self.EmpName = ko.observable("");
self.Salary = ko.observable("");
self.DeptName = ko.observable("");
self.Designation = ko.observable("");

//The Object which stored data entered in the observables
var EmpData = {
     EmpNo:self.EmpNo,
     EmpName: self.EmpName,
     Salary: self.Salary,
     DeptName: self.DeptName,
     Designation: self.Designation
};

//Declare an ObservableArray for Storing the JSON Response
self.Employees = ko.observableArray([]);

GetEmployees(); //Call the Function which gets all records using ajax call

//Function to perform POST (insert Employee) operation
self.save = function () {
     //Ajax call to Insert the Employee
     $.ajax({
         type: "POST",
         url: "
http://localhost:50457/api/EmployeeInfoAPI",
         data: ko.toJSON(EmpData), //Convert the Observable Data into JSON
         contentType: "application/json",
         success: function (data)
         {
             alert("Record Added Successfully");
             self.EmpNo(data.EmpNo);
             alert("The New Employee Id :" + self.EmpNo());
             GetEmployees();
         },
         error: function ()
         {
             alert("Failed");
         }
     });
     //Ends Here
};

self.update = function () {
    var url = "
http://localhost:50457/api/EmployeeInfoAPI/" +self.EmpNo();
    alert(url);
    $.ajax({
        type:"PUT",
        url:url,
        data: ko.toJSON(EmpData),
        contentType: "application/json",
        success: function (data)
        {
            alert("Record Updated Successfully");
            GetEmployees();
        },
        error: function (error)
        {
            alert(error.status +"<!----!>"+error.statusText);
        }
    });
};

//Function to perform DELETE Operation
self.deleterec = function (employee) {
    $.ajax({
        type: "DELETE",
        url: "
http://localhost:50457/api/EmployeeInfoAPI/" + employee.EmpNo,
        success: function (data)
        {
            alert("Record Deleted Successfully");
            GetEmployees();//Refresh the Table
        },
        error: function (error)
        {
            alert(error.status + "<--and--> " + error.statusText);
        }
    });
   // alert("Clicked" + employee.EmpNo)
};

//Function to Read All Employees
function GetEmployees() {
     //Ajax Call Get All Employee Records
     $.ajax({
         type: "GET",
         url: "
http://localhost:50457/api/EmployeeInfoAPI",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (data) {
             self.Employees(data); //Put the response in ObservableArray
         },
         error: function (error) {
             alert(error.status + "<--and--> " + error.statusText);
         }
     });
     //Ends Here
}

//Function to Display record to be updated. This will be

//executed when record is selected from the table
self.getselectedemployee = function (employee) {
               self.EmpNo(employee.EmpNo),
               self.EmpName(employee.EmpName),
               self.Salary(employee.Salary),
               self.DeptName(employee.DeptName),
               self.Designation(employee.Designation)
       };


};
ko.applyBindings(new EmpViewModel());
</script>

In the above Script we have defined an observable for the ‘EmployeeInfo’. The observableArray is used to display data inside the Html table. The object ‘EmpData’ is used to store values for observable which are entered by the end-user for performing Insert and Edit operations. This object will be then converted into JSON, using ‘ko.toJSON’ method.

The function ‘GetEmployees’ makes an ajax call to the WEB API and retrieve all employees. Once the call is successful, this response is passed to the observableArray ‘Employees’. The function ‘save’ makes an ajax call to perform POST operation. Likewise methods ‘update’, ‘deleterec’ are used to perform edit and delete operations respectively. The function ‘getselectedemployee’ is used to display the selected employee information so that the Employee information can be updated.

Step 9: Now we need to bind the UI textboxes with observable defined inside ViewModel, the functions defined inside the ViewModel will be bound with the Buttons. For performing data-binding ‘data-bind’ attribute is used. This is introduced in HTML 5. So change the HTML as below: (marked in yellow)

 

<form>
<table>
<tr>
<td>
<!--Bind the TextBoxes in the Table to the observable properties defined into the ViewModel -->
<table id="tbldml">
<tr>
  <td>EmpNo</td>
  <td><input type="text" id="txteno" data-bind="value: $root.EmpNo" disabled="disabled" /></td>
</tr>
<tr>
  <td>EmpName</td>
  <td>
   <input type="text" id="txtename" data-bind="value: $root.EmpName" /></td>
  </tr>
  <tr>
   <td>Salary</td>
   <td>
    <input type="text" id="txtsal" data-bind="value: $root.Salary" /></td>
   </tr>
   <tr>
    <td>DeptName</td>
    <td>
     <input type="text" id="txtdname" data-bind="value: $root.DeptName" /></td>
    </tr>
    <tr>
     <td>Designation</td>
     <td>
       <input type="text" id="txtdesig" data-bind="value: $root.Designation" />
     </td>
    </tr>
    <tr>
    <!--The click binding has the JavaScirpt methods passed to it-->
   <td><button data-bind="click :$root.save">Save</button></td>
   <td><button data-bind="click: $root.update">Update</button></td>
  </tr>
</table>
</td>
<td>
<div class="FixedContainer">
  <!--If the lenght of the Employees is greater than 0 then visible the Table-->
  <table data-bind="visible:  Employees().length>0" style="border: double">
   <thead>
    <tr>
     <td>EmpNo</td>
     <td>EmpName</td>
     <td>Salary</td>
     <td>DeptName</td>
     <td>Designation</td>
     <td></td>
    </tr>
   </thead>
   <!--Iterate through an observableArray using foreach-->
   <tbody data-bind="foreach:  Employees">
    <tr style="border: solid" data-bind="click: $root.getselectedemployee" id="updtr">
     <td><span data-bind="text:  EmpNo"></span></td>
     <td><span data-bind="text:  EmpName"></span></td>
     <td><span data-bind="text: Salary"></span></td>
     <td><span data-bind="text: DeptName"></span></td>
     <td><span data-bind="text: Designation"></span></td>
     <td>
      <button data-bind="click: $root.deleterec">Delete</button>
     </td>
    </tr>
   </tbody>
  </table>
</div>
</td>
</tr>
</table>
</form>

Step 10: Run the application and navigate to the Create action of the Employee controller, the result will be as below:

1. All the Employees are displayed:

res_all_emps

2. Enter data into textboxes and click on save, the entry will be added and the newly added record will be displayed at the bottom of the table as below. (Note: EmpNo is Read-Only field)

res_insert_1

The newly added entry is as below:

res_insert_2

3. Click on the Delete Button and the row will be deleted.

4. Select the row from the table, the details will be displayed into textboxes which can be updated.

Conclusion

Using MVC, WEB API, jQuery and Knockout.js, it is really easy to develop rich, client-side, data-bound web applications. The Observable pattern implemented by KO helps us reduce a lot of boiler-plate code that would be required to build same amount of responsiveness in plain JavaScript.

By using knockout.js and jQuery library, we can build browser compatible, rich Line-of-Business (LOB) applications easily.

Download the entire source code (GitHub)

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Twhyler on Friday, December 14, 2012 8:20 PM
Thanks for the walkthrough. Simple to understand and I finally see how to use knockout
Comment posted by Mahesh Sabnis on Tuesday, December 18, 2012 1:59 AM
Hi Twhyler,

Thanks a lot.
Regards
MAhesh Sabnis
Comment posted by Bot on Wednesday, January 9, 2013 7:55 PM
nice article
Comment posted by Love on Wednesday, January 9, 2013 7:59 PM
Keep up the good work dude :)

I'll stay updated with your posts..
Comment posted by Mahesh Sabnis on Monday, January 28, 2013 4:55 AM
Hi Bot and Love,

Thanks a lot.

Regards
Mahesh Sabnis
Comment posted by Sunny on Tuesday, January 29, 2013 1:16 AM
Can you please Show me the example without using Web API....or do you have any link for the same...........
Comment posted by Sunny on Tuesday, January 29, 2013 4:41 AM
ULTIMATE POST YAAR!!!!THANKS A LOT......
Comment posted by Paul Klanderud on Friday, February 1, 2013 10:33 AM
Great example for someone new to knockout!
Comment posted by deef on Saturday, February 2, 2013 6:14 AM
Two suggestions:
- prettify the code so it's more readable
- and I would personally put the selected employee in it's own observable
Comment posted by Sonali on Wednesday, February 6, 2013 3:24 AM
Nice article!
Comment posted by Chris Clarke on Thursday, February 7, 2013 7:00 PM
I'm interested in this approach but not yet convinced.

We're currently using Data Annotations which allow us to encapsulate the data validation for a data table/class in one module.

It implements javascript validation rules at the front-end and applies the same rules on Postback in case javascript has been disabled.

Can Knockout interface/use Data Annotation rules, if not how do you validate input data at the front-end and on Postback ?
Comment posted by Shraddha on Wednesday, February 27, 2013 6:29 AM
I m getting following error what should i do?
Cannot find JSON.stringify(). Some browsers (e.g., IE < 8) don't support it natively, but you can overcome this by adding a script reference to json2.js, downloadable from http://www.json.org/json2.js
Comment posted by Madhu on Thursday, February 28, 2013 6:31 AM
Awesome artical. Really posts in dotnetcurry.com is helping me alot.
Thanking you very much. Keep going..
Comment posted by d. Siva on Monday, March 4, 2013 7:39 AM
Could you please answer my question
http://stackoverflow.com/questions/15068583/sending-parameters-from-mvc-4-action-to-web-form-for-the-ssrs-report

thanks in advance
Comment posted by Name on Wednesday, March 13, 2013 2:53 PM
Are you mad or what?? Your tutorial is 100% different from the source code
Comment posted by Eduardo on Thursday, March 14, 2013 10:36 PM
Thanks, excellent example.
Comment posted by Budi Tosin on Wednesday, April 17, 2013 3:47 AM
Thanks...
This is very useful for me...

Best Regards,

Budi Tosin
Comment posted by Peder Myhre on Wednesday, April 17, 2013 5:58 PM
Thank you Mahesh! Very simple to follow and it works!
Comment posted by pushpa on Thursday, May 16, 2013 2:41 PM
I exactly followed the steps but it's not showing the data on the table.
In the url: "http://localhost:50457/api/EmployeeInfoAPI/"  path why we are using api. I am new to Mvc
Comment posted by charles on Sunday, June 9, 2013 7:35 AM
Hi!!!...
I'm new to MVC... I'm gettin "500 and Internal server Error" How to resolve it????
Comment posted by monish on Wednesday, June 19, 2013 10:43 AM
I exactly followed the steps but it's not showing the data on the table.
please suggest me .
Comment posted by Mansoor on Thursday, June 20, 2013 6:54 PM
Mahesh you are the man dude :) loved the article very nice
Comment posted by Gopendra Bhattrai on Wednesday, July 17, 2013 7:36 PM
Very nice article. Thank you very much.
Comment posted by Sarojini on Monday, July 22, 2013 4:45 AM
Thank you for posting such a nice article. Nicely explained and very useful!
Comment posted by Marcos Marchetti on Saturday, August 3, 2013 1:03 AM
thanks.
Comment posted by sreekanth on Wednesday, August 7, 2013 6:05 AM
Knockout will not work properly on IE8 when there are more 400 to 500 records to be displayed in a grid having 6-8 properties for each records. Need to be careful before using it. In the backing binding these records cross 5 Million hits and ie 8 throws a Script error,
Comment posted by SREEKANTH on Wednesday, August 7, 2013 6:09 AM
Knockout will not work properly on IE8 when there are more than 400 to 500 records to be displayed in a grid having 6-8 properties for each record. Before using please do a thorough test otherwise you will end up in issues mainly for IE8. Knockout, in the background it raises 5 Million events  for binding 500 records and IE 8 throws a Script error.
Comment posted by SOMA on Sunday, August 11, 2013 7:46 PM
Steps are not in detail. Try to create a project using the steps you explained, you will know the difficulties
Comment posted by SOMA on Sunday, August 11, 2013 8:30 PM
This article doesn't help to create MVC application for newbies for MVC. No clarity on choosing MVC templates and adding assembly references.
Comment posted by Wolffy on Friday, August 16, 2013 3:28 PM
Couple of things to note here:
1. The port numbers are hard coded in the javascript here as 50457.  It is highly unlikely that Vs2012 random port assignment will match.  Either manually set the port number to 50457 in the project's properties, or edit the javascript with the assigned port number.
2. If you are lazy like me, a copy and paste of the HTML source needs a wee bit of fixing -- the id attributes are missing a closing quote.
3. The data-bind attribute on the button tag in the table is not highlighted, easy to miss.
4. The article doesn't mention that you need to download (or nuget) the Knockout.Mapping package as well.
5. The article really isn't for the MVC for VS tenderfoot -- it assumes a certain level of experience with the tool.  Personally, I'm grateful that the lack of training wheels here.
Comment posted by Wolffy on Monday, August 19, 2013 9:07 AM
Couple of things to note here:
1. The port numbers are hard coded in the javascript here as 50457.  It is highly unlikely that Vs2012 random port assignment will match.  Either manually set the port number to 50457 in the project's properties, or edit the javascript with the assigned port number.
2. If you are lazy like me, a copy and paste of the HTML source needs a wee bit of fixing -- the id attributes are missing a closing quote.
3. The data-bind attribute on the button tag in the table is not highlighted, easy to miss.
4. The article doesn't mention that you need to download (or nuget) the Knockout.Mapping package as well.
5. The article really isn't for the MVC for VS tenderfoot -- it assumes a certain level of experience with the tool.  Personally, I'm grateful that the lack of training wheels here.
Comment posted by Jagadeesh on Friday, September 6, 2013 10:55 PM
absolutely goo work done.Thanks a lot.
Comment posted by santosh kumar patro on Saturday, September 14, 2013 2:48 PM
Thanks a lot for the article. But in case I am moving the entire javascript code to a new file : EmployeeInfo.js and referring to it in the head section of the Create.cshtml as mentioned below:
<script src="~/Scripts/EmployeeInfo.js"></script> it is not working. On debugging the code I found that the GetEmployees() method is invoked and data.length is also greater than 0 but the data is not able to bind with the table to display all the records. Any help on this is appreciated.
Comment posted by santosh kumar patro on Saturday, September 14, 2013 3:10 PM
Thanks a lot for the article. But in case I am moving the entire javascript code to a new file : EmployeeInfo.js and referring to it in the head section of the Create.cshtml as mentioned below:
<script src="~/Scripts/EmployeeInfo.js"></script> it is not working. On debugging the code I found that the GetEmployees() method is invoked and data.length is also greater than 0 but the data is not able to bind with the table to display all the records. Any help on this is appreciated.
Comment posted by santosh kumar patro on Sunday, September 15, 2013 3:05 AM
Thanks a lot for the article. But in case I am moving the entire javascript code to a new file : EmployeeInfo.js and referring to it in the head section of the Create.cshtml as mentioned below:
<script src="~/Scripts/EmployeeInfo.js"></script> it is not working. On debugging the code I found that the GetEmployees() method is invoked and data.length is also greater than 0 but the data is not able to bind with the table to display all the records. Any help on this is appreciated.
Comment posted by santosh kumar patro on Sunday, September 15, 2013 3:06 AM
Thanks a lot for the article. But in case I am moving the entire javascript code to a new file : EmployeeInfo.js and referring to it in the head section of the Create.cshtml as mentioned below:
<script src="~/Scripts/EmployeeInfo.js"></script> it is not working. On debugging the code I found that the GetEmployees() method is invoked and data.length is also greater than 0 but the data is not able to bind with the table to display all the records. Any help on this is appreciated.
Comment posted by Jeroen on Thursday, October 10, 2013 10:19 AM
Nice article, I am currently working on rewriting an old ASP web app in ASP.NET MVC4 Web Api, but decided not to use knockout.js. If I look at how clean the mark-up stays(especially combined with jquery.validate.unobtrusive.js) and how easy it becomes to 'gather' input data and sent it to the server (using ajax of course) instead of writing code to gather form one, form two etc. I must admit I regret not using it.
Comment posted by vignesh on Thursday, November 7, 2013 3:50 AM
all in all example....... very good for beginneers
Comment posted by Stephen on Monday, December 30, 2013 2:06 PM
Excellent! Thanks!
Comment posted by Reader on Friday, January 10, 2014 3:36 AM
nice code....you have a example of how to deal with select box and multiple check boxes?
Comment posted by Sonal on Sunday, February 23, 2014 5:44 AM
Very good example in single application.
Comment posted by Sonal on Sunday, February 23, 2014 5:44 AM
Very good example in single application.
Comment posted by bala on Sunday, April 27, 2014 3:17 PM
Very Nice Sample application Code
Comment posted by Rajat Bhalla on Friday, May 2, 2014 3:59 AM
You makes my life easy. Thanks a ton
Comment posted by bharath on Thursday, July 10, 2014 8:20 PM
Hi in your example why the api controller is not getting fired........
Comment posted by Navya on Tuesday, July 15, 2014 6:33 AM
sir i have written the same code which you have given but getselectedemployee is not working
Comment posted by werqwer on Friday, July 18, 2014 5:52 AM
adfasdfadsfad
Comment posted by it-it on Sunday, July 27, 2014 12:27 PM
Why bother???????
Comment posted by Ulhas on Tuesday, July 29, 2014 2:23 PM
Similer working and more detail example http://www.c-sharpcorner.com/UploadFile/2b481f/Asp-Net-web-api-application-using-knockout-js/
Comment posted by Jayakumar on Saturday, August 16, 2014 10:17 PM
hi

i changed like this
url: "http://localhost:50457/api/EmployeeInfoAPI",

but 500 internal server error
Comment posted by Mahesh Sabnis on Monday, August 18, 2014 5:27 AM
Hi Jaykumar,

  Please host the WEB API on IIS and then check for the connectivity. Generally error code 500 is for "internal server error" so please check for the database access rights.

Thanks
Regards
Mahesh  

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel