Click here to Skip to main content
13,096,798 members (91,957 online)
Click here to Skip to main content
Articles » Web Development » ASP.NET » Howto » Downloads

Stats

325.1K views
21.6K downloads
412 bookmarked
Posted 25 Dec 2011

MVC Techniques with jQuery, JSON, Knockout, and C#

, 2 Jan 2012
Developing an Order Entry application with MVC.
ADODataService
ADODataService.csproj.user
bin
Debug
ADODataService.dll
Release
obj
Debug
TempPE
Release
Properties
NorthwindApplicationServices
bin
Debug
ADODataService.dll
NorthwindApplicationServices.dll
NorthwindBusinessServices.dll
NorthwindDataAccessServices.dll
NorthwindDataModel.dll
NorthwindViewModel.dll
Release
NorthwindApplicationServices.csproj.user
obj
Debug
TempPE
Release
Properties
NorthwindBusinessServices
bin
Debug
ADODataService.dll
NorthwindBusinessServices.dll
NorthwindDataAccessServices.dll
NorthwindDataModel.dll
NorthwindViewModel.dll
Release
NorthwindBusinessServices.csproj.user
obj
Debug
TempPE
Release
Properties
NorthwindDataAccessServices
bin
Debug
ADODataService.dll
NorthwindDataAccessServices.dll
NorthwindDataModel.dll
Release
NorthwindDataAccessServices.csproj.user
obj
Debug
TempPE
Release
Properties
NorthwindDataModel
bin
Debug
NorthwindDataModel.dll
Release
NorthwindDataModel.csproj.user
obj
Debug
TempPE
Release
Properties
NorthwindViewModel
bin
Debug
NorthwindDataModel.dll
NorthwindViewModel.dll
Release
NorthwindViewModel.csproj.user
obj
Debug
TempPE
Release
Properties
NorthwindWebApplication
App_Data
bin
ADODataService.dll
EntityFramework.dll
Microsoft.Web.Infrastructure.dll
Microsoft.Web.Optimization.dll
NorthwindApplicationServices.dll
NorthwindBusinessServices.dll
NorthwindDataAccessServices.dll
NorthwindDataModel.dll
NorthwindViewModel.dll
NorthwindWebApplication.dll
NorthwindWebControls.dll
System.Web.Helpers.dll
System.Web.Mvc.dll
System.Web.Providers.dll
System.Web.Razor.dll
System.Web.WebPages.Deployment.dll
System.Web.WebPages.dll
System.Web.WebPages.Razor.dll
Content
Images
DownArrow.gif
icon-calendar.gif
icon-delete.gif
icon-floppy.gif
icon-pencil-x.gif
icon-pencil.gif
Search3.gif
UpArrow.gif
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
Controllers
Global.asax
Helpers
Images
accent.png
aspNetHome.png
bullet.png
facebook.png
findHosting.png
heroAccent.png
NuGetGallery.png
orderedListOne.png
orderedListThree.png
orderedListTwo.png
Search.gif
twitter.png
windowsLive.png
Models
NorthwindWebApplication.csproj.user
obj
Debug
TempPE
Properties
Scripts
Views
Account
Home
Orders
Products
Shared
NorthwindWebControls
bin
Debug
NorthwindWebControls.dll
Release
obj
Debug
TempPE
Properties
packages
AspNetMvc.4.0.10906.0
AspNetMvc.4.0.10906.0.nupkg
lib
net40
System.Web.Mvc.dll
AspNetWebPagesCore.2.0.10906.0
AspNetWebPagesCore.2.0.10906.0.nupkg
lib
net40
System.Web.Helpers.dll
System.Web.Razor.dll
System.Web.WebPages.Deployment.dll
System.Web.WebPages.dll
System.Web.WebPages.Razor.dll
EntityFramework.4.1.10331.0
EntityFramework.4.1.10331.0.nupkg
lib
net40
EntityFramework.dll
jQuery.1.6.2
Content
Scripts
jQuery.1.6.2.nupkg
jQuery.Ajax.Unobtrusive.1.0
Content
Scripts
jQuery.Ajax.Unobtrusive.1.0.nupkg
jQuery.UI.Combined.1.8.11
Content
Content
themes
base
images
ui-bg_flat_0_aaaaaa_40x100.png
ui-bg_flat_75_ffffff_40x100.png
ui-bg_glass_55_fbf9ee_1x400.png
ui-bg_glass_65_ffffff_1x400.png
ui-bg_glass_75_dadada_1x400.png
ui-bg_glass_75_e6e6e6_1x400.png
ui-bg_glass_95_fef1ec_1x400.png
ui-bg_highlight-soft_75_cccccc_1x100.png
ui-icons_222222_256x240.png
ui-icons_2e83ff_256x240.png
ui-icons_454545_256x240.png
ui-icons_888888_256x240.png
ui-icons_cd0a0a_256x240.png
Scripts
jQuery.UI.Combined.1.8.11.nupkg
jQuery.Validation.1.8
Content
Scripts
jQuery.Validation.1.8.nupkg
jQuery.Validation.Unobtrusive.1.0
Content
Scripts
jQuery.Validation.Unobtrusive.1.0.nupkg
knockoutjs.1.2.9.0
Content
Scripts
knockoutjs.1.2.9.0.nupkg
Microsoft.Web.Optimization.0.1
lib
net40
Microsoft.Web.Optimization.dll
Microsoft.Web.Optimization.0.1.nupkg
MicrosoftWebInfrastructure.1.0.0.0
lib
net40
Microsoft.Web.Infrastructure.dll
MicrosoftWebInfrastructure.1.0.0.0.nupkg
Modernizr.2.0.6
Content
Scripts
Modernizr.2.0.6.nupkg
System.Web.Providers.1.0.1
content
web.config.transform
EULA.rtf
lib
Net40
System.Web.Providers.dll
System.Web.Providers.1.0.1.nupkg
SQLScript
using System;
using System.Collections.Generic;
using System.Collections;
using System.Linq;
using System.Text;

