Single Page Application - Prerequirement

Hi,

I am trying to experiment Single Page Application on ASP.NET MVC 4, using video demo at http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2159. I do not have any problem to write all code from the video. I have to add System.Web.Http.Data.Helpers2 manually. When I define code "var dataSource = upshot.dataSources.DeliveriesForToday;" there is no intellisense for "dataSources". This is make the allert is not show at run time.

"Now I am stuck on the allert statement at the following code:

@using DeliveryTracker.Controllers
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>Welcome to my Single Page Application</h1>
            </hgroup>
        </div>
    </section>
}
@(Html.UpshotContext().DataSource<DataServicesController>(x => x.GetDeliveriesForToday()))

<script type="text/javascript">

    $(function () {
        var dataSource = upshot.dataSources.DeliveriesForToday;
        dataSource.refresh(function (results) {
            alert(results);
        });
    });
</script>

Is there any other requirement to use Knockout.js so I can be able to continue to try the demo?

Thank you in advance

Re: Single Page Application - Prerequirement

Hi,

I have tried to start over from the beginning again with the following steps:

Create a new project: choose Single Page Application from ASP.NET MVC 4 template, project name: DeliveryTracker
At PACKAGE MANAGER CONSOLE: Install-Package SinglePageApplication.CSharp
Add from existing item from Steven Sanderson source: AppDb.Context.cs and DomainModels.cs
Add controller: DataServicesController.cs: with "Empty controller" template
Change connectionString name to: AppDbContext
Test RUN: http://localhost:3713/api/DataServices/GetDeliveriesForToday
Add Include("Customer") on GetDeliveriesForToday
Test RUN: http://localhost:3713/api/DataServices/GetDeliveriesForToday - so far is ok
modify Index.cshtml at /Views/Home/ folder See the insert:
The problem is: "var dataSource = upshot.dataSources.GetDeliveriesForToday" is not happy there is no intellisense for "dataSources" and "GetDeliveriesForToday", and dataSource.refresh(function (results) { alert(results); }); is not working, there is no allert windows

@using DeliveryTracker.Controllers
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>Welcome to my Single Page Application</h1>
            </hgroup>
        </div>
    </section>
}

@(Html.UpshotContext().DataSource<DataServicesController>(x => x.GetDeliveriesForToday()))

<script type="text/javascript">

    $(function () {
        var dataSource = upshot.dataSources.DeliveriesForToday;
        dataSource.refresh(function (results) {
            alert(results);
        });
    });
</script>

Any one can help me please?

Re: Single Page Application - Prerequirement

hi,

You don't have any intellisense on that because the objects like DeliveriesForToday doesn't exist yet. In your code example the datasource name is DeliveriesForToday, but in your text you said it called "GetDeliveriesForToday". I think that is your problem. You need to call it like in your code sample. If that wouldn't work, I would recomend you to startup the page and look what's inserted in code.

The "@(Html.UpshotContext().DataSource<DataServicesController>(x => x.GetDeliveriesForToday()))" line of code generates some code for you, and also sets the datasource name you can use in your personal code.

Kristof

Re: Single Page Application - Prerequirement

Thank you for reply after a week of waiting, I also comment this case on SPA page, but no answer.

I have correct to be the following code, but still the same. When I use this on browse data exist http://localhost:3713/api/DataServices/GetDeliveriesForToday, but when I run after I modified, still do not show my allert. Here the code I modified:

@using DeliveryTracker.Controllers
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>Welcome to my Single Page Application</h1>
            </hgroup>
        </div>
    </section>
}

@(Html.UpshotContext().DataSource<DataServicesController>(x => x.GetDeliveriesForToday()))

<script type="text/javascript">

    $(function () {
        var dataSource = upshot.dataSources.GetDeliveriesForToday;
        dataSource.refresh(function (results) {
            alert(results);
        });
    });
</script>

Re: Single Page Application - Prerequirement

Hi Kristof,

I looked back to the video, is not "var dataSource = upshot.dataSources.GetDeliveriesForToday;" but without get "var dataSource = upshot.dataSources.DeliveriesForToday;"

I really do not understand what I am doing wrong, but at the video demo on the TechDay in Netherland, it worked

Again I have try them both, no luck

Re: Single Page Application - Prerequirement

Did you builde the solution completelly by your self, or have you download it?

I'm currently working on it, but I don't have any problems. So the following just works for me.

@(Html.UpshotContext(bufferChanges: true).DataSource<DataServiceController>(x => x.GetDeliveriesForToday()))

<script type="text/javascript">

    $(function () {
        var dataSource = upshot.dataSources.DeliveriesForToday;
        dataSource.refresh(function (results) {
            alert(results);
        });
    });
</script>

But, can u discribe what kind of error you get? Have you try looking with the developer tools (F12) maybe there is some js error?

Re: Single Page Application - Prerequirement

Hi Kristof,

