Home » Source Code » Client Side Web Application Primer

Client Side Web Application Primer

nedjma24
2013-11-24 03:17:34
The author
View(s):
Download(s): 0
Point (s): 1 
Category Category:
Web FrameworkWeb Framework C SharpC#

Description

I plan to share my experiment with client side application and MVC backend. In this sample, as many other web site before I use many 3rd party libraries (hint: look at README / package list: EntityFramework (Extended), jQuery, Knockout, chosen, bootstrap, datatables). But I don’t plan to dwell much on them in this post. Instead I want to focus on how I use T4 Templates to generate strongly WebAPI server proxy in TypeScript and use Knockout to drive the UI. With a little bit extra on WebAPI and SQL.

This post is intended for web developer having basic to medium knowledge of MVC, JavaScript, jQuery.ajax(), TypeScript. I am not going to explain the whole application but just the challenging parts and the solutions I implemented. For the rest there is the source code.

My sample application (largely inspired from work needs) is a 3 pages application. A first page manage dynamic questionnaire (with dynamic groups of dynamic questions), a second page can answer those questionnaires and a third can query them.

Compatibility remark: this app has been tested on IE 8, IE 11, Chrome 30, Firefox 24


Sponsored links

File list

Tips: You can preview the content of files by clicking file names^_^
Name Size Date
.hgignore0.00 B2013-10-25|03:09
createDB.sql17.98 kB2013-11-02|09:24
01.97 kB
Questionaire.sln1.39 kB2013-11-02|10:37
01.97 kB
01.97 kB
BundleConfig.cs1.90 kB2013-11-01|17:14
FilterConfig.cs312.00 B2013-11-01|17:14
RouteConfig.cs614.00 B2013-11-01|17:14
WebApiConfig.cs621.00 B2013-11-02|10:47
01.97 kB
01.97 kB
bootstrap-theme.css16.80 kB2013-11-01|17:14
bootstrap-theme.min.css14.64 kB2013-11-01|17:14
bootstrap.css123.73 kB2013-11-01|17:14
bootstrap.min.css95.07 kB2013-11-01|17:14
chosen-sprite.png646.00 B2013-11-01|17:14
chosen-sprite@2x.png872.00 B2013-11-01|17:14
chosen.css13.27 kB2013-11-01|17:14
chosen.min.css11.36 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
01.97 kB
doc.css4.92 kB2013-11-01|17:14
shCore.css6.07 kB2013-11-01|17:14
shThemeDataTables.css3.18 kB2013-11-01|17:14
01.97 kB
arrow.jpg430.00 B2013-11-01|17:14
arrow.png1,011.00 B2013-11-01|17:14
extended.png1.16 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
01.97 kB
AutoFill.css493.00 B2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
doc.css4.92 kB2013-11-01|17:14
shCore.css6.07 kB2013-11-01|17:14
shThemeDataTables.css3.18 kB2013-11-01|17:14
01.97 kB
arrow.jpg430.00 B2013-11-01|17:14
arrow.png1,011.00 B2013-11-01|17:14
extended.png1.16 kB2013-11-01|17:14
01.97 kB
filler.png1.02 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
ColReorder.css351.00 B2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
doc.css4.92 kB2013-11-01|17:14
shCore.css6.07 kB2013-11-01|17:14
shThemeDataTables.css3.18 kB2013-11-01|17:14
01.97 kB
arrow.jpg430.00 B2013-11-01|17:14
arrow.png1,011.00 B2013-11-01|17:14
extended.png1.16 kB2013-11-01|17:14
01.97 kB
insert.png1.84 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
ColVis.css1.13 kB2013-11-01|17:14
ColVisAlt.css1.62 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
doc.css4.92 kB2013-11-01|17:14
shCore.css6.07 kB2013-11-01|17:14
shThemeDataTables.css3.18 kB2013-11-01|17:14
01.97 kB
arrow.jpg430.00 B2013-11-01|17:14
arrow.png1,011.00 B2013-11-01|17:14
extended.png1.16 kB2013-11-01|17:14
01.97 kB
button.png1.13 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
01.97 kB
doc.css4.92 kB2013-11-01|17:14
shCore.css6.07 kB2013-11-01|17:14
shThemeDataTables.css3.18 kB2013-11-01|17:14
01.97 kB
arrow.jpg430.00 B2013-11-01|17:14
arrow.png1,011.00 B2013-11-01|17:14
extended.png1.16 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
dataTables.scroller.css675.00 B2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
doc.css4.92 kB2013-11-01|17:14
shCore.css6.07 kB2013-11-01|17:14
shThemeDataTables.css3.18 kB2013-11-01|17:14
01.97 kB
arrow.jpg430.00 B2013-11-01|17:14
arrow.png1,011.00 B2013-11-01|17:14
extended.png1.16 kB2013-11-01|17:14
01.97 kB
loading-background.png1,013.00 B2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
TableTools.css9.30 kB2013-11-01|17:14
TableTools_JUI.css3.57 kB2013-11-01|17:14
01.97 kB
background.png944.00 B2013-11-01|17:14
collection.png1.14 kB2013-11-01|17:14
collection_hover.png1.17 kB2013-11-01|17:14
copy.png2.13 kB2013-11-01|17:14
copy_hover.png2.73 kB2013-11-01|17:14
csv.png1.57 kB2013-11-01|17:14
csv_hover.png1.81 kB2013-11-01|17:14
pdf.png4.22 kB2013-11-01|17:14
pdf_hover.png2.72 kB2013-11-01|17:14
print.png2.07 kB2013-11-01|17:14
print_hover.png2.18 kB2013-11-01|17:14
01.97 kB
collection.psd25.19 kB2013-11-01|17:14
copy102.27 kB2013-11-01|17:14
file_types.psd1.04 MB2013-11-01|17:14
printer.psd117.14 kB2013-11-01|17:14
xls.png1.60 kB2013-11-01|17:14
xls_hover.png2.01 kB2013-11-01|17:14
01.97 kB
copy_csv_xls.swf2.09 kB2013-11-01|17:14
copy_csv_xls_pdf.swf57.44 kB2013-11-01|17:14
01.97 kB
01.97 kB
demo_page.css1.72 kB2013-11-01|17:14
demo_table.css10.52 kB2013-11-01|17:14
demo_table_jui.css8.26 kB2013-11-01|17:14
jquery.dataTables.css4.45 kB2013-11-01|17:14
jquery.dataTables_themeroller.css4.45 kB2013-11-01|17:14
01.97 kB
back_disabled.png1.33 kB2013-11-01|17:14
back_enabled.png1.35 kB2013-11-01|17:14
back_enabled_hover.png1.34 kB2013-11-01|17:14
favicon.ico894.00 B2013-11-01|17:14
forward_disabled.png1.33 kB2013-11-01|17:14
forward_enabled.png1.35 kB2013-11-01|17:14
forward_enabled_hover.png1.35 kB2013-11-01|17:14
Sorting26.85 kB2013-11-01|17:14
sort_asc.png1.09 kB2013-11-01|17:14
sort_asc_disabled.png1.03 kB2013-11-01|17:14
sort_both.png1.11 kB2013-11-01|17:14
sort_desc.png1.10 kB2013-11-01|17:14
sort_desc_disabled.png1.02 kB2013-11-01|17:14
01.97 kB
glyphicons-halflings-regular.eot13.75 kB2013-11-01|17:14
glyphicons-halflings-regular.svg61.90 kB2013-11-01|17:14
glyphicons-halflings-regular.ttf28.82 kB2013-11-01|17:14
glyphicons-halflings-regular.woff16.06 kB2013-11-01|17:14
questionaire.css892.00 B2013-11-01|17:14
questionaire.less909.00 B2013-11-01|17:14
questionaire.min.css628.00 B2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
animated-overlay.gif1.70 kB2013-11-01|17:14
ui-bg_flat_0_aaaaaa_40x100.png180.00 B2013-11-01|17:14
ui-bg_flat_75_ffffff_40x100.png178.00 B2013-11-01|17:14
ui-bg_glass_55_fbf9ee_1x400.png120.00 B2013-11-01|17:14
ui-bg_glass_65_ffffff_1x400.png105.00 B2013-11-01|17:14
ui-bg_glass_75_dadada_1x400.png111.00 B2013-11-01|17:14
ui-bg_glass_75_e6e6e6_1x400.png110.00 B2013-11-01|17:14
ui-bg_glass_95_fef1ec_1x400.png119.00 B2013-11-01|17:14
ui-bg_highlight-soft_75_cccccc_1x100.png101.00 B2013-11-01|17:14
ui-icons_222222_256x240.png4.27 kB2013-11-01|17:14
ui-icons_2e83ff_256x240.png4.27 kB2013-11-01|17:14
ui-icons_454545_256x240.png4.27 kB2013-11-01|17:14
ui-icons_888888_256x240.png4.27 kB2013-11-01|17:14
ui-icons_cd0a0a_256x240.png4.27 kB2013-11-01|17:14
jquery-ui.css31.70 kB2013-11-01|17:14
jquery.ui.accordion.css840.00 B2013-11-01|17:14
jquery.ui.all.css292.00 B2013-11-01|17:14
jquery.ui.autocomplete.css322.00 B2013-11-01|17:14
jquery.ui.base.css771.00 B2013-11-01|17:14
jquery.ui.button.css2.48 kB2013-11-01|17:14
jquery.ui.core.css1.43 kB2013-11-01|17:14
jquery.ui.datepicker.css3.62 kB2013-11-01|17:14
jquery.ui.dialog.css1.27 kB2013-11-01|17:14
jquery.ui.menu.css1.42 kB2013-11-01|17:14
jquery.ui.progressbar.css618.00 B2013-11-01|17:14
jquery.ui.resizable.css1.18 kB2013-11-01|17:14
jquery.ui.selectable.css328.00 B2013-11-01|17:14
jquery.ui.slider.css1.28 kB2013-11-01|17:14
jquery.ui.spinner.css1.15 kB2013-11-01|17:14
jquery.ui.tabs.css1.29 kB2013-11-01|17:14
jquery.ui.theme.css17.11 kB2013-11-01|17:14
jquery.ui.tooltip.css375.00 B2013-11-01|17:14
01.97 kB
01.97 kB
animated-overlay.gif1.70 kB2013-11-01|17:14
ui-bg_flat_0_aaaaaa_40x100.png180.00 B2013-11-01|17:14
ui-bg_flat_75_ffffff_40x100.png178.00 B2013-11-01|17:14
ui-bg_glass_55_fbf9ee_1x400.png120.00 B2013-11-01|17:14
ui-bg_glass_65_ffffff_1x400.png105.00 B2013-11-01|17:14
ui-bg_glass_75_dadada_1x400.png111.00 B2013-11-01|17:14
ui-bg_glass_75_e6e6e6_1x400.png110.00 B2013-11-01|17:14
ui-bg_glass_95_fef1ec_1x400.png119.00 B2013-11-01|17:14
ui-bg_highlight-soft_75_cccccc_1x100.png101.00 B2013-11-01|17:14
ui-icons_222222_256x240.png4.27 kB2013-11-01|17:14
ui-icons_2e83ff_256x240.png4.27 kB2013-11-01|17:14
ui-icons_454545_256x240.png4.27 kB2013-11-01|17:14
ui-icons_888888_256x240.png4.27 kB2013-11-01|17:14
ui-icons_cd0a0a_256x240.png4.27 kB2013-11-01|17:14
jquery-ui.min.css25.01 kB2013-11-01|17:14
jquery.ui.accordion.min.css647.00 B2013-11-01|17:14
jquery.ui.autocomplete.min.css198.00 B2013-11-01|17:14
jquery.ui.button.min.css1.83 kB2013-11-01|17:14
jquery.ui.core.min.css924.00 B2013-11-01|17:14
jquery.ui.datepicker.min.css3.07 kB2013-11-01|17:14
jquery.ui.dialog.min.css1.02 kB2013-11-01|17:14
jquery.ui.menu.min.css1.05 kB2013-11-01|17:14
jquery.ui.progressbar.min.css463.00 B2013-11-01|17:14
jquery.ui.resizable.min.css924.00 B2013-11-01|17:14
jquery.ui.selectable.min.css210.00 B2013-11-01|17:14
jquery.ui.slider.min.css1.02 kB2013-11-01|17:14
jquery.ui.spinner.min.css792.00 B2013-11-01|17:14
jquery.ui.tabs.min.css849.00 B2013-11-01|17:14
jquery.ui.theme.min.css13.33 kB2013-11-01|17:14
jquery.ui.tooltip.min.css296.00 B2013-11-01|17:14
01.97 kB
QuestionaireApiController.cs12.38 kB2013-11-02|10:30
QuestionaireController.cs430.00 B2013-11-01|17:14
01.97 kB
enums.cs331.00 B2013-11-01|17:14
QAnswer.cs1.29 kB2013-11-01|17:14
QAnswerSet.cs1.08 kB2013-11-01|17:14
QCondition.cs1.39 kB2013-11-01|17:14
QGroup.cs1.36 kB2013-11-01|17:14
QGroupQuestion.cs918.00 B2013-11-01|17:14
QOption.cs1.08 kB2013-11-01|17:14
Question.cs2.46 kB2013-11-01|17:14
Questionaire.cs1.12 kB2013-11-01|17:14
QuestionaireEntities.Context.cs2.35 kB2013-11-01|17:14
QuestionaireEntities.Context.tt25.56 kB2013-11-01|17:14
QuestionaireEntities.cs433.00 B2013-11-01|17:14
QuestionaireEntities.Designer.cs779.00 B2013-11-01|17:14
QuestionaireEntities.edmx66.14 kB2013-11-01|17:14
QuestionaireEntities.edmx.diagram4.49 kB2013-11-01|17:14
QuestionaireEntities.tt28.16 kB2013-11-01|17:14
QuestionaireEntitiesEx.cs1.31 kB2013-11-01|17:14
QuestionaireGroup.cs926.00 B2013-11-01|17:14
SettingAll.cs895.00 B2013-11-01|17:14
SettingBool.cs745.00 B2013-11-01|17:14
SettingCaption.cs833.00 B2013-11-01|17:14
SettingDate.cs959.00 B2013-11-01|17:14
SettingList.cs745.00 B2013-11-01|17:14
SettingNumeric.cs905.00 B2013-11-01|17:14
SetttingAttachment.cs752.00 B2013-11-01|17:14
ToTSAttribute.cs1.09 kB2013-11-01|17:14
Utils.cs1.43 kB2013-11-01|17:14
Global.asax96.00 B2013-11-01|17:14
Global.asax.cs761.00 B2013-11-01|17:14
01.97 kB
01.97 kB
Common.d.ts3.36 kB2013-11-01|17:14
Common.js7.35 kB2013-11-03|15:54
Common.js.map8.65 kB2013-11-03|15:54
Common.ts7.80 kB2013-11-01|17:14
01.97 kB
Answer.js2.97 kB2013-11-03|15:54
Answer.js.map3.47 kB2013-11-03|15:54
Answer.ts2.51 kB2013-11-01|17:14
CodeToJSonData.js10.80 kB2013-11-03|15:54
CodeToJSonData.js.map10.73 kB2013-11-03|15:54
CodeToJSonData.ts19.79 kB2013-11-01|17:14
CodeToJSonData.tt3.68 kB2013-11-01|17:14
CodeToServerProxy.js10.29 kB2013-11-03|15:54
CodeToServerProxy.js.map9.55 kB2013-11-03|15:54
CodeToServerProxy.ts8.45 kB2013-11-02|11:24
CodeToServerProxy.tt5.45 kB2013-11-02|11:24
Manage.js230.00 B2013-11-03|15:54
Manage.js.map387.00 B2013-11-03|15:54
Manage.ts298.00 B2013-11-01|17:14
Query.js8.10 kB2013-11-03|15:54
Query.js.map10.08 kB2013-11-03|15:54
Query.ts7.81 kB2013-11-02|10:31
Questionaire.js15.88 kB2013-11-03|15:54
Questionaire.js.map18.49 kB2013-11-03|15:54
Questionaire.ts16.49 kB2013-11-03|15:26
T4Utils.t49.55 kB2013-11-02|11:24
packages.config2.90 kB2013-11-01|17:14
01.97 kB
AssemblyInfo.cs1.38 kB2013-11-01|17:14
Questionaire.csproj35.39 kB2013-11-03|12:58
01.97 kB
bootstrap.js59.04 kB2013-11-01|17:14
bootstrap.min.js27.08 kB2013-11-01|17:14
cb-ko-binding-chosen.js9.53 kB2013-11-01|17:14
chosen.jquery.js39.49 kB2013-11-01|17:14
chosen.jquery.min.js25.09 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
01.97 kB
doc.js2.60 kB2013-11-01|17:14
jquery.js211.76 kB2013-11-01|17:14
shBrushJScript.js1.61 kB2013-11-01|17:14
shCore.js15.80 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
01.97 kB
01.97 kB
01.97 kB
doc.js2.60 kB2013-11-01|17:14
jquery.js211.76 kB2013-11-01|17:14
shBrushJScript.js1.61 kB2013-11-01|17:14
shCore.js15.80 kB2013-11-01|17:14
01.97 kB
AutoFill.js20.25 kB2013-11-01|17:14
AutoFill.min.js9.21 kB2013-11-01|17:14
AutoFill.min.js.gz3.04 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
01.97 kB
01.97 kB
doc.js2.60 kB2013-11-01|17:14
jquery.js211.76 kB2013-11-01|17:14
shBrushJScript.js1.61 kB2013-11-01|17:14
shCore.js15.80 kB2013-11-01|17:14
01.97 kB
ColReorder.js25.79 kB2013-11-01|17:14
ColReorder.min.js10.12 kB2013-11-01|17:14
ColReorder.min.js.gz3.33 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
01.97 kB
01.97 kB
doc.js2.60 kB2013-11-01|17:14
jquery.js211.76 kB2013-11-01|17:14
shBrushJScript.js1.61 kB2013-11-01|17:14
shCore.js15.80 kB2013-11-01|17:14
01.97 kB
ColVis.js24.70 kB2013-11-01|17:14
ColVis.min.js10.23 kB2013-11-01|17:14
ColVis.min.js.gz3.10 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
01.97 kB
doc.js2.60 kB2013-11-01|17:14
jquery.js211.76 kB2013-11-01|17:14
shBrushJScript.js1.61 kB2013-11-01|17:14
shCore.js15.80 kB2013-11-01|17:14
01.97 kB
01.97 kB
FixedColumns.js33.78 kB2013-11-01|17:14
FixedColumns.min.js11.51 kB2013-11-01|17:14
FixedColumns.min.js.gz3.59 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
01.97 kB
01.97 kB
doc.js2.60 kB2013-11-01|17:14
jquery.js211.76 kB2013-11-01|17:14
shBrushJScript.js1.61 kB2013-11-01|17:14
shCore.js15.80 kB2013-11-01|17:14
01.97 kB
dataTables.scroller.js26.80 kB2013-11-01|17:14
dataTables.scroller.min.js7.84 kB2013-11-01|17:14
dataTables.scroller.min.js.gz2.65 kB2013-11-01|17:14
01.97 kB
01.97 kB
01.97 kB
TableTools.js62.64 kB2013-11-01|17:14
TableTools.min.js28.85 kB2013-11-01|17:14
TableTools.min.js.gz8.55 kB2013-11-01|17:14
ZeroClipboard.js11.15 kB2013-11-01|17:14
01.97 kB
01.97 kB
jquery.dataTables.js368.66 kB2013-11-01|17:14
jquery.dataTables.min.js69.20 kB2013-11-01|17:14
jquery.js91.24 kB2013-11-01|17:14
html5shiv.js1.81 kB2013-11-01|17:14
jquery-1.10.2.intellisense.js157.81 kB2013-11-01|17:14
jquery-1.10.2.js266.80 kB2013-11-01|17:14
jquery-1.10.2.min.js90.92 kB2013-11-01|17:14
jquery-1.10.2.min.map136.75 kB2013-11-01|17:14
jquery-ui-1.10.3.js425.63 kB2013-11-01|17:14
jquery-ui-1.10.3.min.js222.73 kB2013-11-01|17:14
jquery.validate-vsdoc.js42.84 kB2013-11-01|17:14
jquery.validate.js38.04 kB2013-11-01|17:14
jquery.validate.min.js20.57 kB2013-11-01|17:14
jquery.validate.unobtrusive.js14.40 kB2013-11-01|17:14
jquery.validate.unobtrusive.min.js5.57 kB2013-11-01|17:14
knockout-2.3.0.debug.js178.92 kB2013-11-01|17:14
knockout-2.3.0.js41.73 kB2013-11-01|17:14
knockout.mapping-latest.debug.js26.02 kB2013-11-01|17:14
knockout.mapping-latest.js9.17 kB2013-11-01|17:14
less-1.4.2.js202.78 kB2013-11-01|17:14
less-1.4.2.min.js77.13 kB2013-11-01|17:14
respond.js9.52 kB2013-11-01|17:14
respond.min.js3.95 kB2013-11-01|17:14
01.97 kB
01.97 kB
bootstrap.d.ts2.41 kB2013-11-01|17:14
01.97 kB
chosen.jquery.d.ts758.00 B2013-11-01|17:14
01.97 kB
01.97 kB
jquery.validation.d.ts1.91 kB2013-11-01|17:14
jquery.d.ts27.81 kB2013-11-01|17:14
01.97 kB
01.97 kB
knockout.mapping.d.ts1.63 kB2013-11-01|17:14
knockout.amd.d.ts3.79 kB2013-11-01|17:14
knockout.d.ts14.65 kB2013-11-01|17:14
01.97 kB
01.97 kB
Answer.cshtml1.69 kB2013-11-01|17:14
Manage.cshtml1.21 kB2013-11-01|17:14
PartialTemplates.cshtml4.41 kB2013-11-01|17:14
Query.cshtml4.67 kB2013-11-02|09:41
01.97 kB
_html5shiv.cshtml155.00 B2013-11-01|17:14
_Layout.cshtml1.88 kB2013-11-01|17:14
web.config1.67 kB2013-11-01|17:14
_ViewStart.cshtml55.00 B2013-11-01|17:14
Web.config2.42 kB2013-11-02|09:27
Web.Debug.config1.27 kB2013-11-01|17:14
Web.Release.config1.33 kB2013-11-01|17:14
README.txt1.60 kB2013-11-12|21:44
reports.sql3.68 kB2013-11-01|17:14
...
Sponsored links

Comments

(Add your comment, get 0.1 Point)
Minimum:15 words, Maximum:160 words
1587925
2017-12-27

很不错的表格功能源码 适合新手 当然 我只看了这写我需要的

  • 1
  • Page 1
  • Total 1

Client Side Web Application Primer (1.74 MB)

Need 1 Point(s)
Your Point (s)

Your Point isn't enough.

Get 22 Point immediately by PayPal

Point will be added to your account automatically after the transaction.

More(Debit card / Credit card / PayPal Credit / Online Banking)

Submit your source codes. Get more Points

LOGIN

Don't have an account? Register now
Need any help?
Mail to: support@codeforge.com

切换到中文版?

CodeForge Chinese Version
CodeForge English Version

Where are you going?

^_^"Oops ...

Sorry!This guy is mysterious, its blog hasn't been opened, try another, please!
OK

Warm tip!

CodeForge to FavoriteFavorite by Ctrl+D