Single Page Application - Prerequirement : The Official Microsoft ASP.NET Forums

Reply

jsiahaan

Contributor

2552 Points

646 Posts

Single Page Application - Prerequirement

Apr 02, 2012 10:12 AM|LINK

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

Jannen Siahaan
Indonesian Humanitarian Foundation

Moved by XIII on Apr 02, 2012 11:43 AM

Reply

jsiahaan

Contributor

2552 Points

646 Posts

Re: Single Page Application - Prerequirement

Apr 02, 2012 02:00 PM|LINK

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?

Jannen Siahaan
Indonesian Humanitarian Foundation

Edited by jsiahaan on Apr 06, 2012 08:19 AM
Edited by jsiahaan on Apr 06, 2012 08:19 AM

Reply

KDegrave

Member

96 Points

25 Posts

Re: Single Page Application - Prerequirement

Apr 07, 2012 06:44 AM|LINK

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

Blog: http://www.kristofdegrave.be
Ria4HTML: http://ria4htmldemo.codeplex.com
Linq2IndexedDB: http://linq2indexeddb.codeplex.com

Reply

jsiahaan

Contributor

2552 Points

646 Posts

Re: Single Page Application - Prerequirement

Apr 07, 2012 07:00 AM|LINK

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>

Jannen Siahaan
Indonesian Humanitarian Foundation

Reply

jsiahaan

Contributor

2552 Points

646 Posts

Re: Single Page Application - Prerequirement

Apr 07, 2012 07:26 AM|LINK

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

Jannen Siahaan
Indonesian Humanitarian Foundation

Reply

KDegrave

Member

96 Points

25 Posts

Re: Single Page Application - Prerequirement

Apr 07, 2012 07:39 AM|LINK

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?

Blog: http://www.kristofdegrave.be
Ria4HTML: http://ria4htmldemo.codeplex.com
Linq2IndexedDB: http://linq2indexeddb.codeplex.com

Reply

jsiahaan

Contributor

2552 Points

646 Posts

Re: Single Page Application - Prerequirement

Apr 07, 2012 08:05 AM|LINK

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"

Jannen Siahaan
Indonesian Humanitarian Foundation

Reply

jsiahaan

Contributor

2552 Points

646 Posts

Re: Single Page Application - Prerequirement

Apr 07, 2012 08:13 AM|LINK

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

Jannen Siahaan
Indonesian Humanitarian Foundation

Edited by jsiahaan on Apr 07, 2012 08:15 AM

Reply

KDegrave

Member

96 Points

25 Posts

Re: Single Page Application - Prerequirement

Apr 07, 2012 08:20 AM|LINK

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

Blog: http://www.kristofdegrave.be
Ria4HTML: http://ria4htmldemo.codeplex.com
Linq2IndexedDB: http://linq2indexeddb.codeplex.com

Edited by KDegrave on Apr 07, 2012 08:20 AM
Marked as answer by jsiahaan on Apr 07, 2012 09:32 AM

Reply

KDegrave

Member

96 Points

25 Posts

Re: Single Page Application - Prerequirement

Apr 07, 2012 08:31 AM|LINK

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.

Blog: http://www.kristofdegrave.be
Ria4HTML: http://ria4htmldemo.codeplex.com
Linq2IndexedDB: http://linq2indexeddb.codeplex.com

Edited by KDegrave on Apr 07, 2012 08:31 AM
Marked as answer by jsiahaan on Apr 07, 2012 09:33 AM

Single Page Application - Prerequirement RSS

11 replies

jsiahaan

Single Page Application - Prerequirement

jsiahaan

Re: Single Page Application - Prerequirement

KDegrave

Re: Single Page Application - Prerequirement

jsiahaan

Re: Single Page Application - Prerequirement

jsiahaan

Re: Single Page Application - Prerequirement

KDegrave

Re: Single Page Application - Prerequirement

jsiahaan

Re: Single Page Application - Prerequirement

jsiahaan

Re: Single Page Application - Prerequirement

KDegrave

KDegrave

Re: Single Page Application - Prerequirement

KDegrave

Re: Single Page Application - Prerequirement

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft