Move html to cshtml for backbone.js in ASP.NET MVC 3

If you download the tutorial for backbone.js part 1 here http://net.tutsplus.com/tutorials/javascript-ajax/build-a-contacts-manager-using-backbone-js-part-1/ you will see the UI is using html file, with html extension of course.

 

You can create a new MVC3 web application using ASP.NET MVC 3 Web Application.

 

1. Add the following code into HomeController.cs.

 

publicActionResult Contact()

{

  return View();

}

 

2. Right click the Contact() area in the HomeController and choose Add View.

Contact

 

3. You will now see Contact.cshtml in the View folder.

 

4. Paste the following code to the Contact.cshtml after the } .

 

<div>

    <metacharset=”UTF-8″/>

    <title>Backbone.js Web App</title>

  

  <linkhref=”../../Content/screen.css”rel=”stylesheet”type=”text/css”/>

 

</div>

 

<div>

    <divid=”contacts”></div>

    <scriptid=”contactTemplate”type=”text/template”>

        <img src=”<%= photo %>” alt=”<%= name %>” />

        <h1><%= name %><span><%= type %></span></h1>

        <div><%= address %></div>

        <dl>

            <dt>Tel:</dt><dd><%= tel %></dd>

            <dt>Email:</dt><dd><a href=”mailto:<%= email %>”><%= email %></a></dd>

        </dl>

    </script>

    <scriptsrc=”../../Scripts/jquery-1.7.1.min.js”></script>

    <scriptsrc=”../../Scripts/json2.js”></script>

    <scriptsrc=”../../Scripts/underscore-min.js”></script>

    <scriptsrc=”../../Scripts/backbone-min.js”></script>

  <scriptsrc=”../../Scripts/app.js”type=”text/javascript”></script>

 

</div>

 

5. Make sure you have all the js libraries such as jquery-1.7.1.min.js.

6. app.js is your JQuery and not the library.

(function ($) {

 

    //demo data

    var contacts = [

        { name: “Contact 1”, address: “1, a street, a town, a city, AB12 3CD”, tel: “0123456789”, email: “anemail@me.com”, type: “family” },

        { name: “Contact 2”, address: “1, a street, a town, a city, AB12 3CD”, tel: “0123456789”, email: “anemail@me.com”, type: “family” },

        { name: “Contact 3”, address: “1, a street, a town, a city, AB12 3CD”, tel: “0123456789”, email: “anemail@me.com”, type: “friend” },

        { name: “Contact 4”, address: “1, a street, a town, a city, AB12 3CD”, tel: “0123456789”, email: “anemail@me.com”, type: “colleague” },

        { name: “Contact 5”, address: “1, a street, a town, a city, AB12 3CD”, tel: “0123456789”, email: “anemail@me.com”, type: “family” },

        { name: “Contact 6”, address: “1, a street, a town, a city, AB12 3CD”, tel: “0123456789”, email: “anemail@me.com”, type: “colleague” },

        { name: “Contact 7”, address: “1, a street, a town, a city, AB12 3CD”, tel: “0123456789”, email: “anemail@me.com”, type: “friend” },

        { name: “Contact 8”, address: “1, a street, a town, a city, AB12 3CD”, tel: “0123456789”, email: “anemail@me.com”, type: “family” }

    ];

 

    //define product model

    var Contact = Backbone.Model.extend({

        defaults: {

            photo: “/img/placeholder.png”

        }

    });

 

    //define directory collection

    var Directory = Backbone.Collection.extend({

        model: Contact

    });

 

    //define individual contact view

    var ContactView = Backbone.View.extend({

        tagName: “article”,

        className: “contact-container”,

        template: $(“#contactTemplate”).html(),

 

        render: function () {

            var tmpl = _.template(this.template);

           

            $(this.el).html(tmpl(this.model.toJSON()));

            returnthis;

        }

    });

 

    //define master view

    var DirectoryView = Backbone.View.extend({

        el: $(“#contacts”),

 

        initialize: function () {

            this.collection = new Directory(contacts);

            this.render();

        },

 

        render: function () {

            var that = this;

            _.each(this.collection.models, function (item) {

                that.renderContact(item);

            }, this);

        },

 

        renderContact: function (item) {

            var contactView = new ContactView({

                model: item

            });

            this.$el.append(contactView.render().el);

        }

    });

 

    //create instance of master view

    var directory = new DirectoryView();

 

} (jQuery));

When you run your application with /home/Contact at the back you should see the result.

You can also download a single solution from http://skydrive.live.com. The sample file name is MvcAppBackbone.rar My MSN ID is chanmmn@hotmail.com.

Advertisements

About chanmingman

Since March 2011 Microsoft Live Spaces migrated to Wordpress (http://www.pcworld.com/article/206455/Microsoft_Live_Spaces_Moves_to_WordPress_An_FAQ.html) till now, I have is over 1 million viewers. This blog is about more than 50% telling you how to resolve error messages, especial for Microsoft products. The blog also has a lot of guidance teaching you how to get stated certain Microsoft technologies. The blog also uses as a help to keep my memory. The blog is never meant to give people consulting services or silver bullet solutions. It is a contribution to the community. Thanks for your support over the years. Ming Man is Microsoft MVP since year 2006. He is a software development manager for a multinational company. With 25 years of experience in the IT field, he has developed system using Clipper, COBOL, VB5, VB6, VB.NET, Java and C #. He has been using Visual Studio (.NET) since the Beta back in year 2000. He and the team have developed many projects using .NET platform such as SCM, and HR based applications. He is familiar with the N-Tier design of business application and is also an expert with database experience in MS SQL, Oracle and AS 400.
This entry was posted in .Net and tagged . Bookmark the permalink.

One Response to Move html to cshtml for backbone.js in ASP.NET MVC 3

  1. DOT NET SPICE says:

    Reblogged this on DOT NET SPICE.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s