Make IIS Express works with http://127.0.0.1

I never notice that IIS Express doesn’t listen to web requests other than localhost. So, to my surprise, when I try http://127.0.0.1, I got HTTP 400, Bad Request instead.

 

127.0.0.1-Error

 

Change 127.0.0.1 to localhost and everything is fine.

localhost

 

Anyway, you can set your IIS Express to let it listen to a request for 127.0.0.1 easily.

1. Look for a file applicationhost.config. It’d be under /documents/IISExpress/config.

2. Go to <sites> section and look for your site. In this example, I have my web project named MyWeb.

iis-express-setting-before

3. Change localhost to 127.0.0.1

iis-express-setting-after

4. Stop IIS Express and run your web site again.

exit-iis-express

 

Now you should be able to access your web site thru 127.0.0.1 address now!

127.0.0.1-work

 

Hope this helps! 🙂

Create and Run ASP.NET MVC project with Durandal Starter Kit on Visual Studio 2013

If you’d like to support the Durandal project, please back their Kickstarter project

With Visual Studio 2013 One ASP.NET Web Project, I couldn’t find a way to choose Durandal SPA Template directly even after I install the VSIX file. The easiest way is to create an empty MVC project and install the entire starter kit via NuGet.

Here is how:

1. First we create an empty MVC web project.

CreateWebProject

EmptyMVC

2. Run Install-Package Durandal.StarterKit from the Package Manager Console (i.e., NuGet console).

InstallNuGetPackage

3. Durandal NuGet package comes with DurandalController as a default controller, so you have to change the default controller in App_Start/RouteConfig.cs from “Home” to “Durandal”

RouteConfig

4. Now you should be able to build and run the starterkit.

RunDurandal

Happy coding!

How to : Kendo UI Grid for ASP.NET MVC

Customize the Filter menu items:

Grid Helpers:

@(Html.Kendo().Grid(Model)
    .Name("People")
    .Columns(cols =>
    {
		...
		cols.Bound(m => m.ResidenceState)
			.Title("State")...
			.Filterable(filter =>
			{
				filter.UI("statesFilter");
				filter.Operators(f => f.ForString(o =>
				{
					o.Clear();
					o.IsEqualTo("Is Equal To");
					o.IsNotEqualTo("Is Not Equal To");
				}));
	        });
    ...
    })
)

JavaScript:

function statesFilter(element)
{
   element.kendoDropDownList({
   dataSource:
   {
       data: @(Html.Raw(Json.Encode(ViewData["States"])))
   }});
}

Controller:

public ActionResult Index()
{
    ViewData["States"] = SamplePeople.States;
    return View();
}

With this set up my filter menu shows only “Is Equal To” and “Not Equal To.” My filter menu will also use our state filter UI.

image

Column ClientTemplate:
Grid Helpers:

@(Html.Kendo().Grid(Model)
	.Name("People")
	.Columns(cols =>
	{
		...
		cols.Bound(m => m.ResidenceState)
		.Title("State")
		.ClientTemplate("#=getStatesTemplate(ResidenceState)#")
		...
	})
	...
)

JavaScript:

function getStatesTemplate(state)
{
	switch(state)
	{
		case "California":
		case "Washington":
		case "Tennessee":
		case "Oregon":
		case "Texas":
			return "<b>"+state+"</b>";
		default: return state;
	}
}

California and other states are shown in bold.

image

Customized EditorTemplate:
Grid Helpers:

@(Html.Kendo().Grid(Model)
	.Name("People")
	.Columns(cols =>
	{
		...
		cols.Bound(m => m.ResidenceState)
			.Title("State")
			...
			.EditorTemplateName("StateEditor")
			.Filterable(filter =>
			{
				filter.UI("statesFilter");
				filter.Operators(f => f.ForString(o =>
				{
					o.Clear();
					o.IsEqualTo("Is Equal To");
					o.IsNotEqualTo("Is Not Equal To");
				}));
			});
		...
	})
	...
)

EditorTemplate (Views/Shared/EditorTemplate/StateEditor.cshtml):

@(Html.Kendo().DropDownList()
   .Name("States")
   .BindTo(((System.Collections.IEnumerable)ViewData["States"]) )
)

When I click “edit”, I will get the drop-down list of states.

image