Chalaki Systems

Training About
« Older posts

How to design Tag based hierarchical categories, manage them using ASP.NET, EF, MVC, View Models

By admin | Published: November 21, 2014

If you used wordpress, you will notice how it lets you assign categories to your posts. These categories or Tags are hierarchical and nested. One can assign one or more of these categories to a post (article). Here I’ll show you how to create such functionality and apply that to Questions inside a Quiz.

WordPress Categories

WordPress Categories

The Schema

In this example we will see how we can apply the Tags functionality to a Quiz taking website where you have many questions in the database. The Tags (Categories) are assigned to Questions and are of Many to Many (M:M) relationship with Question objects. In our database we will have a table for Questions, a table for Tags and a table called Question_Tags containing the many to many relationship between questions and Tags. Also the Tags table contains ParentTagId foreign key to enable parent-child relationship among the tags. This schema will accommodate multiple hierarchical levels of Tags.  For the top level tags, the ParentTagId will be null.

Questions Tags Schema

Questions Tags Schema

We will use Microsoft ASP.NET MVC 5.2.2 along with Entity framework 6.1.1. We will be creating Model classes for Questions, Tags and Question_Tags. We’ll also create View Model classes: QuestionVM, TagVM to pass it onto our Razor Views.

Model Classes

The Question class which represents the Questions table is as follows;

C#
1
2
3
4
5
6
7
8
9
10
11
public class Question {
public int QuestionId { get; set; }
public string Title { get; set; }
public string Content { get; set; } ....
public virtual List Question_Tags { get; set; }
public void CopyFrom(QuestionVM qvm) {
QuestionTypeId = qvm.QuestionTypeId; Title = qvm.Title;
.....
Content = qvm.Content; OwnerId = qvm.OwnerId;
}
}

Our Tag class is as follows

C#
1
2
3
4
5
6
7
8
public class Tag {
public int TagId { get; set; }
public int? ParentTagId { get; set; }
public string TagName { get; set; }
public virtual List Question_Tags { get; set; }
public virtual Tag ParentTag { get; set; }
public virtual List ChildTags { get; set; }
}

Question_Tag class which represents a M:M relationship is as follows:

C#
1
2
3
4
5
6
7
8
9
public class Question_Tag {
 
public int Id { get; set; }
public int QuestionId { get; set; }
public int TagId { get; set; }
 
public virtual Question Question { get; set; }
public virtual Tag Tag { get; set; }
}

Read More »

Posted in ASP.NET | Tagged ASP.NET, C#, MVC, Tag | Leave a comment

Two ways to render MVC3 Partial Views: Client side Javascript or server side html helper

By admin | Published: May 10, 2012

AS.NET MVC3 Partial Views

We learned a great deal about the Partial Views in my post Fundamentals of MVC Partial Views. In this post I’ll show you how to create a partial view in a Visual Studio MVC 3 project and how to load the partial view inside a regular view using the following two methods:

  1. Server side using Html.Partial() helper method
  2. Client side using jQuery load() method into an empty div element inside a regular view

Step 1. Create a MVC project called ChalakiPartialViews

I’ll be using C# and Razor views for this project. Start with creating new C# MVC3 project. You can also use VB if you wish. The solution, project and the related files are created in their default folder structure.

Step 2. Create the Book model

Use the supplied books.sdf SQL compact db file and create a Book Model to match the Books table.

1
2
3
4
5
6
7
8
9
10
11
12
13
namespace ChalakiPartialViews.Models
{
    public class Book
     {
        public int ID { get; set; }
        public string Title { get; set; }
        public string Memo { get; set; }
    }
    public class BookDBContext : DbContext
    {
        public DbSet<Book> Books { get; set; }
    }
}

The connection string points to the Books.sdf as shown:

1
2
3
<add name="BookDBContext"
    connectionString="Data Source=|DataDirectory|Books.sdf"
    providerName="System.Data.SqlServerCe.4.0"/>

Read More »

Posted in ASP.NET, MVC, Views | Tagged ASP.NET, Javascript, MVC3, Partial, Partial Views, RenderPartial | 1 Response

How to Bind a DropDownList with a EditItemTemplate in the GridView

By admin | Published: May 1, 2012

ASP.NET GridViews are very handy to display data from a database table, view or a select statement that may contain joined tables. By default the gridview provides the fields in the boundfield format. The boundfields are fileds that have fixed GUI type and an associated datafield.

1
<asp:BoundField DataField="state" HeaderText="State" SortExpression="state" />

Convert a asp:BoundField to a asp:TemplateField

In order to change the GUI of the boundfield, we need to first convert this bound field to a TemplateField. Open the aspx file in design mode and click on the arrow on the top right corner of the GridView. You will see a menu and choose “Edit Columns”