namespace NorthwindWebControls
{
    
    public class NorthwindDataGrid
    {
        public string SortExpression { get; set; }
        public string SortDirection { get; set; }
        public int CurrentPageNumber { get; set; }
        public int TotalPages { get; set; }
        public int TotalRecords { get; set; }
        public string Title { get; set; }
        public Boolean ReturnStatus { get; set; }
        public string RowSelectionFunction { get; set; }
        public string AjaxFunction { get; set; }
        
        private string ControlName { get; set; }

        public SortedList columns;
        public SortedList rows;
        public List<Column> rowColumns;

        private int rowIndex;
        private int columnIndex;

        public TableStyle Style;

        public NorthwindDataGrid(string controlName)
        {
            columns = new SortedList();
            rows = new SortedList();
            rowIndex = 0;
            columnIndex = 0;
            TotalPages = 0;
            TotalRecords = 0;
            ReturnStatus = true;
            Style = new TableStyle();
            ControlName = controlName;
        }

        public class TableStyle
        {
            public string Width { get; set; }
        }

        public class Column
        {
            public int ColumnIndex { get; set; }
            public string ColumnName { get; set; }
            public string ColumnValue { get; set; }
            public string HeaderText { get; set; }
            public string TextAlign { get; set; }
            public string Width { get; set; }
            public Boolean Selectable { get; set; }

        }

        public void AddRow()
        {
            rowIndex++;
            rowColumns = new List<Column>();
        }

        public void PopulateRow(string columnName, string columnValue, Boolean selectable)
        {
            Column currentColumn = new Column();
            currentColumn.ColumnName = columnName;
            currentColumn.ColumnValue = columnValue;
            currentColumn.Selectable = selectable;
            rowColumns.Add(currentColumn);

        }

        public void InsertRow()
        {
            rows.Add(rowIndex, rowColumns);
        }

        public void AddColumn(string columnName, string headerText, string width, string textAlign)
        {

            Column column = new Column();

            columnIndex++;

            column.ColumnIndex = columnIndex;
            column.ColumnName = columnName;
            column.HeaderText = headerText;
            column.Width = width;
            column.TextAlign = textAlign;

            columns.Add(columnIndex, column);

        }

        public string CreateControl()
        {
            StringBuilder gridBuilder = new StringBuilder();

            if (TotalPages > 0)
            {
                gridBuilder.Append(BuildGrid());
                gridBuilder.Append(BuildPager());
                gridBuilder.Append(GenerateJavascript());
            }

            return gridBuilder.ToString().Replace("ModelControlName", ControlName);

        }

