Category Archives: MVC

FeedEk jQuery RSS, ATOM Feed Plugin in ASP.NET MVC


In this article, let’s see an example of jQuery’s one of the popular plugin – FeedEk.

About FeedEk jQuery Plugin

FeedEk is a jQuery RSS/ATOM Feed Reader/Importer/Parser. You can obtain feeds easily from any domain.

Example:

1. Create a new project, name it as “FeedEkPluginExample”.

2. Select the empty MVC template and click ok.

3. Download the FeedEk plugin here. Include the FeedEk files in the solution.

4. Now let’s add a controller and view. Right click on “Controllers” folder in the solution and select Add >> Controller, you will see following window.

Select MVC 5 Controller – Empty option and click on “Add” button.

5. Name it as “HomeController” as shown in the following screen and click “Add”.

6. Now let’s add a view for this controller. Right click on “Views” folder in the solution and select Add >> View, you will see following window and click “Add”.

7. Include the following Javascript resources into _Layout.cshtml page’s <head> section.


<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/FeedEk/js/FeedEk.js"></script>

8. Include the FeedEk css file reference in Index.cshtml file.


<link href="~/Scripts/FeedEk/css/FeedEk.css" rel="stylesheet" />

9. Add a placeholder for the widget to your page.


<div id="divRss">
</div>

10. Add the following javascript that will populate the placeholder.


<script type="text/javascript">
$(function () {
$('#divRss').FeedEk({
FeedUrl: 'http://www.asp.net/rss/spotlight',
MaxCount: 5,
ShowDesc: true,
ShowPubDate: true,
DescCharacterLimit: 150,
TitleLinkTarget: '_blank'
});
});
</script>

There are different options which you can try. Take a look here for documentation.

11. Now if you run the application, you will see following output on the page

Live Demo

Source Code Download:

Github [Repository Link]

Box.com [Direct Download Link]

Advertisements

AngularJS – A Javascript MVC Framework


What is AngularJS?

AngularJS is a Javascript MVC framework created by Google to build properly architectured and maintainable web applications. It extends HTML into a more expressive and readable format. It decreases emphasis on directly handling DOM manipulation from the application logic, allowing for easier testing. It employs efficient two-way data binding and sensible MVC implementation, reducing the server load of applications.

Why AngularJS?

AngularJS is a MVC framework that enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML. It allows to declare dynamic views in web-applications. It also lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Now let’s have a closer look at all those features.

1. Expressions

Expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}. Expressions are processed by the $parse service.

For example, these are all valid expressions in angular:

2+2
7*10 | currency
user.name

2. Directives

Directives adds new tricks to HTML. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.

Angular comes with a built in set of directives which are useful for building web applications but can be extended such that HTML can be turned into a declarative domain specific language (DSL).

Jsfiddle Example

3. Data Binding

Data-binding in Angular web apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

ngModel Is a directive that tells Angular to do two-way data binding. It works together with input, select, textarea and even custom form controls that use NgModelController exposed by this directive.

4. Filters

In order to change the way your data are displayed in your page, AngularJS provides you with the filter mechanism.

e.g we can put the name in upper case with {{user.name | uppercase}} filter

You can also easily create your own filters.

5. Modules

In AngularJS, applications are structured in modules. A module can depend on other modules and a module can contain controllers, services, directives and filters.

jsfiddle Example

6. Scopes

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.

7. Controller

Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form without the usual boilerplate of updating the DOM, registering callbacks or watching model changes.

Related Videos

ASP.NET MVC Overview


The Model-View-Controller (MVC) architectural pattern separates an application into three main components namely the model, the view and the controller. The ASP.NET MVC framework is a very lightweight framework and it is also integrated with existing ASP.NET features such as master pages.

The MVC framework is defined in the System.Web.Mvc assembly.

MVC Components:

1. Model

They are part of application’s data domain. Often, model objects retrieve and store model state in a database.

2. View

They are the components that display the application’s user interface (UI). This UI is created from the model data.

3. Controller

They are the components that handle user interaction, work with the model, and ultimately select a view to render that displays UI.

In an MVC application, the view only displays information; the controller handles and responds to user input and interaction. For example, the controller handles query-string values, and passes these values to the model, which in turn might use these values to query the database.

Advantages:

1. Since application components are divided into 3 i.e the model, the view, and the controller, It makes it easier to manage complexity.

2. It does not use view state or server-based forms.

3. It enables you to design an application that supports a rich routing infrastructure.

4. It provides better support for test-driven development (TDD).

5. It is ideal for large teams of developers and for Web designers who need a high degree of control over the application behaviour.

Features:

1. Separation of application tasks (input logic, business logic, and UI logic), testability, and test-driven development (TDD). All core contracts in the MVC framework are interface-based and can be tested by using mock objects

2. An extensible and pluggable framework.

3. Extensive support for ASP.NET routing.

4. You can use existing ASP.NET features with the ASP.NET MVC framework, such as nested master pages, in-line expressions (<%= %>), declarative server controls, templates, data-binding, localization, and so on.

5. Support for existing ASP.NET features such as forms authentication and Windows authentication, membership and roles, output and data caching, session management etc.

What is the future of ASP.NET and MVC?


There are lots of articles on the internet that will put some thoughts on “What is the future of ASP.NET?”

Some thoughts:

As a developer, do you know Silverlight? Yes/No ?

Few years back, Microsoft marketing team promoted it. They promoted it in such a way that developers thought Silverlight will be the next Adobe Flash. A very popular companies such as Netflix, Renault Megane, NBC etc developed their websites using Silverlight.

But Where is Silverlight today? What is the share of Silverlight today in the market? What is the trend?

Now what about upcoming things like HTML 5TypeScriptMVC etc.. etc..?

Back to the main point, what is the future of ASP.NET and MVC?

It is true that, there is a shift to MVC from ASP.NET web forms. ASP.Net MVC is on the rise and growing more popular everyday. Another reason, ASP.Net MVC is becoming very popular, since it can take advantage of all the fantastic features coming with HTML 5 as well as new client-side libraries with ease . But they are much harder to integrate in ASP.NET webForms than MVC.

As the technologies are advancing, things are getting better and better with every advancements. So it’s the trend which will lead us the way we develop the sites.

So I don’t think that a technology is coming that would replace everything, rather think that new improvements would be made in the existing technology and knowledge of current technology would help you adapt to those new changes.

What do you think the future of ASP.NET and MVC should be? Thumbs up, or thumbs down? Share your thoughts please.