Install Xampp co-existing with IIS

Use the following steps:

1. Download Xampp from the official website or directly from this link
2. After successful installation of Xampp, go to this directory inside your Xampp folder: /Xampp/apache/conf/httpd.conf
3. Search for Listen 80 and replace it with Listen 8080
4. Search for ServerName localhost:80 and replace it with ServerName localhost:8080
5. Save this file and close it
6. Then go to this directory: /Xampp/apache/conf/extra/httpd-ssl.conf
7. Search for Listen 443 and replace it with Listen 4499
8. Search for VirtualHost _default_:443> and replace it with VirtualHost _default_:4499>
9. Search for ServerName localhost:443 and replace it with ServerName localhost:4499
10. Save this file and close it
11. Congratulations, we are done. You can run your Apache service using Xampp Control Panel.

**Copy from CodeProject

Web API error: The 'ObjectContent`1' type failed to serialize the response body for content type...

To solve this error:

Add this code in Global.asax >> Application_Start method:

1 2	GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore; GlobalConfiguration.Configuration.Formatters.Remove(GlobalConfiguration.Configuration.Formatters.XmlFormatter);

Razor View set ID to a TextBox

Set ID to a TextBox in Razor like this:

1	@Html.TextBoxFor(item => item.OperationNo, new { id = "MyId" })

Or

1	@Html.TextBoxFor(item => item.OperationNo, htmlAttributes: new { id = "MyId" })

And output will be:

1	<input ... id="MyId" name="OperationNo" type="text" />

Metadata Class for Data Validation in asp.net MVC Database First

For validate data to your database first model, add a class Metadata.cs to your Models folder.
Now write code in metadata class like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; namespace POSMSWeb.Models { public class CustomerMetadata { [Display(Name = "Client Name")] public string CustomerName; [Display(Name = "Client Address")] public string CustomerAddress; [Display(Name = "Phone Number")] public string CustomerPhone; [Display(Name = "Mobile Number")] public string CustomerMobile; [Display(Name = "FAX Number")] public string CustomerFax; [Display(Name = "Client Email")] public string CustomerEmail; [Display(Name = "Client Note")] public string CustomerNote; } }

Now, you must associate the model classes with the metadata classes.

In the Models folder, add a class named PartialClasses.cs

Replace the contents of the file with the following code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Web; namespace POSMSWeb.Models { [MetadataType(typeof(CustomerMetadata))] public partial class tbl_Customer { } }

How to Add Kendo UI to ASP.NET MVC 5

Create a new ASP.NET MVC 5 Application

To create a new ASP.NET MVC 5 Application follow these steps.

1. Open Visual Studio 2013.
2. Press CTRL+SHIFT+N to create a new project.
3. Select the Visual C# node and then Web to show all available web project templates for C#.
4. Select ASP.NET Web Application and click OK. This will start the New ASP.NET Project wizard.
5. Select MVC from the available templates and click OK.
6. Press CTRL+F5 to build and run the application.

Include the JavaScript and CSS files

Kendo UI requires certain JavaScript and CSS files to be included in the page. There are two options - either to include a local copy of those filesor to use Kendo UI CDN (Content Delivery Network).
Using local JavaScript and CSS

To copy the Kendo UI JavaScript and CSS files in the Visual Studio Solution of the application follow these steps.

1. Copy the js directory from the install location and paste it in the Script folder of the application.
2. Copy the styles directory from the install location and paste it in the Content folder of the application.
3. Rename the Scripts/js directory to Scripts/kendo. 
4. Rename Content/styles to Content/kendo.

After the Kendo UI JavaScript and CSS files are added in the application you can include them.

1. Open App_Start/BundleConfig.cs to add bundles for Kendo UI.
2. Add a script bundle for Kendo UI.
   

   bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
               "~/Scripts/kendo/kendo.all.min.js",
               // "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler
               "~/Scripts/kendo/kendo.aspnetmvc.min.js"));

3. Add a style bundle for Kendo UI.
   

   bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
               "~/Content/kendo/kendo.common-bootstrap.min.css",
               "~/Content/kendo/kendo.bootstrap.min.css"));