        private string BuildGrid()
        {

            StringBuilder html = new StringBuilder();
            string javascript = "java" + "script:";

            string tableStyle = String.Empty;

            if (Style.Width != String.Empty)
                tableStyle = " style=\"width:" + Style.Width + ";\"";

            html.Append("<table class=\"DataGridHeader\"" + tableStyle + ">");
            html.Append("<tr><td>" + TotalRecords + "&nbsp;" + Title + "</td><td style=\"text-align: right\">");
            html.Append("Page&nbsp;" + CurrentPageNumber + "&nbsp;of&nbsp;" + TotalPages);
            html.Append("</td></tr></table>");
            html.Append("<table class=\"DataGrid\"" + tableStyle + "><tr>");

            foreach (DictionaryEntry column in columns)
            {
                NorthwindWebControls.NorthwindDataGrid.Column currentColumn = (NorthwindWebControls.NorthwindDataGrid.Column)column.Value;

                html.Append("<th style=\"width: " + currentColumn.Width + "; text-align: " + currentColumn.TextAlign + "\">");
                html.Append("<a style=\"text-decoration: underline; color: Black\" href=\"" + javascript + "ModelControlNameSortGrid('" + currentColumn.ColumnName + "');\">");
                html.Append(currentColumn.HeaderText + "</a>");

                if (SortExpression == currentColumn.ColumnName)
                {
                    if (SortDirection == "DESC")
                    {
                        html.Append("<img src=\"/Content/Images/UpArrow.gif\" style=\"vertical-align: middle\" alt=\"Asc\" />");
                    }
                    else
                    {
                        html.Append("<img src=\"/Content/Images/DownArrow.gif\" style=\"vertical-align: middle\" alt=\"Desc\" />");
                    }

                }

                html.Append("</th>");

            }

            html.Append("</tr>");

            if (ReturnStatus == true)
            {
                int i = 0;
                foreach (DictionaryEntry row in rows)
                {
                    string colorCode = i++ % 2 == 0 ? "White" : "WhiteSmoke";
                    html.Append("<tr style=\"height:25px; color:Black; background-color:" + colorCode + "\">  ");

                    List<NorthwindWebControls.NorthwindDataGrid.Column> rowColumns = (List<NorthwindWebControls.NorthwindDataGrid.Column>)row.Value;

                    foreach (NorthwindWebControls.NorthwindDataGrid.Column column in rowColumns)
                    {

                        if (column.Selectable == true)
                        {
                            html.Append(" <td>");
                            html.Append(" <a href=\"" + javascript + RowSelectionFunction + "('" + column.ColumnValue + "');\">" + column.ColumnValue + "</a>");
                            html.Append(" </td>");
                        }
                        else
                        {
                            html.Append(" <td> " + column.ColumnValue);
                            html.Append(" </td>");
                        }

                    }

                    html.Append("</tr>");

                }

            }

            html.Append("</table>");

            return html.ToString();

        }

        private string BuildPager()
        {
            StringBuilder html = new StringBuilder();
            string javascript = "java" + "script:";

            if (TotalPages == 0) return String.Empty;

            html.Append(" <div class=\"Pager\">   ");

            if (CurrentPageNumber == 1)
            {
                html.Append(" <div style=\"float:left;  width:70px\"><<&nbsp;First</div> ");
            }
            else
            {
                html.Append(" <div style=\"float:left;  width:70px\"><a style=\"text-decoration:none\" href=\"" + javascript + "ModelControlNameFirstPage();\"><<&nbsp;First</a></div> ");
            }

            if (CurrentPageNumber == 1)
            {
                html.Append(" <div style=\"float:left;  width:70px\">< Prev</div> ");
            }
            else
            {
                html.Append(" <div style=\"float:left;  width:70px\"><a style=\"text-decoration:none\" href=\"" + javascript + "ModelControlNamePreviousPage();\"><&nbsp;Prev</a></div>  ");
            }

            if (CurrentPageNumber == TotalPages)
            {
                html.Append(" <div style=\"float:left;  width:70px\">Next ></div> ");
            }
            else
            {
                html.Append(" <div style=\"float:left;  width:70px\"><a style=\"text-decoration:none\" href=\"" + javascript + "ModelControlNameNextPage();\">Next ></a></div> ");
            }

            if (CurrentPageNumber == TotalPages)
            {
                html.Append(" <div style=\"float:left;  width:70px\">Last >></div> ");
            }
            else
            {
                html.Append(" <div style=\"float:left;  width:70px\"><a style=\"text-decoration:none\" href=\"" + javascript + "ModelControlNameLastPage();\">Last >></a></div> ");
            }

            html.Append(" </div>  <div style=\"clear:both;\"></div>     ");

            return html.ToString();

        }

