How To Enable Cross Origin Request In WebAPI 2

In this blog, we are going to learn, how we can learn cross origin request in ASP.NET Web API 2. We realize that ASP.NET Web API is  independent. As of late, I ran into a requirement for calling our Web API in mobile Applications. Here, I am going to show you a basic example, where one is ASP.NET Web Application.

Background

(Cross-origin resource Sharing) is a World Wide Web Consortium. Essentially, it is considered as some portion of HTML5. Mobile application will call XML Http Request for Http verb (GET, POST, PUT, Delete, and so forth) to the ASP.NET Web Application, utilizing API. Naturally, the cross inception request is debilitated in ASP.NET Web API. When we have to call ASP.NET Web API, it should be empowered. We will concentrate more on our ASP.NET Web API, Mobile Application. 

CORS is a concept that will be used like permissions to make cross-domain ajax requests. Let's understand the exact problem without cross enabling in WebApi 2.

You will find this error if WebApi 2 isn't already cross enabled.



Reasons why this type of error will occur:

1. Your  request differs in schemes (in other words http or https).
2. You used different types of  port numbers.
3. Application has different domains or sub-domains types.

Now I have learned a lot of things about cross origin. Now for the solution of how to resolve it  in webApi 2. Use this code to enable Cross origin.

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Net.Http;  
5. using System.Web.Http;  
6. using Microsoft.Owin.Security.OAuth; W
7. using Newtonsoft.Json.Serialization;  
8. using System.Web.Http.ExceptionHandling;  
9. using Crx.Utility;  
10. using System.Web.Http.Cors;  
11. using Microsoft.Practices.Unity;  
12. using Crx.Provider.Dictionaries;  
13. using CrxApi.ExLogger;  
14.   
15. namespace CrxApi  
16. {  
17.     public static class WebApiConfig  
18.     {  
19.         public static void Register(HttpConfiguration config)  
20.         {  
21.   
22.             //Enable CORS for all origins,all headers,all methods,  
23.             //We can customize this to match our requirement  
24.             //Note://The CORS is enabled for the Web API only, not for the Token middleware Provider  
25.             var corsAttr = new EnableCorsAttribute("*", "*", "*");  
26.             config.EnableCors(corsAttr);  
27.               
28.   
29.             config.Routes.MapHttpRoute(  
30.                 name: "DefaultApi",  
31.                 routeTemplate: "api/{controller}/{id}",  
32.                 defaults: new { id = RouteParameter.Optional }  
33.             );  
34.         }  
35.     }  
36. }  

You can see in this code i have used 3 * Let me explain.

• 1st * is allowed to support  any type Domain.
• 2nd * is allowed to support any type of header.
• 3rd * is allowed to support any type  of content type.

Instead of you can use hard code value.

Read More »

1 Comment

Bikesh Srivastava Interview Question, WEB API

Dropdown with Multiple checkbox select with jQuery in MVC 5

In this article I will explain how to implement a Multiple Select (MultiSelect) DropDownList with CheckBoxes in ASP.Net with jQuery Bootstrap Multi-Select Plugin.

So as to actualize a Multiple Select (MultiSelect) DropDownList with CheckBoxes in ASP.Net we should make use of ListBox control and apply the jQuery Bootstrap Multi-Select Plugin to it.

 You can follow these simple steps to implement a Multiple Select DropdownList with CheckBox. 

I am creating a MVC application and create controller "Home"

In next step create Action to open view "Index" see example.

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Web;  
5. using System.Web.Mvc;  
6.   
7. namespace DropdownCheckbox.Controllers  
8. {  
9.     public class HomeController : Controller  
10.     {  
11.         public ActionResult Index()  
12.         {  
13.             return View();  
14.         }  
15.   
16.          
17.     }  
18. }  

Create view name as "Index".see example.