Edit Columns for the asp:GridView

Read More »

Posted in ASP.NET, Data Access, GridView | 2 Responses

Fundamentals of ASP.NET MVC 3 Partial Views

By admin | Published: April 2, 2012

ASP.NET MVC Partial Views are similar to web user controls available in ASP.NET WebForms. They are reusable components that can be plugged into regular MVC views. A header or footer or a stock ticker is a good example of a partial view as it can be programmed into a Partial view and be used across many regular views. The web user controls are defined in .ascx files where as the partial views of MVC3 can be defined either in .aspx or .cshtml Razor views.

The partial views are similar to  regular MVC views in that:

  • Partial views can be tightly bound to a Model
  • Partial views can use a Layout
  • Partial Views can be defined in aspx or Razor
  • Have access to ViewBag and Model

The partial views are different from web user controls in that

  • ASP.NET MVC3 partial views behave similarly in theory to web user controls, syntactically and functionally, the two behave differently.
  • Web user controls use ViewState to preserve state information. Partial Views do not have any such viewstate
  • Web user controls can PostBack since they are part of a form. Partial views may or may not contain a form.
  • Events can be handled for the web user controls. MVC partial views do not use any event handling.
  • Like ASP.NET web user controls, partial views can bind to the models
  • Like asp.net web user controls, partial views can share data with other components.

How to render a Partial view

Server Side

  • Using @Html.Partial(“partialviewname”) which returns a string containing the HTML output of the Partial View
  • Using @{ Html.RenderPartial (“partialviewname”); } which returns a void but sends output HTML of the partial view to the response stream directly

Client Side using AJAX, Javascript or jQuery

  • Using jQuery

1
$("#divid").load("/Book/GetPartialView");

  • Using document.open(URL) and setting the innerHTML property inside javascript or AJAX

1
2
var partialViewHtml = document.open('/Book/GetPartialView');
document.getElementById("divid").innerHTML = partialViewHtml ;

How to create a partial view?

  • Partial views, like regular views are defined in .cshtml files.
  • These files reside in /Views/Shared/ folder as opposed to /Views/Controller folder used by the regular views.

Read More »

Posted in ASP.NET, MVC, Views | Tagged ASP.NET, MVC3, Partial Views | 1 Response

How to program MSAGL (GLEE) to create hierarchical graph layouts

By admin | Published: July 15, 2011

MSAGL (Microsoft Automatic Graph Layout) is a .NET library and tools created by Microsoft Research for creating hierarchical graphs, viewing them and saving them to bitmaps. MSAGL is built on the principle of the Sugiyama scheme. MSAGL can be used to create layered or hierarchical graph layouts. These layered graphs can be used to represent data with some flow of information in a graphical format. A flow chart graph of a algorithm, a state machine or a C# class or business management tree, manufacturing process or network analysis as well as phylogenetic trees which are used in bioinformatics research can be graphically represented using one of these graphs. The MSAGL library is also called the MS GLEE library.

Automatic Graph Layout includes three integrated components:

  • An automatic layout engine that enables creating hierarchical graphs
  • A drawing layer that helps you modify the attributes of the graphical components, such as the shape of nodes and the style of edges.
  • A Windows-based viewer that uses the engine and drawing layer to create interactive graphs.

Creating a hierarchical graph takes just few steps: Read More »

Posted in ASP.NET, Charting, Windows Forms | Tagged C#, GLEE, Graph Layout, MSAGL, Visual C# Express 2010 | 7 Responses

2 Easy steps to learn ASP.NET Routing, map URLs to aspx and pass variables

By Raja S | Published: April 5, 2011

It is becoming extremely important now a days to use simple URLs  without showing the .aspx extention and also hiding the Query String parameters such as page.aspx?name1=value1&name2=value2. SEO experts swear that simple canonical urls such as mysite.com/CountryName/CityName/CompanyName/ are much better in terms of search engine friendliness than mysite.com/getlisting.aspx?Country=CountryName&City=CityName&ampCompany=CompanyName

We can clearly see that the former URL is much better even for human beings as they are easy to remember and also show that the site is well structured, which is very important for huge sites that contain tens of thousands of pages or page variations.

In this post I am going to show you how to use ASP.NET Routes to map simple canonical form URLs to aspx pages and pass in parameters using ASP.NET 4.0 Routing functionality. Read More »

Posted in ASP.NET, Routing | Tagged ASP.NET, C#, Canonical, Routes, RouteTable, URL Mapping, Visual Studio 2010 SP1 | 5 Responses

4 Simple steps to learn SqlCeDataAdapater, SqlCeDataSet to modify data in SQL Server CE tables

By Raja S | Published: March 18, 2011