        private string GenerateJavascript()
        {

            StringBuilder html = new StringBuilder();

            html.Append("<script language='javascript' type='text/javascript'> ");

            html.Append(" function ModelControlNameNextPage() { ");
            html.Append("    var currentPageNumber = parseInt($(\"#ModelControlNameCurrentPageNumber\").val()) + 1; ");
            html.Append("    $(\"#ModelControlNameCurrentPageNumber\").val(currentPageNumber); ");
            html.Append("    ModelControlNameExecuteRequest(); ");
            html.Append(" } ");

            html.Append("function ModelControlNamePreviousPage() { ");
            html.Append("    var currentPageNumber = parseInt($(\"#ModelControlNameCurrentPageNumber\").val()) - 1; ");
            html.Append("    $(\"#ModelControlNameCurrentPageNumber\").val(currentPageNumber); ");
            html.Append("    ModelControlNameExecuteRequest(); ");
            html.Append(" } ");

            html.Append(" function ModelControlNameLastPage() { ");
            html.Append("    var currentPageNumber = $(\"#ModelControlNameTotalPages\").val(); ");
            html.Append("    $(\"#ModelControlNameCurrentPageNumber\").val(currentPageNumber);  ");
            html.Append("    ModelControlNameExecuteRequest(); ");
            html.Append(" } ");

            html.Append(" function ModelControlNameFirstPage() { ");
            html.Append("    $(\"#ModelControlNameCurrentPageNumber\").val(\"1\");    ");
            html.Append("    ModelControlNameExecuteRequest(); ");
            html.Append(" } ");

            html.Append(" function ModelControlNameSearch() { ");
            html.Append("    $(\"#ModelControlNameCurrentPageNumber\").val(\"1\"); ");
            html.Append("    $(\"#ModelControlNameSortDirection\").val(\"\"); ");
            html.Append("    $(\"#ModelControlNameSortExpression\").val(\"\"); ");
            html.Append("    ModelControlNameExecuteRequest(); ");
            html.Append(" } ");

            html.Append(" function ModelControlNameSortGrid(sortExpression) { ");
            html.Append("    if ($(\"#ModelControlNameSortExpression\").val() == sortExpression) { ");
            html.Append("        if ($(\"#ModelControlNameSortDirection\").val() == \"ASC\") ");
            html.Append("            $(\"#ModelControlNameSortDirection\").val(\"DESC\"); ");
            html.Append("        else ");
            html.Append("            $(\"#ModelControlNameSortDirection\").val(\"ASC\"); ");
            html.Append("    } ");
            html.Append("    else { ");
            html.Append("        $(\"#ModelControlNameSortDirection\").val(\"ASC\"); ");
            html.Append("    } ");

            html.Append("    $(\"#ModelControlNameSortExpression\").val(sortExpression); ");
            html.Append("    $(\"#ModelControlNameCurrentPageNumber\").val(\"1\"); ");

            html.Append("    ModelControlNameExecuteRequest(); ");
            html.Append(" } ");

            html.Append(" function ModelControlNameExecuteRequest() { ");
            html.Append( AjaxFunction + "($(\"#ModelControlNameCurrentPageNumber\").val(),  $(\"#ModelControlNameSortExpression\").val(), $(\"#ModelControlNameSortDirection\").val()); ");
            html.Append(" } ");

            html.Append("   </script> ");

            html.Append("  <input id=\"ModelControlNameCurrentPageNumber\" name=\"ModelControlNameCurrentPageNumber\" type=\"hidden\" value=\"" + CurrentPageNumber + "\" />   ");
            html.Append("  <input id=\"ModelControlNameTotalPages\" name=\"ModelControlNameTotalPages\" type=\"hidden\" value=\"" + TotalPages + "\" />   ");
            html.Append("  <input id=\"ModelControlNameSortExpression\" name=\"ModelControlNameSortExpression\" type=\"hidden\" value=\"" + SortExpression + "\" />    ");
            html.Append("  <input id=\"ModelControlNameSortDirection\" name=\"ModelControlNameSortDirection\" type=\"hidden\" value=\"" + SortDirection + "\" />   ");

            return html.ToString();

        }


    }
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mark J. Caplin
Software Developer Caplin Systems
United States United States
Mark Caplin has specialized in Information Technology solutions for the past 30 years. Specializing in full life-cycle development projects for both enterprise-wide systems and Internet/Intranet based solutions.

For the past fifteen years, Mark has specialized in the Microsoft .NET framework using C# as his tool of choice. For the past three years Mark has been implementing Single Page Applications using the Angular platform.

Mark currently is the Chief Solutions Architect at Joey Software Solutions, Inc. Visit Joey Software at www.joeysoftwaresolutions.com.

When not coding, Mark enjoys playing tennis, listening to U2 music, watching Miami Dolphins football and watching movies in Blu-Ray technology.

In between all this, his wife of over 25 years, feeds him well with some great home cooked meals.

...

You may also be interested in...

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170813.1 | Last Updated 2 Jan 2012
Article Copyright 2011 by Mark J. Caplin
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid