Question regarding Mobile-friendly REST service using ASP.NET Web API and SQL Database Tutorial

Question

I am working on going through the tutorial titled "Mobile-friendly REST service using ASP.NET Web API and SQL Database" (https://www.windowsazure.com/en-us/develop/net/tutorials/rest-service-using-web-api/#bkmk_createmvc4app) and am having an issue getting the contacts to display.  I get through the "Enable Migrations, create the database, add sample data and a data initializer" section, and my data will display on my page in a simple table format.  However, after completing the "Add a view for the data" section, where a more elegant view is created, I can no longer see my sample contacts displayed, though I do get the form for creating a new contact.  I believe the problem is in the HTML code below, though I copied it directly from the tutorial so I can't see where a problem might be.  If you can help, that would be great.  Thank you.

<ul id="contacts" data-bind="foreach: contacts">
    <li class="ui-widget-content ui-corner-all">
        <h1 data-bind="text: Name" class="ui-widget-header"></h1>
        <div><span data-bind="text: $data.Address ||'Address?'"></span></div>
        <div>
            <span data-bind="text: $data.City || 'City?'"></span>
            <span data-bind="text: $data.State || 'State?'"></span>
            <span data-bind="text: $data.Zip || 'Zip?'"></span>
        </div>
        <div data-bind="if: $data.Email"><a data-bind="attr: { href: 'mailto:' + Email }, text: Email"></a></div>
        <div data-bind="ifnot: $data.Email"><span>Email?</span></div>
        <div data-bind="if $data.Twitter"><a data-bind="attr: { href: 'http://twitter.com/' + Twitter }, text: '@@' + Twitter"></a></div>
        <div data-bind="ifnot: $data.Twitter"><span>Twitter?</span></div>
        <p><a data-bind="attr: { href: Self }, click: $root.removeContact" class="removeContact ui-state-default ui-corner-all">Remove?</a></p>
    </li>
</ul>

Answer 1

Can  you check the lines of code just before that section of code. It appears that we are having a rendering error in the code sample.  &lt;/script&gt; should be </script>

    ko.applyBindings(new ContactsViewModel());
&lt;/script&gt;


}


<ul id="contacts" data-bind="foreach: contacts">
    <li class="ui-widget-content ui-corner-all">
        <h1 data-bind="text: Name" class="ui-widget-header"></h1>
        <div><span data-bind="text: $data.Address ||

---

Don Glover: AzureDocGuy

Answer 2

Thank you for your response.  I did notice that earlier and changed it.  Here is the code from my Scripts section, in case that is helpful:

@section Scripts {
    @Scripts.Render("~/bundles/knockout")
    <script type="text/javascript">
        function ContactsViewModel() {
            var self = this;
            self.contacts = ko.observableArray([]);
            self.addContact = function () {
                $.post("api/contacts", $("#addContact").serialize(), function (value) {
                    self.contacts.push(value);
                },
                "json");
            }
            self.removeContact = function (contact) {
                $ajax({
                    type: "DELETE",
                    url: contact.Self,
                    success: function () {
                        self.contacts.remove(contact);
                    }
                });
            }

            $.getJSON("api/contacts", function (data) {
                self.contacts(data);
            });
        }
        ko.applyBindings(new ContactsViewModel());
    </script>
}

Answer 3

I think I have identified the error. The instructions are not explicit enough for the final step.

11. Open Global.asax file and add the following line to the Appplication_Start method.

WebApiConfig.Configure(GlobalConfiguration.Configuration);

The WebApiConfig statement needs to be added  before the

AreaRegistration.RegisterAllAreas();

statement.

The resulting code should read as follows

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            WebApiConfig.Configure(GlobalConfiguration.Configuration);

            AreaRegistration.RegisterAllAreas();

            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
  
        }
    }

---

Don Glover: AzureDocGuy