How to use MVC templates and knockout

Recently I am wirting a MVC4 application with some CRUD operation.
MVC provide the templates view to make model view easier. Knockout is a good javascript library to provide the view model binding. Then how to use best of the two together?

Here is a link which shows a good example to use both.

Basically, the template view only needs to add the attribute data-bind with the model property name.
and the property name can get from ViewData.ModelMetaData.PropertyName.

The link above only shows how to add the data-binding to the template. There are still a few things to be done to use knockout.

Knockout needs a ViewModel javascript to track the items and the code sample only returns a C# Model object.

Here is the data transform maps needed.
C# <Object > ---> JSON (javascript object) ---> KnockOut ViewModel

1. To translate model to json, use the following code,
@Html.Raw(
Json.Encode(ViewData.Model));

However, Json class is from a System.Web.Helpers assembly, which not included by MVC4.
The assembly needs to be added to the project from GAC.

2. knockout mapping is a js library to convert javascript object to viewModel,
which can be downloaded from here..

ViewModel = ko.mapping.fromJS( jsonObj );

Create the right connection name for Entity Framework Code First

When setting up the connection string for the Entity framework code first as default to use, the connection name should be the FULL namespace to the context.

For Eg.
<add name="EFWebTest.Models.BlogContext" providerName="System.Data.SqlClient" connectionString="Data Source=.;Integrated Security=SSPI;Initial Catlog=aspnet-EFWebTest" />

The connection string is using sql server. So when the context is loaded, the default database structure will be created in sql server.

Another option is to pass the connection string name in the dbcontext constructor such as,
public sampleDbContext : base("DefaultConnection") {}

SharePoint 2013 Manage Business Data Connectivity Service Access Denied

This is a weird issue that can not manage the Business Data connectivity service.
In the event log, the error details is

The BDC Service application Business Data Connectivity Service is not accessible. The full exception text is: Access is denied.

After followed the fix in this link, then it worked.
Note: This is still not the best solution and should be in dev server only.

 

Sharepoint show detailed error message

To show a detailed error message, the site web.config needs to be modified with the following things,
1. CustomErrors = Off
2. CallStack = true
3. Debug=true

However, it is still possible to hit the following screen,

 

There is another web.config in _layouts folder need to be modified as well,

 

 

SharePoint 2013 - Create a search app

It is not hard to create an App for search to use search javascript.

The search REST service is at http://site/_api/search/query?querytext='querytext'

In the app, need to add search permission,

 

In the default app page, the following html elements are defined.

<div id="toolbarDiv">

 

<input type="text" id="queryTerms" />

<button onclick="executeQuery($get('queryTerms').value); return false;">Search</button>

</div>

 

 

And here is the example script to send the query text to search service and display the results.

function executeQuery(queryTerms) {
    Results = {
        element: '',
        url: '',
        init: function (element) {
            Results.element = element;
            Results.url = _spPageContextInfo.webAbsoluteUrl + "/_api/search/query?querytext='" + queryTerms + "'";
        },
        load: function () {
            $.ajax({
                url: Results.url,
                method: "GET",
                headers: { "ACCEPT": "application/json" },
                success: Results.onSuccess,
                error: Results.onError
            });
        },
        onError: function (error) { alert(JSON.stringify(error)); },
        onSuccess: function (data) {
            var results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
            var html = "<table>";
            for (var i = 0; i < results.length; i++) {
                html += "<tr><td>";
                html += results[i].Cells.results[3].Value;
                html += "</td><td>";
                html += results[i].Cells.results[6].Value;
                html += "</td></tr>";
                }
            html += "</table>";
            Results.element.html(html);
        }
    }
    Results.init($('#resultsDiv'));
    Results.load();
       
}

SharePoint Search - how to reate a custom template view

In SharePoint 2013, rather than using XST, it can be created in html and javascript.

1. Create the template

In the Search Site, go to Site Settings -> Master Pages and Page Layout
In the Display Templates / Search Folder,
Based on the existing template and create custom template.html and upload to here.
In the page properties, make sure content type is Item Display Template and the target control type is for Search Results.

2. Set up the template to be used

In the search site, go to Site Settings -> Result Types,
Create a new Result Type and select it to use the new template

Include twitter bootstrap scripts in MVC 4

Recently I have been looking at the Twitter bootstrap, this is so far the best design toolkit to start your web site. There is a tutorial to start to learn it.

Also now there is a bootstrap package for asp.net mvc4 to install from Nuget.

If you want to use it directly in the MVC4 layout by adding the bootstrap minify script in the layout view page, you will have the error in browser such as,

Unhandled exception at line 6, column 27 in http://localhost:63410/Bootstrap/js/bootstrap.min.js
0x800a138f - JavaScript runtime error: Object expected

To fix this, you need to include JQuery (1.7 above) first before add the bootstrap.min.js
   
@Scripts.Render("~/bundles/jquery")
<script src="/Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>