{"id":1794,"date":"2013-02-21T16:34:09","date_gmt":"2013-02-21T16:34:09","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2013\/02\/21\/mvc-single-page-application-template-for-asp-net-and-web-tools-2012-2\/"},"modified":"2013-02-21T16:34:09","modified_gmt":"2013-02-21T16:34:09","slug":"mvc-single-page-application-template-for-asp-net-and-web-tools-2012-2","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/mvc-single-page-application-template-for-asp-net-and-web-tools-2012-2\/","title":{"rendered":"MVC Single Page Application Template for ASP.NET and Web Tools 2012.2"},"content":{"rendered":"

With the final release of ASP.NET and Web Tools 2012.2, we refreshed single page application page on asp.net<\/a> .  It talks about KnockoutJS Template<\/a> and introduced 4 community created SPA templates<\/a> that you can install as MVC templates.<\/p>\n

There are four improvements for the MVC SPA template RTM release over the RC release<\/a> that worth a note.<\/p>\n

Antiforgery support for Web API calls<\/h2>\n

The ValidateAntiForgeryToken filter only works on MVC calls. Web API doesn’t have a default Antiforgery filter yet. We implemented attribute \u201cValidateHttpAntiForgeryToken\u201d inside Filters\\ValidateHttpAntiForgeryTokenAttribute.cs to support antiforgery in Web API calls.  You can see section Anti-CSRF in KnockoutJS Template<\/a> article for more information. <\/p>\n

ValidateHttpAntiForgeryToken attribute is used for TodoController class and 3 methods for TodoListController class.<\/p>\n

In index.cshtml, we have the following code:<\/p>\n

\n
@functions{\n<\/span>    <\/span>public string <\/span>GetAntiForgeryToken()\n    {\n        <\/span>string <\/span>cookieToken, formToken;\n        <\/span>AntiForgery<\/span>.GetTokens(<\/span>null<\/span>, <\/span>out <\/span>cookieToken, <\/span>out <\/span>formToken);\n        <\/span>return <\/span>cookieToken + <\/span>":" <\/span>+ formToken;                \n    }\n<\/span>}<\/span><\/pre>\n
<<\/span>input <\/span>id<\/span>="antiForgeryToken" <\/span>type<\/span>="hidden" <\/span>value<\/span>="<\/span>@<\/span>GetAntiForgeryToken()<\/span>" \/><\/span><\/pre>\n<\/blockquote>\n
In todo.datacontext.js file, as part of the AJAX call, we have:<\/pre>\n
\n
var <\/span>antiForgeryToken = $(<\/span>"#antiForgeryToken"<\/span>).val();\n<\/span>if <\/span>(antiForgeryToken) {\n    options.headers = {\n        <\/span>'RequestVerificationToken'<\/span>: antiForgeryToken\n    }\n}<\/span><\/pre>\n<\/blockquote>\n
Use camel case for JSON data<\/h2>\n
We listened to John Papa<\/a>\u2019s advice and changed to camel casing for all the JavaScript models.  We added the following line in app_start\/webapiconfig.cs to support the camel case for JSON serialization.<\/p>\n
\/\/ Use camel case for JSON data.\n<\/span>config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = 
                  <\/span>new <\/span>CamelCasePropertyNamesContractResolver<\/span>();<\/span><\/pre>\n
Support JQuery.1.9 JSON parser change<\/h2>\n
JQuery 1.9 has a change for JSON Parser that it no longer accept empty string as valid return<\/a>.  We change the jquery.validate.unobtrusive.js file for all the MVC templates to support JQuery.1.9.  For SPA template, we use \u201ctext\u201d datatype instead of \u201cjson\u201d when we are not expecting a JSON output in todo.datacontext.js file:<\/p>\n
    <\/span>function <\/span>saveChangedTodoList(todoList) {\n        clearErrorMessage(todoList);\n        <\/span>return <\/span>ajaxRequest(<\/span>"put"<\/span>, todoListUrl(todoList.todoListId), todoList, <\/font><\/span>"text"<\/font><\/span>)\n            .fail(<\/span>function <\/span>() {\n                todoList.errorMessage(<\/span>"Error updating the todo list title. Please make sure it is non-empty."<\/span>);\n            });\n    }\n\n    <\/span>\/\/ \u2026\n<\/span>    <\/span>function <\/span>ajaxRequest(type, url, data, dataType<\/font>) { <\/span>\/\/ Ajax helper\n        <\/span>var <\/span>options = {\n            dataType: dataType || <\/font><\/span>"json"<\/font><\/span>,\n<\/font>            contentType: <\/span>"application\/json"<\/span>,\n            cache: <\/span>false<\/span>,\n            type: type,\n            data: data ? data.toJson() : <\/span>null\n        <\/span>};\n        
        \/\/ \u2026 <\/span><\/span><\/pre>\n
<\/span>        <\/span>return <\/span>$.ajax(url, options);\n    }<\/span><\/pre>\n<\/p>\n
Support KO ObservableArray IntelliSense by using JavaScript XML Documentation Comments<\/h2>\n
The editor uses \u201cscripts\/_references.js\u201d file\u2019s references files to get the Knockout\u2019s IntelliSense in the data-bind attributes.  Sometimes it\u2019s impossible for the JavaScript engine to figure out what the correct object type is for KO\u2019s ObservableArray.  We need to add some XML Documentation Comments to help the JavaScript engine to provide meaningful JavaScript IntelliSense<\/a>.  <\/p>\n
todo.model.js<\/h3>\n
    <\/span>function <\/span>todoList(data) {\n        <\/span>var <\/span>self = <\/span>this<\/span>;\n        data = data || {};\n        <\/span>\/\/ \u2026<\/span><\/pre>\n
<\/span>        self.todos = ko.observableArray(importTodoItems(data.todos));<\/span><\/pre>\n
\n
<\/span>    \/\/ \u2026<\/span><\/p>\n<\/blockquote>\n
    <\/span>function <\/span>importTodoItems(todoItems) {\n        <\/span>\/\/\/ <returns value="[new todoItem()]"><\/returns>\n        <\/span>return <\/span>$.map(todoItems || [],\n                <\/span>function <\/span>(todoItemData) {\n                    <\/span>return <\/span>datacontext.createTodoItem(todoItemData);\n                });\n    }<\/span><\/pre>\n
todo.viewmodel.js:<\/h3>\n
\n
window.todoApp.todoListViewModel = (<\/span>function <\/span>(ko, datacontext) {\n    <\/span>\/\/\/ <field name="todoLists" value="[new datacontext.todoList()]"><\/field>\n    <\/span>var <\/span>todoLists = ko.observableArray(),<\/span><\/pre>\n<\/blockquote>\n
<\/span><\/pre>\n
So in general, if we have a simple code like below,<\/span><\/pre>\n
function <\/span>TaskListViewModel() {\n<\/span>    <\/span>var <\/span>self = <\/span>this<\/span>;\n    self.tasks = ko.observableArray([]);<\/span><\/pre>\n
<\/span><\/pre>\n
we can convert to the following to support tasks IntelliSense in VS:<\/span><\/pre>\n
function <\/span>TaskListViewModel() {\n    <\/span>var <\/span>self = <\/span>this<\/span>;\n    self.tasks = ko.observableArray(<\/span>function <\/span>() {\n        <\/span>\/\/\/ <returns value="[new Task()]"><\/returns>\n        <\/span>return <\/span>[];\n    }());<\/span><\/pre>\n
Summary<\/h2>\n
There are quite a few SPA frameworks around.  You can easily customize a MVC template<\/a> and create a VSIX file for other people to install.  If you have a great template to share, feel free to contact us to get your template listed in our asp.net SPA page.<\/p>\n","protected":false},"excerpt":{"rendered":"
With the final release of ASP.NET and Web Tools 2012.2, we refreshed single page application page on asp.net .  It talks about KnockoutJS Template and introduced 4 community created SPA templates that you can install as MVC templates. There are four improvements for the MVC SPA template RTM release over the RC release that worth […]<\/p>\n","protected":false},"author":410,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[7433,7333,7425],"class_list":["post-1794","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-asp-net-and-web-tools-2012-2","tag-asp-net-mvc","tag-spa"],"acf":[],"blog_post_summary":"
With the final release of ASP.NET and Web Tools 2012.2, we refreshed single page application page on asp.net .  It talks about KnockoutJS Template and introduced 4 community created SPA templates that you can install as MVC templates. There are four improvements for the MVC SPA template RTM release over the RC release that worth […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/1794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/410"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=1794"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/1794\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=1794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=1794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=1794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}