4. Tell ASP.NET bundles to allow minified files in debug mode.
   

   bundles.IgnoreList.Clear();

5. Open the layout of the application. By default it is Views/Shared/_Layout.cshtml (or Site.master if using ASPX).
6. Render the Kendo UI style bundle.
   
   • Razor
     

     @Styles.Render("~/Content/kendo/css")

   • ASPX
     

     <%: Styles.Render("~/Content/kendo/css") %>

1. Move the jQuery bundle to the head tag of the page. It is at the end of the page by default.
2. Render the Kendo UI script bundle after jQuery.
   
   • Razor
     

     @Scripts.Render("~/bundles/jquery")
     @Scripts.Render("~/bundles/kendo")

   • ASPX
     

     <%: Scripts.Render("~/bundles/jquery") %>
     <%: Scripts.Render("~/bundles/kendo") %>

Using Kendo UI CDN

To include the Kendo UI JavaScript and CSS files from CDN follow these steps. Important! Don't forget to replace "kendo ui version" from the code snippets below with the current version of Kendo UI e.g. "2013.2.918".

1. Open the layout of the application. By default it is Views/Shared/_Layout.cshtml (or Site.master if using ASPX).
2. Include kendo.common-bootstrap.min.css and kendo.bootstrap.min.css. Add a link tag within the head tag of the layout.
   

   <link rel="stylesheet" href="http://cdn.kendostatic.com/<kendo ui version>/styles/kendo.common-bootstrap.min.css" />
   <link rel="stylesheet" href="http://cdn.kendostatic.com/<kendo ui version>/styles/kendo.bootstrap.min.css" />

3. Move the jQuery bundle to the head tag of the page. It is at the end of the page by default.
4. Include kendo.all.min.js and kendo.aspnetmvc.min.js after jQuery.
   

   <script src="http://cdn.kendostatic.com/<kendo ui version>/js/kendo.all.min.js"></script>
   <script src="http://cdn.kendostatic.com/<kendo ui version>/js/kendo.aspnetmvc.min.js"></script>

5. If using Kendo UI Scheduler include kendo.timezones.min.js after kendo.all.min.js
   

   <script src="http://cdn.kendostatic.com/<kendo ui version>/js/kendo.all.min.js"></script>
   <script src="http://cdn.kendostatic.com/<kendo ui version>/js/kendo.timezones.min.js"></script>
   <script src="http://cdn.kendostatic.com/<kendo ui version>/js/kendo.aspnetmvc.min.js"></script>

Add reference to Kendo.Mvc.dll

The next step is to add a reference to Kendo.Mvc.dll which is the assembly containing the Kendo UI server-side wrappers.

1. Right-click the References node in Solution Explorer and click Add Reference.
2. Select the Browse tab of the Add Reference dialog and navigate to the install location of Telerik UI for ASP.NET MVC.
3. Navigate to wrappers/aspnetmvc/Binaries/MVC5. This directory contains the ASP.NET MVC 5 version of Telerik UI for ASP.NET MVC.
4. Select Kendo.Mvc.dll and click OK.

Update the web.config

The next step is to let ASP.NET MVC know of the Kendo.Mvc.UI namespace where the server-side wrappers are. To do this update the web.config file of the web application.

1. Open Views/Web.config (or root Web.config if using ASPX).
2. Locate the namespaces tag.
3. Append an add tag to the namespaces tag.
   

   <namespaces>
       <add namespace="System.Web.Mvc" />
       <add namespace="System.Web.Mvc.Ajax" />
       <add namespace="System.Web.Mvc.Html" />
       <add namespace="System.Web.Routing" />
       <add namespace="Kendo.Mvc.UI" />
   </namespaces>

Use a Kendo UI widget

Finally lets use a Kendo UI widget.

1. Open the Views/Home/Index.cshtml view (or Index.aspx if using ASPX).
2. Add a Kendo UI DatePicker widget.
   
   • Razor
     

     @(Html.Kendo().DatePicker().Name("datepicker"))

   • ASPX
     

     <%: Html.Kendo().DatePicker().Name("datepicker") %>

3. Press CTRL+F5 to build and run the application.