You already know, from my previous blog  Using ADO.NET SqlCeCommand and SqlCeDataReader to select data from SQL Server Compact how to SELECT data for ReadOnly using SqlCeDataReader Object. You can’t update the data using SqlCeDataReader object.  Instead you will need to use SqlCeDataAdapter and SqlCeDataSet objects if you have to make any changes and save the data back to the Database. In this post, I will show you how to use SqlCeDataAdapter and SqlCeDataSet objects  in System.Data.SqlServerCe Namespace to edit/delete/update a SQL Server CE database tables in ASP.NET 4.0 web forms application.

Read More »

Posted in ASP.NET, Data Access, SQL Server Compact | Tagged .NET, ADO.NET, ASP.NET, C#, Data Access, SQL Server Compact | 5 Responses

How to select data from SQL Server Compact CE using ADO.NET SqlCeCommand and SqlCeDataReader Objects

By Raja S | Published: March 17, 2011

In this post, I will show you how to use some of the classes in System.Data.SqlServerCe Namespace to access a SQL Server CE database from a ASP.NET 4.0 web forms application.

The DLL that contains System.Data.SqlServerCe Namespace and all classes in that namespace is System.Data.SqlServerCe.dll. The System.Data.SqlServerCe namespace is the managed data provider for SQLServer CE. This namespace is a collection of classes that provide access to  SQL Server CE database. By using System.Data.SqlServerCe, you can create, manage, and synchronize  databases from a smart device or a computer. The classes include all the ADO.NET classes such as SqlCeConnection, SqlCeDataAdapter, SqlCeCommand, SqlCeDataReader.

Read More »

Posted in ASP.NET, Data Access, SQL Server Compact | Tagged .NET, ASP.NET, C#, Data Access, SQL Server Compact | 1 Response

4 Easy steps to use SQL Server Compact (CE) in Visual Studio 2010 Express SP1

By Raja S | Published: March 17, 2011

SQL Server Compact Edition is an embedded database that enables all functionality of SQL Server yet it is a simple and single file based. That means you don’t have to install the SQL Server. Simply copy the database file with .sdf extension and easily distribute it where ever you want to. Very useful in development environments where you can do all development, debug, test the application before moving to production where you are using SQL Server. If your data is not so big you can also use it in production environment instead of using MS Access.  Currently each sdf file can be up to 4Gb. Plenty of space to save tons of data. You can even run a real eCommerce store with 4Gb data. This will give easy entry point into SQL Server technologies and provide you with easy path to future upgrade to a full blown version of

Read More »

Posted in ASP.NET, Data Access, SQL Server Compact, Visual Studio 2010 SP1 | Tagged .NET, ADO.NET, ASP.NET, Data Access, Deployment, Entity Framework, SQL Server Compact | 8 Responses

Top 8 new features in Visual Studio 2010 Service Pack 1 for the ASP.NET developers

By Raja S | Published: March 9, 2011

Microsoft today released the latest version of its Visual Studio, Visual Studio Express and Visual Web Developer products. Its called Visual Studio 2010 Service Pack 1 (SP1). We at Chalaki have evaluated this product and very happy with the new enhancements. I am listing all the new features available for a web developer in this release.

IIS Express support

Visual Studio 2010 SP1 enables you to use the Internet Information Services (IIS) 7.5 Express as the local hosting server for the website and Web Application Projects.  IIS 7 Express can run with minimal resources and

Read More »

Posted in Visual Studio 2010 SP1 | Tagged ASP.NET, CSS3, Deployment, HTML5, IIS Express 7.5, SQL Server Compact, Visual Studio 2010 SP1, Web Platform Installer | 1 Response
« Older posts
  • Tags

    .NET ADO.NET ascx ASP.NET ASP.NET Performance asp:Content asp:ContentPlaceHolder C# Cache Canonical CGI Cookies CSS3 Data Access Data Cache Deployment Entity Framework GET HTML5 HTTP HTTP Headers IIS IIS Express 7.5 Install Master Page MVC3 Output Cache Partial Views Port POST Query String Reusable Routes RouteTable SQL Server Compact URL Mapping User Control VaryByCustom VaryByParam ViewState Virtual Directory Visual C# Express 2010 Visual Studio 2010 SP1 Web Platform Installer Windows XP
  • Recent Posts

    • How to design Tag based hierarchical categories, manage them using ASP.NET, EF, MVC, View Models
    • Two ways to render MVC3 Partial Views: Client side Javascript or server side html helper
    • How to Bind a DropDownList with a EditItemTemplate in the GridView
    • Fundamentals of ASP.NET MVC 3 Partial Views
    • How to program MSAGL (GLEE) to create hierarchical graph layouts
  • Calendar

    February 2021
    M T W T F S S
    « Nov    
    1234567
    891011121314
    15161718192021
    22232425262728
Copyright 2005-2011. Privacy Policy.