I am glad that you have done sucesfull. When I activate developer tools (F12) there is no message on Chrome, but on IE it stop at var dataSource = upshot.dataSources.DeliveriesForToday;

I tried the calssicall debug like this the following code:

<script type="text/javascript">

    $(function () {
        alert("alert 1");
        var dataSource = upshot.dataSources.DeliveriesForToday;
        alert("alert 2")
        dataSource.refresh(function (results) {
            alert(results);
        });
    });
</script>

I have "alert1" on test run, but there is no "alert 2"

Re: Single Page Application - Prerequirement

KDegrave
Did you builde the solution completelly by your self, or have you download it?

Sorry I forgot to answer this quote.

I build it my self, and I add AppDbContext.cs, and DomainModels.cs from the sample I have download earlier

Re: Single Page Application - Prerequirement

That is strange, since "var dataSource = upshot.dataSources.DeliveriesForToday;" isn't even executing any code. The call to the server is only launched when the refresh method is called.

My guess is that you are missing some references. In the _SpaScripts.cshtml in the shared folder you should have the following:

<script src="~/Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="~/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"></script>
<script src="~/Scripts/knockout.debug.js" type="text/javascript"></script>
<script src="~/Scripts/arrayUtils.js" type="text/javascript"></script>
<script src="~/Scripts/upshot.js" type="text/javascript"></script>
<script src="~/Scripts/upshot.compat.knockout.js" type="text/javascript"></script>
<script src="~/Scripts/upshot.knockout.extensions.js" type="text/javascript"></script>
<script src="~/Scripts/native.history.js" type="text/javascript"></script>
<script src="~/Scripts/nav.js" type="text/javascript"></script>
<script src="~/Scripts/amplify.js" type="text/javascript"></script>

Also check if you have the latest version of the SPA: open your packetmanager and search for SinglePageApplication.CSharp

I don't know if it is the Web API that you want to use, but I have made a demo app with upshot and knockout for RIA services.

You can find the demo here. and a guiding tutorial here.

Kristof

Re: Single Page Application - Prerequirement

I'm thinking you are missing some references. You need at least the following:

<script src="~/Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="~/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"></script>
<script src="~/Scripts/knockout.debug.js" type="text/javascript"></script>
<script src="~/Scripts/arrayUtils.js" type="text/javascript"></script>
<script src="~/Scripts/upshot.js" type="text/javascript"></script>
<script src="~/Scripts/upshot.compat.knockout.js" type="text/javascript"></script>
<script src="~/Scripts/upshot.knockout.extensions.js" type="text/javascript"></script>
<script src="~/Scripts/native.history.js" type="text/javascript"></script>
<script src="~/Scripts/nav.js" type="text/javascript"></script>
<script src="~/Scripts/amplify.js" type="text/javascript"></script>

Also make sure you have the latest version of SinglePageApplications installed. You can do this with nuget.

I have builded a demo app with RIA Services, you can find it over here and wrote a guiding post.

Re: Single Page Application - Prerequirement

Hi Kristof,

now is working after I add the said script on your reply, This should be work, using the new bundling feature, but the fact is the bundling has not perfectly work yet.

This is the bundling at at _Layout.cshtml (I am not using _SpaLayout.cshtml because, I am using Home/Index,cshtml with _Layout.cshtml.

<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
        <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
        <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>

Here my my modification and work as I expect. There are two scrpits I commented because I do not have that two.

@using DeliveryTracker.Controllers

@*  I did not put this here since bundling already define on _Layout.cshtml *@

<script src="~/Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="~/Scripts/modernizr-2.0.6-development-only.js" type="text/javascript"></script>
<script src="~/Scripts/knockout.debug.js" type="text/javascript"></script>
<script src="~/Scripts/upshot.js" type="text/javascript"></script>
<script src="~/Scripts/upshot.compat.knockout.js" type="text/javascript"></script>
<script src="~/Scripts/upshot.knockout.extensions.js" type="text/javascript"></script>
<script src="~/Scripts/native.history.js" type="text/javascript"></script>
<script src="~/Scripts/nav.js" type="text/javascript"></script>

@*<script src="~/Scripts/amplify.js" type="text/javascript"></script>*@
@*<script src="~/Scripts/arrayUtils.js" type="text/javascript"></script>*@

@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>Welcome to my Single Page Application</h1>
            </hgroup>
        </div>
    </section>
}

@*@(Html.UpshotContext().DataSource<DataServicesController>(x => x.GetDeliveriesForToday()))*@

@(Html.UpshotContext().DataSource<DataServicesController>(x => x.GetDeliveriesForToday()))

<script type="text/javascript">

    $(function () {
        var dataSource = upshot.dataSources.DeliveriesForToday;
        dataSource.refresh(function (results) {
            alert(results);
        });
    });
</script>

I am very happy now it's working. I can continue my exercise, and thanks you very much

Re: Single Page Application - Prerequirement

KDegrave
I have builded a demo app with RIA Services, you can find it over here and wrote a guiding post.

I am going to try your demo right away.

Again thank you so much