1. @{  
2.     ViewBag.Title = "Home Page";  
3.     Layout = null;  
4. }  
5.   
6. <div>  
7.   <table>  
8.       <tr>  
9.           <td><p >Select Expert's Name  </p></td>  
10.           <td>  
11.     <select id="EmpList" multiple="multiple">  
12.     <option value="1">Navdeep-Asp.net</option>  
13.     <option value="2">Pankaj-C#</option>  
14.     <option value="3">Bikesh-Asp.Net</option>  
15.     <option value="4">Pritam-Salesforce</option>  
16.     <option value="5">Payal-Salesforce</option>  
17.     <option value="6">Sujata-SSRS</option>  
18.     <option value="7">Harikant-UI</option>  
19.   
20. </select>  
21.           </td>  
22.           <td><input type="button" id="btnSelected" value="Get Selected" /></td>  
23.       </tr>  
24.   </table>  
25.      
26.       
27. </div>  

In this article i am using hard code value,but you can bind from database .after that add jquery plugins or CDN.like this.

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
2.  <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"  
3.        rel="stylesheet" type="text/css" />  
4.  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>  
5.  <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"  
6.        rel="stylesheet" type="text/css" />  
7.  <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"  
8.          type="text/javascript"></script>  

 Use these references in your application .

 After that write js code to implement multiselect with checkbox in dropdown.use this code.

1. <script type="text/javascript">  
2.         $(function () {  
3.             $('#EmpList').multiselect({  
4.                 includeSelectAllOption: true  
5.             });  
6.             $('#btnSelected').click(function () {  
7.                 var selected = $("#EmpList option:selected");  
8.                 var message = "";  
9.                 selected.each(function () {  
10.                     message += $(this).text() + " " + $(this).val() + "\n";  
11.                 });  
12.                 alert(message);  
13.             });  
14.         });  
15.     </script>  

Set routing inside "route.config" file.see code.

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Web;  
5. using System.Web.Mvc;  
6. using System.Web.Routing;  
7.   
8. namespace DropdownCheckbox  
9. {  
10.     public class RouteConfig  
11.     {  
12.         public static void RegisterRoutes(RouteCollection routes)  
13.         {  
14.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
15.   
16.             routes.MapRoute(  
17.                 name: "Default",  
18.                 url: "{controller}/{action}/{id}",  
19.                 defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }  
20.             );  
21.         }  
22.     }  
23. }  

 Complete code 

 You can see and understand complete code.

1. @{  
2.     ViewBag.Title = "Home Page";  
3.     Layout = null;  
4. }  
5.   
6.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
7.     <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"  
8.           rel="stylesheet" type="text/css" />  
9.     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>  
10.     <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"  
11.           rel="stylesheet" type="text/css" />  
12.     <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"  
13.             type="text/javascript"></script>  
14.     <script type="text/javascript">  
15.         $(function () {  
16.             $('#EmpList').multiselect({  
17.                 includeSelectAllOption: true  
18.             });  
19.             $('#btnSelected').click(function () {  
20.                 var selected = $("#EmpList option:selected");  
21.                 var message = "";  
22.                 selected.each(function () {  
23.                     message += $(this).text() + " " + $(this).val() + "\n";  
24.                 });  
25.                 alert(message);  
26.             });  
27.         });  
28.     </script>  
29. <div>  
30.   <table>  
31.       <tr>  
32.           <td><p >Select Expert's Name  </p></td>  
33.           <td>  
34.     <select id="EmpList" multiple="multiple">  
35.     <option value="1">Navdeep-Asp.net</option>  
36.     <option value="2">Pankaj-C#</option>  
37.     <option value="3">Bikesh-Asp.Net</option>  
38.     <option value="4">Pritam-Salesforce</option>  
39.     <option value="5">Payal-Salesforce</option>  
40.     <option value="6">Sujata-SSRS</option>  
41.     <option value="7">Harikant-UI</option>  
42.   
43. </select>  
44.           </td>  
45.           <td><input type="button" id="btnSelected" value="Get Selected" /></td>  
46.       </tr>  
47.   </table>  
48.      
49.       
50. </div>  

 Now Run application and see output like this.see image.

 According this example i can select any one or multiple,also can see count of selected items.

 We can see item on popup after click on "GetSelected".

I hope you enjoyed with this blog and learned lot of thinks. If you have any confusion regarding this topics you can download project. 

Read More »

8 Comments

Bikesh Srivastava MVC