tag:blogger.com,1999:blog-48985888718073773192024-03-15T18:09:41.047-07:00The ASP.NET MVC ClubA Step-By-Step WalkThrough Microsoft ASP.NET MVC WCF OData Web API with the Twitter BootstrapCarmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.comBlogger207125tag:blogger.com,1999:blog-4898588871807377319.post-86834361376983453252022-01-14T08:03:00.000-08:002022-01-14T08:03:10.497-08:00SOLVED - Error "The build failed" - "An error occurred in the tool" on Microsoft WCF Web Service Reference Provider<p> <span>In this tutorial we'll learn</span> <b>how to fix the error "The build failed" - "An error occurred in the tool" on Microsoft WCF Web Service Reference Provider. </b></p>We'll use the Microsoft WCF Web Service Reference Provider tool for refreshing endpoints data on a WCF application .<div>Every time something changes on the service, the consumer application has to refresh its Connected Services references.</div><div>However, the following error could happen without previous record, avoiding you to refresh the WCF references: <br /><br /><a href="https://blogger.googleusercontent.com/img/a/AVvXsEg-PAQ4PsQQJ6XvvvjB8FYzJ7g6KTy4FFS4ihL82yHCHxr5LNa7Q2g-eVG-e8wBlgpjQX-s8sQBoWKJMv0N5beOC14ok6AyyDpxv_6QqN1yw47gV6vbVrvT6-SQ_bGirpNzNRAM2uRiyyLJs6YkomrHamOECLq0cDlKyzjUmY0Gzhhg1JeoMv1oRj-8_g=s612" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="451" data-original-width="612" height="472" src="https://blogger.googleusercontent.com/img/a/AVvXsEg-PAQ4PsQQJ6XvvvjB8FYzJ7g6KTy4FFS4ihL82yHCHxr5LNa7Q2g-eVG-e8wBlgpjQX-s8sQBoWKJMv0N5beOC14ok6AyyDpxv_6QqN1yw47gV6vbVrvT6-SQ_bGirpNzNRAM2uRiyyLJs6YkomrHamOECLq0cDlKyzjUmY0Gzhhg1JeoMv1oRj-8_g=w640-h472" width="640" /></a><br /><br /><br /><br /><h3 style="text-align: center;">Step by step how to <b style="text-align: left;">fix the error "The build failed" - "An error occurred in the tool" on Microsoft WCF Web Service Reference Provider</b></h3><div><br /></div>You want to refresh the WCF service reference on your project, as follows:</div><div><br /></div><div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjE2Xh1Nmc_tfMX071KJ4dCZ0wJXwMJ0F3_ClvVhW5nZOL3SBWkJHWMQ7vjfzeTxkWAleL6b9DhbrOiDs-9k838IMrgL91Qo1muA3D9-j0mb-3DVmUY0tSMlepUhOyBSz655umcj1TvVdcUbQtxs_HfJvfAC1T2S_sOuUy6TuOxF5Vet0bXikhb-t5shw=s439" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="376" data-original-width="439" height="343" src="https://blogger.googleusercontent.com/img/a/AVvXsEjE2Xh1Nmc_tfMX071KJ4dCZ0wJXwMJ0F3_ClvVhW5nZOL3SBWkJHWMQ7vjfzeTxkWAleL6b9DhbrOiDs-9k838IMrgL91Qo1muA3D9-j0mb-3DVmUY0tSMlepUhOyBSz655umcj1TvVdcUbQtxs_HfJvfAC1T2S_sOuUy6TuOxF5Vet0bXikhb-t5shw=w400-h343" width="400" /></a></div><div><br /></div><div>But you are confronted with the following error:</div><div><br /></div><div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEg-PAQ4PsQQJ6XvvvjB8FYzJ7g6KTy4FFS4ihL82yHCHxr5LNa7Q2g-eVG-e8wBlgpjQX-s8sQBoWKJMv0N5beOC14ok6AyyDpxv_6QqN1yw47gV6vbVrvT6-SQ_bGirpNzNRAM2uRiyyLJs6YkomrHamOECLq0cDlKyzjUmY0Gzhhg1JeoMv1oRj-8_g=s612" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="451" data-original-width="612" height="472" src="https://blogger.googleusercontent.com/img/a/AVvXsEg-PAQ4PsQQJ6XvvvjB8FYzJ7g6KTy4FFS4ihL82yHCHxr5LNa7Q2g-eVG-e8wBlgpjQX-s8sQBoWKJMv0N5beOC14ok6AyyDpxv_6QqN1yw47gV6vbVrvT6-SQ_bGirpNzNRAM2uRiyyLJs6YkomrHamOECLq0cDlKyzjUmY0Gzhhg1JeoMv1oRj-8_g=w640-h472" width="640" /></a></div><div><br />The error message "The build failed" could be misunderstood: my project is building correctly, hence, what is failing to build?</div><div><br /></div><div>The WCF Web Service Reference Provider tool creates two projects in a temp folder, and these projects are the ones failing to build.</div><div>These projects are stored in the following folder:</div><div>%localappdata%\Temp\WCFConnectedService</div><div><br /></div><div>Opening the folder corresponding to the current time and date, check the bootstrapper project, opening it with Visual Studio:</div><div><br /></div><div><br /></div><div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjw-EnkPmEh2ERE3e69MDLmGEv6NH2PS9QBgGFAjolyEGtC5ajpWJ1YFi5PJxACGAzliD-x_k9e0sMNCEaxbFkyDIc4az6gsj2k98Ov1jAvzvbJFZhIfs6IonjNCh1rODPX91X-MXcI8L62ldBE9Eqa-ssOUd6zszl2exNPg2bDPT-6zcJNp2_IKwjs7A=s675" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="249" data-original-width="675" height="237" src="https://blogger.googleusercontent.com/img/a/AVvXsEjw-EnkPmEh2ERE3e69MDLmGEv6NH2PS9QBgGFAjolyEGtC5ajpWJ1YFi5PJxACGAzliD-x_k9e0sMNCEaxbFkyDIc4az6gsj2k98Ov1jAvzvbJFZhIfs6IonjNCh1rODPX91X-MXcI8L62ldBE9Eqa-ssOUd6zszl2exNPg2bDPT-6zcJNp2_IKwjs7A=w640-h237" width="640" /></a></div><div><br />After you open the project, try to build it. You will get the following errors:</div><div><br /></div><div><br /></div><div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhO1-Zve2rwW1qzEy2ZpWC--NnekGTfbCnkzYEDs3yKkxyOuLEyw6nPEN3K6ptuibJeXLh68AiyWHOnahTdb2Ue-dzUnQOC_7yR3S8uabdf8BB4X7cOLDnZA8JeOqdkKyImWN6AwZx0zS2KCTna5-JZ_b8p3c5jQIBL7GVKEE87xSYto23HL3lYQ6akmg=s1301" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="169" data-original-width="1301" height="84" src="https://blogger.googleusercontent.com/img/a/AVvXsEhO1-Zve2rwW1qzEy2ZpWC--NnekGTfbCnkzYEDs3yKkxyOuLEyw6nPEN3K6ptuibJeXLh68AiyWHOnahTdb2Ue-dzUnQOC_7yR3S8uabdf8BB4X7cOLDnZA8JeOqdkKyImWN6AwZx0zS2KCTna5-JZ_b8p3c5jQIBL7GVKEE87xSYto23HL3lYQ6akmg=w640-h84" width="640" /></a></div><div><br /></div><div>Indeed, this is the project which "The build failed".</div><div>Opening the project Properties, you see that there is not "Target Framework" asigned to the project:</div><div><br /></div><div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiBGwMXVgF07mci3qRCDS-F77lvIKVlecyenxqCPWtQCL8N5aJwxfS4Z0GZyAaCjJ39jq34ltGms0Tta2W8vsA5J61z0t3Jd5kNaocSZ3Kbgukd35XxX5c68hb6SMZDnd6xv-U3RSwm7E8moeJw17L2iGIZwXxqDXEEQP1Focj708khjaJwDJoS-3jrWA=s1305" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="403" data-original-width="1305" height="198" src="https://blogger.googleusercontent.com/img/a/AVvXsEiBGwMXVgF07mci3qRCDS-F77lvIKVlecyenxqCPWtQCL8N5aJwxfS4Z0GZyAaCjJ39jq34ltGms0Tta2W8vsA5J61z0t3Jd5kNaocSZ3Kbgukd35XxX5c68hb6SMZDnd6xv-U3RSwm7E8moeJw17L2iGIZwXxqDXEEQP1Focj708khjaJwDJoS-3jrWA=w640-h198" width="640" /></a></div><div><br /></div><div><br /></div><div>After you select from the list the correponding target framework, try to recompile it, to see that this time the build has succeded.</div><div><br /></div><div>And this gives us a hint of what happened here: because of an internal bug of the tool inside Visual Studio, the correct framework has been mismatched.</div><div>To see this clearly, open the folder of your project on Explorer, and type "CMD" on the address. The command line interface CLI - (a.k.a. CMD Prompt window) , will open.</div><div>Then type :</div><div><b>dotnet --version</b></div><div><br /></div><div>This will tell you what is the version of Dotnet being used.</div><div>And you'll see that is not the same version used by your project.</div><div><br /></div><div>The problem here is, the WCF tool is using the global dotnet version , instead of the framework used by your project.</div><div><i>Probably, after the creation of your project, you have installed additional .NET SDKs, and now the tool is taking the latest of them into account, instead of the one corresponding to your project.</i></div><div><br /></div><div>To fix this, change the dotnet version used by the tool , as follows:</div><div><br /></div><div><b>1) Type on the CLI this command, which will allow you to see all dotnet sdks installed on your machine:</b></div><div><b> dotnet --info</b></div><div><b><br /></b></div><div><b>Select the one matching the framework used by your project.</b></div><div><b><br /></b></div><div><b>2) On the same command line interface that you opened before, (i.e. the folder of your project), type the following in order to change the version locally:</b></div><div><b>dotnet new globaljson --sdk-version X.X.XXX ( for example : 2.2.110)<br /><br />Where X.X.XXX is the version that you selected before.</b></div><div><b><br /></b></div><div><b>3) Type again dotnet --version, to see the changes.</b></div><div><b><br /></b></div><div><b>4) Run again the WCF Web Service Reference Provider tool. This time your references will be refreshed accordingly.</b></div><div><br /></div><div>You can try another solution, which is to update your Visual Studio to the latest version, hoping that the issue had been resolved. It will cost you a download of about 4 GIGABYTE of data.</div><div>However, the above solution will be straightforward and painless.<br /><br /><div><b>That's all.... </b></div><span>In this tutorial we've seen </span><b>how </b><b>to fix the error "The build failed" - "An error occurred in the tool" on Microsoft WCF Web Service Reference Provider</b>.<span> </span><br /><b>Happy programming.....</b><div><b><br /></b></div><div><b><br /></b> By Carmel Shvartzman<br /><div style="direction: rtl;"><b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br /><div></div></div><br /><br /></div></div><br />Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-35048071633938717522021-06-11T01:05:00.003-07:002021-06-11T01:36:31.093-07:00SOLVED - Error " there is no package called ‘bslib’ " on Heroku deployment from GitHub repository<p><span style="font-family: inherit;">In this tutorial we'll learn</span> <b>how to solve the error " there is no package called ‘bslib’ " on Heroku deployment from GitHub repository </b><span style="font-family: inherit;">. </span></p><p><span style="font-family: inherit;">This error occurs while deploying an app to Heroku from a GitHub repository . Your app works perfectly on your development machine, but it would fail on deployment, like this :</span></p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-Vp0ktKsMSZI/YMMWshBgzVI/AAAAAAAAQio/o1sT--yG6OwZw0hV6P2B6ha340DYv7o-gCLcBGAsYHQ/s635/1.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="340" data-original-width="635" height="214" src="https://1.bp.blogspot.com/-Vp0ktKsMSZI/YMMWshBgzVI/AAAAAAAAQio/o1sT--yG6OwZw0hV6P2B6ha340DYv7o-gCLcBGAsYHQ/w400-h214/1.jpg" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><h3 style="text-align: center;">Step by step how to solve the error " there is no package called ‘bslib’ " on Heroku deployment from GitHub repository </h3><p><br /></p><p><span style="font-family: inherit;">First of all, notice that it seems to be an ENCODING problem</span> : something does not look good with these symbols : " <b>‘bslib’ "</b></p><p><span style="font-family: inherit;"></span></p><p>So probably you just have been trying of changing the encoding for your files, also at your machine or uploading again the files to your repository at GitHub.</p><p><span style="font-family: inherit;">However, nothing seems to help.</span></p><p><span style="font-family: inherit;">But if you take a closer look, the error states "...NO package called..." : the PACKAGES are not there.</span></p><p><span style="font-family: inherit;">And inside the word </span> <b>‘bslib’ </b><span style="text-align: center;">you can realise the name of the unknown package .</span></p><p><span style="text-align: center;">So check whether you are loading this package :</span></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/--wq7vvCGNUI/YMMWsjcfymI/AAAAAAAAQiw/hrPFOvUbavgpQt96-3wSlc1jqiTLOW12QCLcBGAsYHQ/s482/2.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="132" data-original-width="482" height="110" src="https://1.bp.blogspot.com/--wq7vvCGNUI/YMMWsjcfymI/AAAAAAAAQiw/hrPFOvUbavgpQt96-3wSlc1jqiTLOW12QCLcBGAsYHQ/w400-h110/2.jpg" width="400" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>In case you are not loading it, just add it to the setup installations : <p></p><p><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-7LzUxVuhl48/YMMWs9zGBwI/AAAAAAAAQis/n-J_YrCnUY0O4c_zdbP3pdY2z5JLzCrHwCLcBGAsYHQ/s595/3.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="423" data-original-width="595" height="284" src="https://1.bp.blogspot.com/-7LzUxVuhl48/YMMWs9zGBwI/AAAAAAAAQis/n-J_YrCnUY0O4c_zdbP3pdY2z5JLzCrHwCLcBGAsYHQ/w400-h284/3.jpg" width="400" /></a></div><p><br /></p>So, redeploy and take a look again: the app is now working:<p></p><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-n0FZaVLpDrY/YMMgfwKeJkI/AAAAAAAAQjQ/tS0UpTBMOXs9QgECo8EK4fRporpGaFM9gCLcBGAsYHQ/s1270/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="580" data-original-width="1270" height="266" src="https://1.bp.blogspot.com/-n0FZaVLpDrY/YMMgfwKeJkI/AAAAAAAAQjQ/tS0UpTBMOXs9QgECo8EK4fRporpGaFM9gCLcBGAsYHQ/w583-h266/5.jpg" width="583" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><span><br /></span><p></p><div><b>That's all.... </b></div><span>In this tutorial we've seen </span><b>how to solve the error " there is no package called ‘bslib’ " on Heroku deployment from GitHub repository </b><span>.</span><br /><b>Happy programming.....</b><br /> By Carmel Shvartzman<div><br /><div style="direction: rtl;"><b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br /><div></div></div><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-4870241686146358702021-03-17T22:03:00.000-07:002021-03-17T22:03:20.189-07:00SOLVED - How to fix the Azure error "You do not have permission to view this directory or page" while deploying .NET Core 3.1 Angular Web App<p> In this article we review <b>how to fix the Azure error "You do not have permission to view this directory or page" while deploying .NET Core 3.1 Angular Web App using Angular 9/10,</b> looking like this :</p><div class="separator" style="clear: both; text-align: center;"><br /></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-hjuW2kw4iI4/YD4JcrP4LpI/AAAAAAAAQSE/HWm_4-O7VmoV7I1vSX7QeG_IYhZ5UOR0ACLcBGAsYHQ/s571/1.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="213" data-original-width="571" height="173" src="https://1.bp.blogspot.com/-hjuW2kw4iI4/YD4JcrP4LpI/AAAAAAAAQSE/HWm_4-O7VmoV7I1vSX7QeG_IYhZ5UOR0ACLcBGAsYHQ/w466-h173/1.png" width="466" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><h3 style="text-align: center;">SOLVED - How to fix the Azure error "You do not have permission to view this directory or page" while deploying .NET Core 3.1 Angular Web App</h3><div><br /></div><div><br /></div><div><br /></div><div>This error message is quite misleading, since you do have all permissions to enter your own website, of which you are the administrator:</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-hjuW2kw4iI4/YD4JcrP4LpI/AAAAAAAAQSE/HWm_4-O7VmoV7I1vSX7QeG_IYhZ5UOR0ACLcBGAsYHQ/s571/1.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="213" data-original-width="571" height="163" src="https://1.bp.blogspot.com/-hjuW2kw4iI4/YD4JcrP4LpI/AAAAAAAAQSE/HWm_4-O7VmoV7I1vSX7QeG_IYhZ5UOR0ACLcBGAsYHQ/w438-h163/1.png" width="438" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">In order to see the error logs, on the AZURE dashboard, search for the App Service Logs:</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-ZkxPNxMqSuk/YD4JdxUrWBI/AAAAAAAAQSc/CGjfYdYukfAglRwShjRJf3CvPwHOwo5wwCLcBGAsYHQ/s593/2.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="593" data-original-width="587" height="453" src="https://1.bp.blogspot.com/-ZkxPNxMqSuk/YD4JdxUrWBI/AAAAAAAAQSc/CGjfYdYukfAglRwShjRJf3CvPwHOwo5wwCLcBGAsYHQ/w449-h453/2.png" width="449" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">And switch on all logs. Next, open the Log Streams to see the logs:</div><div class="separator" style="clear: both;"><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-ymKV6o5tRH0/YD4Jd9NGOEI/AAAAAAAAQSg/j9bzXRCxDqAOkTEfTXzkac8r-WrO_rT9ACLcBGAsYHQ/s1326/3.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="416" data-original-width="1326" height="227" src="https://1.bp.blogspot.com/-ymKV6o5tRH0/YD4Jd9NGOEI/AAAAAAAAQSg/j9bzXRCxDqAOkTEfTXzkac8r-WrO_rT9ACLcBGAsYHQ/w726-h227/3.png" width="726" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">Next, search for the KUDU console, to open the KUDU web site and see what's going on with your site:</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /><div class="separator" style="clear: both;"><a href="https://1.bp.blogspot.com/-GnWBCw2Hjmo/YD4JeDqM2wI/AAAAAAAAQSk/MbAZYOSk45MN40CpxxqYD_BOGd8ElR4swCLcBGAsYHQ/s617/4.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="292" data-original-width="617" height="223" src="https://1.bp.blogspot.com/-GnWBCw2Hjmo/YD4JeDqM2wI/AAAAAAAAQSk/MbAZYOSk45MN40CpxxqYD_BOGd8ElR4swCLcBGAsYHQ/w473-h223/4.png" width="473" /></a></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><br /></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">Press on "Go":</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-9rREJi1WMbI/YD4JeAATH9I/AAAAAAAAQSo/rJiF83EoVHg8wEybQSW9-mzSPrdRXuvawCLcBGAsYHQ/s910/5.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="273" data-original-width="910" height="145" src="https://1.bp.blogspot.com/-9rREJi1WMbI/YD4JeAATH9I/AAAAAAAAQSo/rJiF83EoVHg8wEybQSW9-mzSPrdRXuvawCLcBGAsYHQ/w483-h145/5.png" width="483" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><div><br /></div><div>Also, you can open KUDU by typing <span face="Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif" style="background-color: #e4e6e8; color: #242729; font-size: 13px; white-space: pre-wrap;">https://<your app name>.scm.azurewebsites.net/DebugConsole.</span></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-b2dGMrEeoB0/YD4Jea1mMrI/AAAAAAAAQSs/19IKkhyQ8QMokxZpgAmxm_HTJQ-7_bPzQCLcBGAsYHQ/s950/6.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="140" data-original-width="950" height="97" src="https://1.bp.blogspot.com/-b2dGMrEeoB0/YD4Jea1mMrI/AAAAAAAAQSs/19IKkhyQ8QMokxZpgAmxm_HTJQ-7_bPzQCLcBGAsYHQ/w664-h97/6.png" width="664" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">After KUDU will open, open the Debug Console:</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-Sqk3P2gb9Yg/YD4JeclsPmI/AAAAAAAAQSw/e_K3TASOZEsIqwb8T0BewAYaLJJIafrlwCLcBGAsYHQ/s700/7.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="528" data-original-width="700" height="319" src="https://1.bp.blogspot.com/-Sqk3P2gb9Yg/YD4JeclsPmI/AAAAAAAAQSw/e_K3TASOZEsIqwb8T0BewAYaLJJIafrlwCLcBGAsYHQ/w423-h319/7.png" width="423" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">Here you can check whether everything is fine with your web site, especially if the wwwroot contains your files or if the hierarchy of the web site is incorrect.</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">The problem with the hierarchy of the site, is that the "Deploy to Web App..." of the Azure Extension may not deploy adequately your site. </div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">You probably selected your PUBLISH folder to deploy:</div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-oYOlyh27lCs/YD4JeoHvzII/AAAAAAAAQS0/eHwIyNujTeAfqNZrTeQu98S39qJjbPiTgCLcBGAsYHQ/s542/8.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="542" data-original-width="381" height="320" src="https://1.bp.blogspot.com/-oYOlyh27lCs/YD4JeoHvzII/AAAAAAAAQS0/eHwIyNujTeAfqNZrTeQu98S39qJjbPiTgCLcBGAsYHQ/s320/8.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">But instead, Azure deployed a PARENT folder ("bin\release"), therefore the integrity of your Azure web site will remain corrupted:</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-uh8UeP3Gwbs/YD4Je7TzD8I/AAAAAAAAQS4/hh5VENpvj3gweNcyUG_jKlKYqTNfJqlJACLcBGAsYHQ/s454/9.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="137" data-original-width="454" src="https://1.bp.blogspot.com/-uh8UeP3Gwbs/YD4Je7TzD8I/AAAAAAAAQS4/hh5VENpvj3gweNcyUG_jKlKYqTNfJqlJACLcBGAsYHQ/s320/9.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">To solve this, open the Azure App Service extension, and open its settings:</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-1Xs5dxaiF4w/YD4JcizXoYI/AAAAAAAAQSI/Ps2Y8gVQDsQAp2Rbzjx98DxqNgN0rRf1ACLcBGAsYHQ/s770/10.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="318" data-original-width="770" src="https://1.bp.blogspot.com/-1Xs5dxaiF4w/YD4JcizXoYI/AAAAAAAAQSI/Ps2Y8gVQDsQAp2Rbzjx98DxqNgN0rRf1ACLcBGAsYHQ/s320/10.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">There, change the PATH of the deployed folder:</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-xLDa9qMCgzQ/YD4JdUd65JI/AAAAAAAAQSU/RL7ZXz0pnHoxg8JRUGaw_P0ZQ2EN1Hx8gCLcBGAsYHQ/s776/13.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="224" data-original-width="776" height="184" src="https://1.bp.blogspot.com/-xLDa9qMCgzQ/YD4JdUd65JI/AAAAAAAAQSU/RL7ZXz0pnHoxg8JRUGaw_P0ZQ2EN1Hx8gCLcBGAsYHQ/w640-h184/13.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">The path MUST point to "Publish" :</div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-lF-tmqRW2cs/YD4JdTLsHWI/AAAAAAAAQSQ/Ns7ab0LNYREKQDrO1ZtXiKan0xztX8KmACLcBGAsYHQ/s1003/14.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="243" data-original-width="1003" height="156" src="https://1.bp.blogspot.com/-lF-tmqRW2cs/YD4JdTLsHWI/AAAAAAAAQSQ/Ns7ab0LNYREKQDrO1ZtXiKan0xztX8KmACLcBGAsYHQ/w640-h156/14.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">You can also uncheck the Deploy Confirmation there:</div></div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-zCvgTspBAHQ/YD4Jcis5rjI/AAAAAAAAQSA/5cr3_Cbhf-UrgV8nYVkzfUmFjkjBH_XxwCLcBGAsYHQ/s1004/11.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="395" data-original-width="1004" height="167" src="https://1.bp.blogspot.com/-zCvgTspBAHQ/YD4Jcis5rjI/AAAAAAAAQSA/5cr3_Cbhf-UrgV8nYVkzfUmFjkjBH_XxwCLcBGAsYHQ/w424-h167/11.png" width="424" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">Now deploy again your website:</div><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-yHk9xqiy9GA/YD4JdVNWIVI/AAAAAAAAQSM/C6MUUjoRe3gQzv1Awpzp9JZ49i6gfE9AACLcBGAsYHQ/s550/12.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="550" data-original-width="498" height="320" src="https://1.bp.blogspot.com/-yHk9xqiy9GA/YD4JdVNWIVI/AAAAAAAAQSM/C6MUUjoRe3gQzv1Awpzp9JZ49i6gfE9AACLcBGAsYHQ/s320/12.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">Open Azure's KUDU, and you'll see the hierarchy fixed : </div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-hO2DcPzl78Y/YD4JdurJ23I/AAAAAAAAQSY/nXiH2z_HVLMODMRvYHxrylz_qHaJlJfYgCLcBGAsYHQ/s679/15.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="354" data-original-width="679" height="263" src="https://1.bp.blogspot.com/-hO2DcPzl78Y/YD4JdurJ23I/AAAAAAAAQSY/nXiH2z_HVLMODMRvYHxrylz_qHaJlJfYgCLcBGAsYHQ/w504-h263/15.png" width="504" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both;">Your Azure's website should be working by now!!!</div><div><br /></div><div><br /></div><div>That's All!!! In this tutorial we saw <b>how to fix the Azure error "You do not have permission to view this directory or page" while deploying .NET Core 3.1 Angular Web App using Angular 9/10.</b></div><div><b>Enjoy .NET Core .....</b><br /><b><br /></b><b> </b>by Carmel Schvartzman<br /><br /><b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com1tag:blogger.com,1999:blog-4898588871807377319.post-69636121175509757802020-09-02T20:49:00.000-07:002020-09-02T20:49:20.038-07:00SOLVED - IIS Asp.Net Core Error "500.31 ANCM Failed to Find Native Dependencies"<p> <span style="font-family: inherit;">In this tutorial we'll learn</span> <b>how to solve the IIS Asp.Net Core Error "500.31 ANCM Failed to Find Native Dependencies" </b><span style="font-family: inherit;">. </span></p><p><span style="font-family: inherit;">This error ocurrs while deploying an Asp.Net Core app to IIS .</span></p><p><span style="font-family: inherit;">First of all, search for the ERROR CODE on the </span><a href="https://docs.microsoft.com/he-il/aspnet/core/test/troubleshoot-azure-iis?view=aspnetcore-3.1" style="font-family: inherit;" target="_blank">Troubleshoot ASP.NET Core</a> :</p><p><br /></p><p><span style="font-family: inherit;"><a href="https://1.bp.blogspot.com/-jxvdiA9esiU/X0IPFCafLpI/AAAAAAAAP88/dXNKR9V7iAUTEispIaa1AC-3-v9wI-QdQCLcBGAsYHQ/s1018/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="714" data-original-width="1018" height="359" src="https://1.bp.blogspot.com/-jxvdiA9esiU/X0IPFCafLpI/AAAAAAAAP88/dXNKR9V7iAUTEispIaa1AC-3-v9wI-QdQCLcBGAsYHQ/w512-h359/2.PNG" width="512" /></a></span></p><p><span style="font-family: inherit;"><br /></span></p><h3 style="text-align: center;">Step by step how to solve the IIS Asp.Net Core Error "500.31 ANCM Failed to Find Native Dependencies" </h3><p><span style="font-family: inherit;">You'll find there that the .NET Core runtime in-process fails to start. OK.</span></p><p><span style="font-family: inherit;">So may be the <code>Microsoft.NETCore.App</code> or <code>Microsoft.AspNetCore.App</code> runtime isn't installed?</span></p><p><span style="font-family: inherit;">Check the "Modules" tab on your app on IIS . </span></p><p><span style="font-family: inherit;">However, the Modules are there :</span></p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-1wjoU_biuoM/X0IPFLea4tI/AAAAAAAAP84/m6MbnTHaTcQAO9Lor5gpbc67vJRQPWYOwCLcBGAsYHQ/s643/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="248" data-original-width="643" src="https://1.bp.blogspot.com/-1wjoU_biuoM/X0IPFLea4tI/AAAAAAAAP84/m6MbnTHaTcQAO9Lor5gpbc67vJRQPWYOwCLcBGAsYHQ/s640/1.PNG" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div>The cause stated at the troubleshoot, is that the version does not exists on the machine:<p></p><p><a href="https://1.bp.blogspot.com/-_ogAHJ1Tf5Q/X0IPFa-mQDI/AAAAAAAAP9A/DR5NDNyrrbg8ia1_AuYjBUbd0uT4ZhwwACLcBGAsYHQ/s994/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="742" data-original-width="994" height="382" src="https://1.bp.blogspot.com/-_ogAHJ1Tf5Q/X0IPFa-mQDI/AAAAAAAAP9A/DR5NDNyrrbg8ia1_AuYjBUbd0uT4ZhwwACLcBGAsYHQ/w512-h382/3.PNG" width="512" /></a><br /></p><div class="separator" style="clear: both; text-align: center;"><br /></div><p><br /></p>So, search for the download link on the following url : <a href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/publish-to-iis?view=aspnetcore-3.1&tabs=visual-studio" target="_blank">Publish an ASP.NET Core app to IIS</a><p></p><p><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-pgWdSDBR1l8/X0IPFwjfx6I/AAAAAAAAP9E/gKb9sHiZINMDRtbn2GNpsRtX7d7dhROwACLcBGAsYHQ/s1229/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="612" data-original-width="1229" src="https://1.bp.blogspot.com/-pgWdSDBR1l8/X0IPFwjfx6I/AAAAAAAAP9E/gKb9sHiZINMDRtbn2GNpsRtX7d7dhROwACLcBGAsYHQ/s640/4.PNG" width="640" /></a></div><p><br /></p><p>Below the title "Install the .NET Core Hosting Bundle" , you'll find the download link : </p><p><a href="https://dotnet.microsoft.com/permalink/dotnetcore-current-windows-runtime-bundle-installer" target="_blank">Current .NET Core Hosting Bundle installer (direct download)</a><br /></p><p></p><p><br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-UDpCOd8vTZI/X0IPGBx4ZeI/AAAAAAAAP9I/u5En0KJv620TAKtZp5DYnmu2pj5lNZm_QCLcBGAsYHQ/s1019/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="497" data-original-width="1019" src="https://1.bp.blogspot.com/-UDpCOd8vTZI/X0IPGBx4ZeI/AAAAAAAAP9I/u5En0KJv620TAKtZp5DYnmu2pj5lNZm_QCLcBGAsYHQ/s640/5.PNG" width="640" /></a></div><p><br /></p>Download it, and copy it to the machine where the IIS is installed:<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-oc0dG5dGBww/X0IPGXXMn3I/AAAAAAAAP9M/kYC6iFveUNkdFxthau49kgEicheB6oZrwCLcBGAsYHQ/s368/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="94" data-original-width="368" src="https://1.bp.blogspot.com/-oc0dG5dGBww/X0IPGXXMn3I/AAAAAAAAP9M/kYC6iFveUNkdFxthau49kgEicheB6oZrwCLcBGAsYHQ/s0/6.PNG" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">Run it as Administrator, and RESTART IIS after the setup is finished (my website >>> STOP >>> START (or RECICLE)) :</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-PtV8XlYbO_4/X0IPGlHZ8YI/AAAAAAAAP9Q/vBUcRb3eRwwVAcq3K4JVN862vk3PMSHNwCLcBGAsYHQ/s456/7.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="403" data-original-width="456" src="https://1.bp.blogspot.com/-PtV8XlYbO_4/X0IPGlHZ8YI/AAAAAAAAP9Q/vBUcRb3eRwwVAcq3K4JVN862vk3PMSHNwCLcBGAsYHQ/s0/7.PNG" /></a></div><span style="font-family: inherit;"><br /></span><p></p><div><b>That's all.... </b></div><span style="font-family: inherit;">In this tutorial we've seen </span><b>how to </b><b> solve the IIS Asp.Net Core Error "500.31 ANCM Failed to Find Native Dependencies</b>.<span style="font-family: inherit;"> </span><br /><b>Happy programming.....</b><br /> By Carmel Shvartzman<div><br /><div style="direction: rtl;"><b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br /><div></div></div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-38318387049924070402020-08-01T20:51:00.000-07:002020-08-01T20:51:48.259-07:00 How to install SAP Crystal Reports for using in Asp.Net<span style="font-family: inherit;">In this tutorial we'll learn</span> <b>How to install SAP Crystal Reports for using in Asp.Net </b><span style="font-family: inherit;">. </span><br />
However straightforward , the installation can be a bit trickier since the wizard won't let you install until you close ALL Microsoft applications, and it will give you a PROCESS ID of the software to close, which you will have to find for yourself , showing the following dialog :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-Tepe8PGZPNU/W0M7rGqYH_I/AAAAAAAAM5M/MuMt3AsFUSAUFUuoVsYOqeINoi0cd7FOwCEwYBhgL/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="498" data-original-width="516" height="385" src="https://4.bp.blogspot.com/-Tepe8PGZPNU/W0M7rGqYH_I/AAAAAAAAM5M/MuMt3AsFUSAUFUuoVsYOqeINoi0cd7FOwCEwYBhgL/s400/8.png" width="400" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-A1_F_xojpY4/W0M7pmfIniI/AAAAAAAAM5Y/relnc3hk798SHmf36zaZJNKND0MhcqgQgCEwYBhgL/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="509" data-original-width="515" height="316" src="https://3.bp.blogspot.com/-A1_F_xojpY4/W0M7pmfIniI/AAAAAAAAM5Y/relnc3hk798SHmf36zaZJNKND0MhcqgQgCEwYBhgL/s320/2.png" width="320" /></a></div>
<br />
<br />
<br />
<h3 style="text-align: center;">
Step by step How to install SAP Crystal Reports for using in Asp.Net</h3>
<br />
<br />
First, go to the <a href="https://www.crystalreports.com/crystal-reports-visual-studio/" target="_blank">Download SAP Crystal Reports, developer version for Microsoft Visual Studio</a> web page , and download the version that you need.<br />
Then, start the setup as follows:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-v2QbsMDRNDQ/W0M7ppwCyAI/AAAAAAAAM4k/WYSMX-JrGScGOaXhRORSxhzccTv8NC3fQCLcBGAs/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="407" data-original-width="540" height="241" src="https://1.bp.blogspot.com/-v2QbsMDRNDQ/W0M7ppwCyAI/AAAAAAAAM4k/WYSMX-JrGScGOaXhRORSxhzccTv8NC3fQCLcBGAs/s320/1.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-A1_F_xojpY4/W0M7pmfIniI/AAAAAAAAM4s/DzIXwAbS1rkoHNGaMgdlDimzOBmUKXl7ACLcBGAs/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="509" data-original-width="515" height="316" src="https://2.bp.blogspot.com/-A1_F_xojpY4/W0M7pmfIniI/AAAAAAAAM4s/DzIXwAbS1rkoHNGaMgdlDimzOBmUKXl7ACLcBGAs/s320/2.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-93f_9nwdonc/W0M7phb7ZII/AAAAAAAAM4o/kWyIJSxyl04E4fewkGVb6CISMBxxKCTAACLcBGAs/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="498" data-original-width="515" height="309" src="https://1.bp.blogspot.com/-93f_9nwdonc/W0M7phb7ZII/AAAAAAAAM4o/kWyIJSxyl04E4fewkGVb6CISMBxxKCTAACLcBGAs/s320/3.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-0GcfSGAOohs/W0M7qKA3-0I/AAAAAAAAM4w/jSz4MFRJz1kzkCpcxGySSNumjR3-5GIVACLcBGAs/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="505" data-original-width="516" height="313" src="https://4.bp.blogspot.com/-0GcfSGAOohs/W0M7qKA3-0I/AAAAAAAAM4w/jSz4MFRJz1kzkCpcxGySSNumjR3-5GIVACLcBGAs/s320/4.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now, as stated before, the wizard won't let you install until you close ALL Microsoft applications, and at first it will give you the names of the software to close:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-2SJk1h2Zpfc/W0M7qvcgjNI/AAAAAAAAM40/u-BNBdE_rps-HNzn4B4u03xGC-vCBgwZwCLcBGAs/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="501" data-original-width="518" height="309" src="https://2.bp.blogspot.com/-2SJk1h2Zpfc/W0M7qvcgjNI/AAAAAAAAM40/u-BNBdE_rps-HNzn4B4u03xGC-vCBgwZwCLcBGAs/s320/5.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
You will need to open the Task Manager (ctl-alt-del) and close them manually :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-6nJdMX5YPio/W0M7qzqUMyI/AAAAAAAAM44/E62D3gSXjPY7g6TqOuA8xyr6We-kOTa_gCLcBGAs/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="382" data-original-width="424" height="288" src="https://1.bp.blogspot.com/-6nJdMX5YPio/W0M7qzqUMyI/AAAAAAAAM44/E62D3gSXjPY7g6TqOuA8xyr6We-kOTa_gCLcBGAs/s320/6.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-jgb5DzWCPAk/W0M7q3WR6_I/AAAAAAAAM48/5N4wNKzuiOQXY_zFGTR9XbgX39kmJtotgCLcBGAs/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="491" data-original-width="515" height="305" src="https://4.bp.blogspot.com/-jgb5DzWCPAk/W0M7q3WR6_I/AAAAAAAAM48/5N4wNKzuiOQXY_zFGTR9XbgX39kmJtotgCLcBGAs/s320/7.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
But that is not all. After that, the wizard won't let you continue the setup until you close ALL Microsoft applications, and it will give you a PROCESS ID of the software to close, which you will have to find for yourself , showing the following dialog:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-Tepe8PGZPNU/W0M7rGqYH_I/AAAAAAAAM5A/kZkna-hcznMcvsTZtFZvljDEkRTu2ZZggCLcBGAs/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="498" data-original-width="516" height="308" src="https://4.bp.blogspot.com/-Tepe8PGZPNU/W0M7rGqYH_I/AAAAAAAAM5A/kZkna-hcznMcvsTZtFZvljDEkRTu2ZZggCLcBGAs/s320/8.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Therefore, at the Task Manager, you will have to change the settings in order to display the PID Process Identifier of all programs running :</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-EvlWVMCtlec/W0M7rj48b_I/AAAAAAAAM5E/Kfv7g7K_u5sGqeR4wL8dPkU3_8pJIYMXACLcBGAs/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="515" data-original-width="422" height="320" src="https://2.bp.blogspot.com/-EvlWVMCtlec/W0M7rj48b_I/AAAAAAAAM5E/Kfv7g7K_u5sGqeR4wL8dPkU3_8pJIYMXACLcBGAs/s320/9.png" width="262" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Only after that, you could find the PID of the processes to close :</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-6nJdMX5YPio/W0M7qzqUMyI/AAAAAAAAM5Y/QPlTfW6o1i0Pr_sF0gLeJeTdoyhLVyOlgCEwYBhgL/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="382" data-original-width="424" height="288" src="https://2.bp.blogspot.com/-6nJdMX5YPio/W0M7qzqUMyI/AAAAAAAAM5Y/QPlTfW6o1i0Pr_sF0gLeJeTdoyhLVyOlgCEwYBhgL/s320/6.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<b>That's all.... </b></div>
<span style="font-family: inherit;">In this tutorial we've seen </span><b>How to install SAP Crystal Reports for using in Asp.Net</b>.<span style="font-family: inherit;"> </span><br />
<span style="font-family: inherit;">In the next tutorial <a href="https://themvcclub.blogspot.com/2018/07/step-by-step-how-to-add-sap-crystal.html" target="_blank">Step by Step How to Add a SAP Crystal Report to an Asp.Net project</a> we'll see how to add the </span><b>SAP Crystal Reports for using in Asp.Net.</b><br />
<b>Happy programming.....</b><br />
By Carmel Shvartzman<br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-9175526076286701172020-07-11T21:17:00.000-07:002020-07-11T21:17:57.031-07:00Querying Entities' Properties in Web API OData RESTful with ODataControllerIn this article we enable the Querying of an Entity's Property in an Web API OData RESTful service with ODataController. <br />
Our task here is to perform OData protocol queries in order to get the value of some Entity's property, the following query for example :<br />
<b>http://localhost:6954/Odata/Notes(10)/Body/$value</b><br />
<br />
<br />
When developing an ODataController to create an OData Web API, having configurated the application properly, as <a href="http://themvcclub.blogspot.com/2014/09/webapi-odata-v4-support-restful-service-mvc-crud.html" target="_blank">in the previous tutorial</a>, you get automatically support for the most common OData protocol's queries. You can then query the OData Web API using $metadata, $value, $select, $top, $skip, $filter and even $expand , to get the JSON response:<br />
<div>
<b>http://localhost:6954/OData/$metadata#Notes :</b></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-u0BKlboxSP4/U_R8gmYpYsI/AAAAAAAAFxw/ByCvFzuacyQ/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="382" src="https://1.bp.blogspot.com/-u0BKlboxSP4/U_R8gmYpYsI/AAAAAAAAFxw/ByCvFzuacyQ/s1600/1.png" width="640" /></a></div>
<br />
<b> /Odata/Notes?$filter=From eq 'Fry'</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/--y0Z2CKFJrA/U_SLQywrWcI/AAAAAAAAFyg/-Tx9QUH6DBM/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="384" src="https://4.bp.blogspot.com/--y0Z2CKFJrA/U_SLQywrWcI/AAAAAAAAFyg/-Tx9QUH6DBM/s1600/8.png" width="640" /></a></div>
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
<div>
<b>http://localhost:6954/OData/Notes?$skip=2&$top=10</b></div>
<div>
<a href="http://3.bp.blogspot.com/-eXHBy5OfEuo/U_R8i574f_I/AAAAAAAAFyM/5N-Zk6SXDJ4/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="354" src="https://3.bp.blogspot.com/-eXHBy5OfEuo/U_R8i574f_I/AAAAAAAAFyM/5N-Zk6SXDJ4/s1600/3.png" width="640" /></a></div>
<div>
<b><br /></b></div>
<div>
<b>http://localhost:6954/OData/Notes?$select=Body</b></div>
<div>
<a href="http://3.bp.blogspot.com/-Pi4nw1ZOzAA/U_R8ha5bXLI/AAAAAAAAFxs/-S0kLJln4hc/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="336" src="https://3.bp.blogspot.com/-Pi4nw1ZOzAA/U_R8ha5bXLI/AAAAAAAAFxs/-S0kLJln4hc/s1600/2.png" width="640" /></a></div>
<div>
<b><br /></b></div>
<div>
There are some conventions to follow when developing an ODataController:<br />
<br /></div>
<div>
1)<b><i> <span style="color: #274e13;">the controller's name must be the entity name, the root of the resource path: </span></i></b><br />
<b><i><br /></i></b>
<b>/Notes(10) </b>implies that the Web API will look for a controller named NotesController (case sensitive)<br />
<br />
2) <b><i><span style="color: #274e13;">the Action name for fetching an Entity's property will be set according to the Entity type and the Property name</span></i></b>, as follows:<br />
<br /></div>
<div>
<b> /Notes(10)/Body</b> </div>
<div>
means that the Web API will look for an Action method named Get<b><span style="color: #38761d;">Body</span></b>From<b><span style="color: #38761d;">Note</span></b>()<br />
<br />
All this conventions can be found in the <a href="http://www.asp.net/web-api/overview/odata-support-in-aspnet-web-api/odata-routing-conventions">Microsoft Asp.Net official site</a>.<br />
Let's say we have an Entity named "Note" with some property called "Body" : we want to call the OData HTTP service with this URI:<br />
<b> http://localhost:6954/Odata/Notes(10)/Body/</b><br />
<br />
So, according to the OData protocol specification, we need an Action method named Get<b><span style="color: #38761d;">Body</span></b>From<b><span style="color: #38761d;">Note</span></b>(), marked with the attribute "[EnableQuery]" , which returns the required property from the Entity:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-clUdcWpSSMc/U_R8iCZ95YI/AAAAAAAAFyU/QaigXyW2Qs0/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="286" src="https://3.bp.blogspot.com/-clUdcWpSSMc/U_R8iCZ95YI/AAAAAAAAFyU/QaigXyW2Qs0/s1600/5.png" width="640" /></a></div>
<br />
<br />
<span style="font-size: x-small;">(COPY-PASTE THIS CODE) : </span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><br /></span>
<span style="color: #666666; font-size: x-small;"><b> [EnableQuery(AllowedQueryOptions = AllowedQueryOptions.All)]</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #666666;"> public string </span><span style="color: red;">GetBodyFromNote</span><span style="color: #666666;">([</span><span style="color: #38761d;">FromODataUri</span><span style="color: #666666;">]int </span><span style="color: #38761d;">key</span><span style="color: #666666;">)</span></b></span><br />
<span style="color: #666666; font-size: x-small;"><b> {</b></span><br />
<span style="color: #666666; font-size: x-small;"><b> IEnumerable<Note> data = Repository.GetAll();</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #666666;"> var note = data.Where(n => n.ID == </span><span style="color: #38761d;">key</span><span style="color: #666666;">) .SingleOrDefault();</span></b></span><br />
<span style="color: #666666; font-size: x-small;"><b> return note.Body ;</b></span><br />
<span style="color: #666666; font-size: x-small;"><b> }</b></span><br />
<div>
<br /></div>
<span style="font-size: x-small;"></span><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Build & run the application, and type the URI to fetch the required property in JSON format:<br />
<br />
<b>http://localhost:6954/Odata/Notes(10)/Body/</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-3eOij2Jtps0/U_R8i5r9qyI/AAAAAAAAFyI/1b87g2OGuhs/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://1.bp.blogspot.com/-3eOij2Jtps0/U_R8i5r9qyI/AAAAAAAAFyI/1b87g2OGuhs/s1600/6.png" width="640" /></a></div>
Also, we can request ONLY the $value of the property:<br />
<b><br /></b>
<b>http://localhost:6954/Odata/Notes(10)/Body/$value</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-IVH9OuJTUVE/U_R8hp_PARI/AAAAAAAAFx0/nq7VsqjfI8o/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="https://1.bp.blogspot.com/-IVH9OuJTUVE/U_R8hp_PARI/AAAAAAAAFx0/nq7VsqjfI8o/s1600/4.png" width="640" /></a></div>
<b>That's all</b><br />
<div>
<span style="font-family: inherit;">In this post we've seen how </span>we perform Querying Entities' Properties in Web API OData RESTful with ODataController.<span style="font-family: inherit;"> </span><br />
<br />
<b>Enjoy programming.....</b><br />
By Carmel Shvartzman<br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com1tag:blogger.com,1999:blog-4898588871807377319.post-62589401616918864432020-05-20T21:06:00.000-07:002020-05-20T21:06:05.298-07:00Step by step how to add custom headers using Asp.Net Core 3.0<span style="font-family: inherit;">In this tutorial we'll learn</span> <b> how to add custom headers using Asp.Net Core 3.0</b><span style="font-family: inherit;"> </span><br />
We'll use Postman for testing purposes of a RESTful WEBAPI Core application, sending HTTP POST requests. We'll start with a WebApi Core 3.0 application, and we'll add an Extension Method to the Response class in order to append our headers.<br />
See the code here:<br />
<a href="https://github.com/CarmelSchvartzman/DOTNET/blob/master/HEADERS/ADD_HEADERS_EXTENSIONMETHOD" target="_blank">https://github.com/CarmelSchvartzman/DOTNET/blob/master/HEADERS/ADD_HEADERS_EXTENSIONMETHOD</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-FYw7L-UPbIw/XsN9SsAt31I/AAAAAAAAPp8/JRmvCh5qT4whjaijzSKSroZAxVM-H3cwgCLcBGAsYHQ/s1600/0.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="473" data-original-width="524" height="576" src="https://1.bp.blogspot.com/-FYw7L-UPbIw/XsN9SsAt31I/AAAAAAAAPp8/JRmvCh5qT4whjaijzSKSroZAxVM-H3cwgCLcBGAsYHQ/s640/0.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<h3 style="text-align: center;">
Step by step how to add custom headers using Asp.Net Core 3.0</h3>
<br />
<br />
First, we create a new Extension Method to the Response class in order to append our headers., in Visual Studio, as follows:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<br />
<br />
<div style="background-color: #2d2b55; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #80ffbb; font-style: italic;">public</span> <span style="color: #80ffbb; font-style: italic;">static</span> class <span style="color: #fad000;">Extensions</span></div>
<div>
<span style="color: #e1efff;">{</span></div>
<div>
<span style="color: #80ffbb; font-style: italic;">public</span> <span style="color: #80ffbb; font-style: italic;">static</span> void <span style="color: #fad000;">AddApplicationError</span><span style="color: #e1efff;">(</span><span style="color: #80ffbb; font-style: italic;">this</span> <span style="color: #9effff;">HttpResponse</span> <span style="color: #fad000;">response</span><span style="color: #e1efff;">,</span> string <span style="color: #fad000;">msg</span><span style="color: #e1efff;">)</span></div>
<div>
<span style="color: #e1efff;">{</span></div>
<div>
<span style="color: #9effff;">response</span><span style="color: #e1efff;">.</span><span style="color: #ffee80;">Headers</span><span style="color: #e1efff;">.</span><span style="color: #fad000;">Add</span><span style="color: #e1efff;">(</span><span style="color: #92fc79;">"</span><span style="color: #a5ff90;">Carmel-Error</span><span style="color: #92fc79;">"</span><span style="color: #e1efff;">,</span> <span style="color: #9effff;">msg</span><span style="color: #e1efff;">);</span></div>
<div>
<span style="color: #9effff;">response</span><span style="color: #e1efff;">.</span><span style="color: #ffee80;">Headers</span><span style="color: #e1efff;">.</span><span style="color: #fad000;">Add</span><span style="color: #e1efff;">(</span><span style="color: #92fc79;">"</span><span style="color: #a5ff90;">Access-Control-Expose-Headers</span><span style="color: #92fc79;">"</span><span style="color: #e1efff;">,</span> <span style="color: #92fc79;">"</span><span style="color: #a5ff90;">Carmel-Error</span><span style="color: #92fc79;">"</span><span style="color: #e1efff;">);</span></div>
<div>
<span style="color: #9effff;">response</span><span style="color: #e1efff;">.</span><span style="color: #ffee80;">Headers</span><span style="color: #e1efff;">.</span><span style="color: #fad000;">Add</span><span style="color: #e1efff;">(</span><span style="color: #92fc79;">"</span><span style="color: #a5ff90;">Access-Control-Allow-Origin</span><span style="color: #92fc79;">"</span><span style="color: #e1efff;">,</span> <span style="color: #92fc79;">"</span><span style="color: #a5ff90;">*</span><span style="color: #92fc79;">"</span><span style="color: #e1efff;">);</span></div>
<div>
<span style="color: #e1efff;">}</span></div>
<br />
<div>
<span style="color: #e1efff;">}</span></div>
</div>
<br />
On the startup.cs file , we add to the Configure method , the following code:<br />
<br />
<div style="background-color: #2d2b55; color: white; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;">
<div>
<span style="color: #ff9d00;">if</span> <span style="color: #e1efff;">(</span><span style="color: #9effff;">env</span><span style="color: #e1efff;">.</span><span style="color: #fad000;">IsDevelopment</span><span style="color: #e1efff;">())</span></div>
<div>
<span style="color: #e1efff;">{</span></div>
<div>
<span style="color: #9effff;">app</span><span style="color: #e1efff;">.</span><span style="color: #fad000;">UseDeveloperExceptionPage</span><span style="color: #e1efff;">();</span></div>
<div>
<span style="color: #e1efff;">}</span></div>
<div>
<span style="color: #ff9d00;">else</span></div>
<div>
<span style="color: #e1efff;">{</span></div>
<div>
<span style="color: #9effff;">app</span><span style="color: #e1efff;">.</span><span style="color: #fad000;">UseExceptionHandler</span><span style="color: #e1efff;">(</span><span style="color: #fad000;">b</span> <span style="color: #ff9d00;">=></span> <span style="color: #e1efff;">{</span></div>
<div>
<span style="color: #9effff;">b</span><span style="color: #e1efff;">.</span><span style="color: #fad000;">Run</span><span style="color: #e1efff;">(</span><span style="color: #80ffbb; font-style: italic;">async</span> <span style="color: #fad000;">ctx</span> <span style="color: #ff9d00;">=></span> <span style="color: #e1efff;">{</span></div>
<div>
<span style="color: #9effff;">ctx</span><span style="color: #e1efff;">.</span><span style="color: #ffee80;">Response</span><span style="color: #e1efff;">.</span><span style="color: #ffee80;">StatusCode</span> <span style="color: #ff9d00;">=</span> <span style="color: #e1efff;">(</span>int<span style="color: #e1efff;">)</span> </div>
<div>
<span style="color: #9effff;"> HttpStatusCode</span><span style="color: #e1efff;">.</span><span style="color: #ffee80;">InternalServerError</span><span style="color: #e1efff;">;</span></div>
<div>
var <span style="color: #fad000;">err</span> <span style="color: #ff9d00;">=</span> <span style="color: #9effff;">ctx</span><span style="color: #e1efff;">.</span><span style="color: #ffee80;">Features</span><span style="color: #e1efff;">.</span><span style="color: #fad000;">Get</span><span style="color: #e1efff;"><</span><span style="color: #9effff;">IExceptionHandlerFeature</span><span style="color: #e1efff;">>();</span></div>
<div>
<span style="color: #ff9d00;">if</span> <span style="color: #e1efff;">(</span><span style="color: #9effff;">err</span> <span style="color: #ff9d00;">!=</span> <span style="color: #ff628c;">null</span><span style="color: #e1efff;">)</span></div>
<div>
<span style="color: #e1efff;">{</span></div>
<div>
<span style="color: #9effff;">ctx</span><span style="color: #e1efff;">.</span><span style="color: #ffee80;">Response</span><span style="color: #e1efff;">.</span><span style="color: #fad000;">AddApplicationError</span><span style="color: #e1efff;">(</span><span style="color: #9effff;">err</span><span style="color: #e1efff;">.</span><span style="color: #ffee80;">Error</span><span style="color: #e1efff;">.</span><span style="color: #ffee80;">Message</span><span style="color: #e1efff;">);</span></div>
<div>
await <span style="color: #9effff;">ctx</span><span style="color: #e1efff;">.</span><span style="color: #ffee80;">Response</span><span style="color: #e1efff;">.</span><span style="color: #fad000;">WriteAsync</span><span style="color: #e1efff;">(</span><span style="color: #9effff;">err</span><span style="color: #e1efff;">.</span><span style="color: #ffee80;">Error</span><span style="color: #e1efff;">.</span><span style="color: #ffee80;">Message</span><span style="color: #e1efff;">);</span></div>
<div>
<span style="color: #e1efff;">}</span></div>
<div>
</div>
<div>
<span style="color: #e1efff;">});</span></div>
<div>
<span style="color: #e1efff;">});</span></div>
<div>
<span style="color: #e1efff;">}</span></div>
</div>
<div>
<br /></div>
This code catchs all exceptions globally, and also adds our headers to the response.<br />
<div>
Send a request using Postman, and open the "headers" window to see them:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-FYw7L-UPbIw/XsN9SsAt31I/AAAAAAAAPp8/KwBRyERX-ooj0dI3lyx7rFECgrPklPCgwCPcBGAYYCw/s1600/0.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="473" data-original-width="524" height="360" src="https://1.bp.blogspot.com/-FYw7L-UPbIw/XsN9SsAt31I/AAAAAAAAPp8/KwBRyERX-ooj0dI3lyx7rFECgrPklPCgwCPcBGAYYCw/s400/0.PNG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-TkjpUzak4TQ/XsN9SmPkzzI/AAAAAAAAPqE/I7MPFFrTOeUDS6jsIO5qLhY9qb1GOCVYwCPcBGAYYCw/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="630" data-original-width="998" height="403" src="https://1.bp.blogspot.com/-TkjpUzak4TQ/XsN9SmPkzzI/AAAAAAAAPqE/I7MPFFrTOeUDS6jsIO5qLhY9qb1GOCVYwCPcBGAYYCw/s640/1.PNG" width="640" /></a></div>
<br />
<br />
<br />
<br />
<br />
<div>
<b>That's all.... </b></div>
<span style="font-family: inherit;">In this tutorial we've seen </span><span style="font-family: inherit;"><b> how to add custom headers using Asp.Net Core 3.0</b><span style="font-family: inherit;"> </span> </span><br />
<b>Happy programming.....</b><br />
By Carmel Shvartzman<br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com2tag:blogger.com,1999:blog-4898588871807377319.post-64902527079386540802020-03-21T22:31:00.000-07:002020-03-21T22:31:08.797-07:00How to write an HTTP Handler to feed an AUTOCOMPLETE JQUERYUI widget<span style="font-family: inherit;">In this tutorial we'll learn</span> <b>how to write an HTTP Handler to feed an AUTOCOMPLETE JQUERYUI widget </b><span style="font-family: inherit;">. </span><br />
This <b>JQueryUI Autocomplete </b>will be showing as follows :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-wgRPVgfELbc/XVK5utxNoRI/AAAAAAAANg8/jMzFTAszhEU9pO_vNPIIkBb2Btxr3IXmwCLcBGAs/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="291" data-original-width="1382" height="132" src="https://1.bp.blogspot.com/-wgRPVgfELbc/XVK5utxNoRI/AAAAAAAANg8/jMzFTAszhEU9pO_vNPIIkBb2Btxr3IXmwCLcBGAs/s640/1.PNG" width="640" /></a></div>
<br />
<br />
<h3 style="text-align: center;">
Step by step How to write an HTTP Handler to feed an AUTOCOMPLETE JQUERYUI widget</h3>
<br />
<br />
First, we create a new ASPNET HTTP HANDLER, in Visual Studio, as follows:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
using System.Web.Script.Serialization;<br />
namespace WEBAPI_AJAX<br />
{ <br />
public class EmployeeHandler : IHttpHandler<br />
{<br />
public void ProcessRequest(HttpContext context)<br />
{<br />
string t = context.Request.QueryString["term"];<br />
<br />
Func<string, bool> pred = (w) => { if (w.StartsWith(t)) return true; else return false; };<br />
<br />
List<string> l = new List<string>() { "albert","andrew","asterix","ddddd","eeeeee","fffffff","gggggggg","hhhhhh","iiiiii"};<br />
<br />
l = l.Where(pred).ToList();<br />
//context.Response.ContentType = "text/plain";<br />
context.Response.Write(new JavaScriptSerializer().Serialize(l));<br />
}<br />
<br />
public bool IsReusable<br />
{<br />
get<br />
{<br />
return false;<br />
}<br />
}<br />
}<br />
}<br />
<br />
<br />
<br />
<br />
<br />
Then, we create the HTML file :<br />
<br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<title>jQuery UI Autocomplete - Default functionality</title><br />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><br />
<link rel="stylesheet" href="/resources/demos/style.css"><br />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script><br />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><br />
<link href="../Content/bootstrap.min.css" rel="stylesheet" /><br />
<script><br />
$(()=>{<br />
<br />
$("#tags").autocomplete({<br />
source: 'http://localhost:58776/HANDLER1.ASHX'<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="container"><br />
<div class="row"><br />
<div class="jumbotron"><br />
<div class="form-group"><br />
<label for="tags" class="control-label col-md-2">Tags: </label><br />
<div class="col-md-10"><br />
<input class="form-control" id="tags"><br />
</div><br />
</div><br />
</div><br />
</div><br />
</div><br />
<br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<div>
<b>That's all.... </b></div>
<span style="font-family: inherit;">In this tutorial we've seen </span><b>how to write an HTTP Handler to feed an AUTOCOMPLETE JQUERYUI widget</b>.<span style="font-family: inherit;"> </span><br />
<b>Happy programming.....</b><br />
By Carmel Shvartzman<br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-39215880267964745892020-01-24T00:09:00.000-08:002020-01-24T00:09:16.489-08:00How to show a Bootstrap Alert by clicking a button <span style="font-family: inherit;">In this tutorial we'll learn</span> <b>how to show a Bootstrap Alert by clicking a button </b><span style="font-family: inherit;">. </span><br />
<br />
<a href="https://github.com/CarmelSchvartzman/BOOTSTRAP/blob/master/ALERT/ALERT_BY_BUTTON"><span style="font-size: x-small;">https://github.com/CarmelSchvartzman/BOOTSTRAP/blob/master/ALERT/ALERT_BY_BUTTON</span></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-07-t9LHjcTY/XWTbka4GydI/AAAAAAAANkc/qDtr-xDDb6sG5qypSRiCQO-LeG1gZTtMACLcBGAs/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="164" data-original-width="518" height="126" src="https://1.bp.blogspot.com/-07-t9LHjcTY/XWTbka4GydI/AAAAAAAANkc/qDtr-xDDb6sG5qypSRiCQO-LeG1gZTtMACLcBGAs/s400/1.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-KC3rTylWaiw/XWTbkcWsyKI/AAAAAAAANkg/Trt06jOu0n8L0t8EaK7h-ByHHzb-VdM9gCLcBGAs/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="172" data-original-width="546" height="125" src="https://1.bp.blogspot.com/-KC3rTylWaiw/XWTbkcWsyKI/AAAAAAAANkg/Trt06jOu0n8L0t8EaK7h-ByHHzb-VdM9gCLcBGAs/s400/2.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-rTRL3w1g8ME/XWTbkZY45kI/AAAAAAAANkk/OTgKPz2fS_oMo0LyKLnqJXsRTGgVUqnKgCLcBGAs/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="182" data-original-width="578" height="125" src="https://1.bp.blogspot.com/-rTRL3w1g8ME/XWTbkZY45kI/AAAAAAAANkk/OTgKPz2fS_oMo0LyKLnqJXsRTGgVUqnKgCLcBGAs/s400/3.PNG" width="400" /></a></div>
<br />
<br />
<br />
<h3 style="text-align: center;">
<b>How to show a Bootstrap Alert by clicking a button </b></h3>
<br />
<br />
We create a new HTML webpage, as follows:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<!DOCTYPE html><br />
<html lang="en"><br />
<head><br />
<title>Bootstrap Example</title><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"><br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><br />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script><br />
<br />
</head><br />
<body><br />
<br />
<div class="container"><br />
<div class='jumbotron'><br />
<h3>Open an Alert by clicking this button</h3><br />
<button class='btn btn-info btn-sm' <b>data-target='#myalert' data-toggle='modal'</b>>Alert</button> <br />
<br />
<br />
<div<b> class='modal' id='myalert'</b>> <br />
<div <b>class='modal-dialog'</b>><br />
<div class='alert alert-info alert-dismissible' > <<<<<<<<<<< <span style="font-size: x-small;"><b>DO NOT SET "FADE" !</b></span><br />
<strong>This is an alert opened by a button</strong><br />
<button class='close' <b>data-dismiss='modal'</b>><span class='glyphicon glyphicon-cloud'></span></button><br />
<br />
</div><br />
</div><br />
</div><br />
<br />
</div><br />
</div><br />
</body><br />
</html><br />
<br />
Pay attention to the code marked <b>bold </b>. Tha't the important part.<br />
<br />
<div>
<b>That's all.... </b></div>
<span style="font-family: inherit;">In this tutorial we've seen </span><span style="font-family: inherit;"><b>how to show a Bootstrap Alert by clicking a button </b> </span><br />
<b>Happy programming.....</b><br />
By Carmel Shvartzman<br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-10072833350310638382020-01-10T02:16:00.000-08:002020-01-10T02:16:17.093-08:00Calling a JS Promise for display in a showable Bootstrap Alert<br />
<span style="font-family: inherit;">In this tutorial we'll learn</span> <b>how to call a JS Promise for display in a showable Bootstrap Alert </b><span style="font-family: inherit;">. </span><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-jlFspbnvtXQ/XWTWaT4Fj6I/AAAAAAAANjo/l8INprVDhkwFX8kdTscitCCMQZoJIFEVACLcBGAs/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="245" data-original-width="518" height="188" src="https://1.bp.blogspot.com/-jlFspbnvtXQ/XWTWaT4Fj6I/AAAAAAAANjo/l8INprVDhkwFX8kdTscitCCMQZoJIFEVACLcBGAs/s400/1.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-swKQ7N_3RZA/XWTWaYMyCYI/AAAAAAAANjk/e7P279ETeTAKJAQ-3Ge34YYxhdVQCThKwCLcBGAs/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="325" data-original-width="994" height="208" src="https://1.bp.blogspot.com/-swKQ7N_3RZA/XWTWaYMyCYI/AAAAAAAANjk/e7P279ETeTAKJAQ-3Ge34YYxhdVQCThKwCLcBGAs/s640/2.PNG" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-cgzD9Bt97L0/XWTWaleC8RI/AAAAAAAANjs/EZMIDxCX0p4eql5-YIIgyV8Dr-weqnlLQCLcBGAs/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="322" data-original-width="1141" height="180" src="https://1.bp.blogspot.com/-cgzD9Bt97L0/XWTWaleC8RI/AAAAAAAANjs/EZMIDxCX0p4eql5-YIIgyV8Dr-weqnlLQCLcBGAs/s640/3.PNG" width="640" /></a></div>
<br />
<br />
<h3 style="text-align: center;">
Step by step h<b>ow to call a JS Promise for display in a showable Bootstrap Alert</b></h3>
<br />
<br />
We create a new HTML webpage , using the CDN from JQUERY and Bootstrap (that is only for displaying an Alert), as follows:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<!DOCTYPE html><br />
<html lang="en"><br />
<head><br />
<title>Bootstrap Example</title><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"><br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><br />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script><br />
<br />
<script><br />
$(()=>{<br />
<br />
///// the JS Promise :<br />
const fnPromise = (msg)=>{<br />
<br />
<span style="white-space: pre;"> </span>return new Promise((resolve,reject)=>{<br />
<br />
<span style="white-space: pre;"> </span>if(msg !== null && msg.length > 0) resolve('<strong> Success : </strong> ' + msg);<br />
<span style="white-space: pre;"> </span>else reject('Bad request');<br />
});<br />
}<br />
<br />
<span style="white-space: pre;"> </span>$('button').on({'click':()=>{<br />
<span style="white-space: pre;"> </span><br />
fnPromise('This alert box indicates a successful calling to a Promise method.').then((ret)=>{<br />
<span style="white-space: pre;"> </span>$('#spanMsg').html(ret);<br />
<span style="white-space: pre;"> </span>}, (error)=>{$('#spanMsg').html(error); });<br />
}});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<br />
<div class="container"><br />
<h2>Showing Alerts with a click</h2><br />
<p>This is an showable Alert including the call to a JavaScript Promise</p><br />
<button class='btn btn-info' data-target='#a1' data-toggle='modal' >Open Alert</button><br />
<div class='modal' id='a1'><br />
<div class='modal-dialog'><br />
<div class="alert alert-warning alert-dismissible" ><br />
<a href="#" class="close" data-dismiss="modal" aria-label="close"><span class='glyphicon glyphicon-check'></span></a><br />
<span id='spanMsg'></span><br />
</div><br />
</div><br />
</div><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
<div>
<b>That's all.... </b></div>
<span style="font-family: inherit;">In this tutorial we've seen </span><b>h</b><b>ow to call a JS Promise for display in a showable Bootstrap Alert</b><br />
<b>Happy programming.....</b><br />
By Carmel Shvartzman<br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-70459489165605996742019-12-27T05:12:00.001-08:002019-12-27T05:12:47.511-08:00 How to solve the Preflight CORS error "The requested resource does not support http method 'OPTIONS'"In this article we review <b>how to solve the Preflight CORS error "The requested resource does not support http method 'OPTIONS'" : 405 method not allowed :</b><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-Lir7EB-nqNQ/XgLwYCIo-vI/AAAAAAAAO78/glSyiSdhgqsnKPquQ0dQ-JP9bzojzP3HQCEwYBhgL/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="683" data-original-width="693" height="628" src="https://1.bp.blogspot.com/-Lir7EB-nqNQ/XgLwYCIo-vI/AAAAAAAAO78/glSyiSdhgqsnKPquQ0dQ-JP9bzojzP3HQCEwYBhgL/s640/5.PNG" width="640" /></a></div>
<b><br /></b>
<b><br /></b>
For several CORS requests, the browser sends a previous request, named "preflight request", before it sends the actual request for the resource.<br />
It is not enought to use the standard CORS (Cross Origin Resource Sharing) on web.config , in order to solve the problem.<br />
<div>
Here you can see the web.config settings, usually arranged to solve the problem :<br />
<br />
<br />
<img border="0" data-original-height="176" data-original-width="854" height="129" src="https://1.bp.blogspot.com/-t3NrBV5rav8/XgLwYnkmbWI/AAAAAAAAO8A/UD8O7YCE98AqpDm0ez1zShfDCcCkk0SvQCEwYBhgL/s640/6.PNG" style="color: #0000ee; text-align: center;" width="640" /><br />
<br />
<br />
<br />
<br />
<h3 style="text-align: center;">
How <b>to solve the Preflight CORS error "The requested resource does not support http method 'OPTIONS'"</b> using WebApi and Angular7</h3>
<div>
<br /></div>
<div>
<br /></div>
<div>
The issue appears while crossing domains, and relates to POST, PUT, PATCH, and DELETE methods:<br />
here you can see several requests , also from the Angular 7 app, as from POSTMAN :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-Cjj9bWmwRls/XgLwXwwiUsI/AAAAAAAAO8c/udR132CQO6Y3byA69u55Uage40ajvSXQgCEwYBhgL/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="559" data-original-width="1195" height="186" src="https://1.bp.blogspot.com/-Cjj9bWmwRls/XgLwXwwiUsI/AAAAAAAAO8c/udR132CQO6Y3byA69u55Uage40ajvSXQgCEwYBhgL/s400/3.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-5dqOHCvTuck/XgLwX5p8JlI/AAAAAAAAO8U/B9Css9PxGJkhZQXKuwBXOpheiJorjos2wCEwYBhgL/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="329" data-original-width="948" height="138" src="https://1.bp.blogspot.com/-5dqOHCvTuck/XgLwX5p8JlI/AAAAAAAAO8U/B9Css9PxGJkhZQXKuwBXOpheiJorjos2wCEwYBhgL/s400/4.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-xfV5KQXNGzo/XgLwWBt3ETI/AAAAAAAAO8U/6IQcaay_YWou_TznL9I5hodZ1tKCYjljACEwYBhgL/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="577" data-original-width="1204" height="191" src="https://1.bp.blogspot.com/-xfV5KQXNGzo/XgLwWBt3ETI/AAAAAAAAO8U/6IQcaay_YWou_TznL9I5hodZ1tKCYjljACEwYBhgL/s400/1.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-BseEguSQ2A0/XgLwXZrzRzI/AAAAAAAAO8Y/Mp5JzWOcxfgUhywmAXppnRAsbf0jNHmtQCEwYBhgL/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="588" data-original-width="1183" height="198" src="https://1.bp.blogspot.com/-BseEguSQ2A0/XgLwXZrzRzI/AAAAAAAAO8Y/Mp5JzWOcxfgUhywmAXppnRAsbf0jNHmtQCEwYBhgL/s400/2.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-O8RbZeFAJig/XgLwWEd5eVI/AAAAAAAAO8c/c90q5ANdnoUeokemZsc34nnNloXkzbNJQCEwYBhgL/s1600/0.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="329" data-original-width="948" height="138" src="https://1.bp.blogspot.com/-O8RbZeFAJig/XgLwWEd5eVI/AAAAAAAAO8c/c90q5ANdnoUeokemZsc34nnNloXkzbNJQCEwYBhgL/s400/0.PNG" width="400" /></a></div>
<br />
<br />
<br /></div>
<div>
As said, it is not enought to set the web.config to CORS.<br />
Now, usually the browser sends a previous request to the request that you are sending, named "preflight request", before it sends the actual request for the resource. This Preflight request is of OPTIONS type.<br />
If the response headers do not allow the required HTTP METHOD, the browser do not send it.<br />
<br />
The problem is, the WebApi app has not an action to process the Preflight OPTIONS request :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-4H4L1wRyddM/XgLwYj26U0I/AAAAAAAAO8c/vVwaaKy9IJExEsijVmBESwQiFX5dOCrrACEwYBhgL/s1600/7.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="630" data-original-width="727" height="346" src="https://1.bp.blogspot.com/-4H4L1wRyddM/XgLwYj26U0I/AAAAAAAAO8c/vVwaaKy9IJExEsijVmBESwQiFX5dOCrrACEwYBhgL/s400/7.PNG" width="400" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
That is what the error is trying to say us.<br />
<br />
So, just write an action for OPTIONS verb, that only responds an "OK", as this :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-hrbVeD9WRxw/XgLwYx6Ee0I/AAAAAAAAO8c/Yi1uqD0F8HA91zo2pxGAx2P9Ng92phiwgCEwYBhgL/s1600/8.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="137" data-original-width="794" height="110" src="https://1.bp.blogspot.com/-hrbVeD9WRxw/XgLwYx6Ee0I/AAAAAAAAO8c/Yi1uqD0F8HA91zo2pxGAx2P9Ng92phiwgCEwYBhgL/s640/8.PNG" width="640" /></a></div>
<br /></div>
<div>
Now try again. Send a request. The breakpoint will show the OPTIONS request being processed :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-tXLEHXYPebY/XgLwZfCCKmI/AAAAAAAAO8c/TL6wxpplQkc0kaGE4mBxpVH2svBRrLH5wCEwYBhgL/s1600/9.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="154" data-original-width="889" height="68" src="https://1.bp.blogspot.com/-tXLEHXYPebY/XgLwZfCCKmI/AAAAAAAAO8c/TL6wxpplQkc0kaGE4mBxpVH2svBRrLH5wCEwYBhgL/s400/9.PNG" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
Immediately after, the intended request is taken care of:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-eRtrbsLJ8pI/XgLwWDkctSI/AAAAAAAAO8Q/UwtpvGWy0GEndnNi1PnBYSak05RG4bvYQCEwYBhgL/s1600/10.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="182" data-original-width="622" height="116" src="https://1.bp.blogspot.com/-eRtrbsLJ8pI/XgLwWDkctSI/AAAAAAAAO8Q/UwtpvGWy0GEndnNi1PnBYSak05RG4bvYQCEwYBhgL/s400/10.PNG" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-lzDbvrE_om0/XgLwW0Jii2I/AAAAAAAAO8U/M6N7eILErNw3-D2HT1INxonhH-rYB7GiACEwYBhgL/s1600/11.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="602" data-original-width="455" height="400" src="https://1.bp.blogspot.com/-lzDbvrE_om0/XgLwW0Jii2I/AAAAAAAAO8U/M6N7eILErNw3-D2HT1INxonhH-rYB7GiACEwYBhgL/s400/11.PNG" width="301" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-Mq_kJIIKaZA/XgLwXIeIfqI/AAAAAAAAO8c/AuxmqQzOcYMiujhv4j1mymzq804IOAdOQCEwYBhgL/s1600/12.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="511" data-original-width="1175" height="173" src="https://1.bp.blogspot.com/-Mq_kJIIKaZA/XgLwXIeIfqI/AAAAAAAAO8c/AuxmqQzOcYMiujhv4j1mymzq804IOAdOQCEwYBhgL/s400/12.PNG" width="400" /></a></div>
<br /></div>
<div>
<br /></div>
<div>
That solves this issue.<br />
Have a good day :-)</div>
<div>
<br /></div>
<div>
<b>Enjoy Angular.....</b><br />
<b><br /></b><b> </b>by Carmel Schvartzman<br />
<br />
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b></div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com1tag:blogger.com,1999:blog-4898588871807377319.post-15777523650289207012019-12-06T03:22:00.000-08:002019-12-06T03:22:49.976-08:00jQuery Plugin to create Custom Animations<span style="font-weight: normal;">This review brings to you a free jQuery Plugin to create Custom Animations to be used into your Website , for both mobile and desktop displays . If you need some HTML5 specific animation to show your own customized reactions to the User's interactions, you can create your own jQuery animation and use it again and again:</span><br />
<br />
<div>
<br /></div>
<div style="box-sizing: border-box; margin-bottom: 16px;">
<div>
<div style="text-align: center;">
<b style="color: #333333; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 16px; line-height: 25.6000003814697px;"><i>Custom FREE </i></b><b><i><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">jQuery Plugin for creating custom Animations at runtime</span></i></b></div>
<b><i><span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br />
</span></i></b></div>
<div style="color: #333333; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 16px; line-height: 25.6000003814697px;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Kq5A1TjxcmU/VnbPUWs-m6I/AAAAAAAAMAg/dv78RAA-_ko/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Plugin to create Custom Animations" border="0" height="512" src="https://1.bp.blogspot.com/-Kq5A1TjxcmU/VnbPUWs-m6I/AAAAAAAAMAg/dv78RAA-_ko/s640/2.png" width="570" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-oSMc03dRmxY/VnbPUe9KBaI/AAAAAAAAMAM/bXwhZYtp9cc/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Plugin to create Custom Animations" border="0" height="470" src="https://1.bp.blogspot.com/-oSMc03dRmxY/VnbPUe9KBaI/AAAAAAAAMAM/bXwhZYtp9cc/s640/3.png" width="570" /></a></div>
<b><i><br />
</i></b> <br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<b><i><br />
</i></b><b><i><br />
</i></b><br />
<h1 style="border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: #333333; font-family: 'helvetica neue', helvetica, 'segoe ui', arial, freesans, sans-serif; font-size: 2.25em; line-height: 1.2; margin: 0px 0px 16px; padding-bottom: 0.3em; position: relative; text-align: center;">
<span style="font-size: large;">jQuery Plugin to create Custom Animations</span></h1>
<div>
<span style="font-size: large;"><br />
</span></div>
</div>
<span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "segoe ui" , "arial" , "freesans" , sans-serif;"><span style="line-height: 25.6000003814697px;"><b><i>1) Using the present jQuery plugin, you can create your own Custom Animations and use them in your website. </i></b></span></span><br />
<span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "segoe ui" , "arial" , "freesans" , sans-serif;"><span style="line-height: 25.6000003814697px;"><b><i>2) </i></b></span></span><span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "segoe ui" , "arial" , "freesans" , sans-serif;"><span style="line-height: 25.6px;"><b><i>This jQuery plugin includes support for all CSS3 changes</i></b></span></span><br />
<span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "segoe ui" , "arial" , "freesans" , sans-serif;"><span style="line-height: 25.6px;"><b><i>3) Also includes callback functions and speed settings.</i></b></span></span></div>
<div style="box-sizing: border-box; color: #333333; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 16px; line-height: 25.6000003814697px; margin-bottom: 16px;">
This Plugin can be get from the following GitHub repository:<br />
<a href="https://github.com/CarmelSoftware/jQueryPlugin_CustomAnimation" target="_blank">https://github.com/CarmelSoftware/jQueryPlugin_CustomAnimation</a><br />
<br />
<br />
The Plugin usage is explained in<span id="goog_61836602"></span><span id="goog_61836603"></span><a href="https://www.blogger.com/"></a> the following Tutorial:</div>
<div style="box-sizing: border-box; color: #333333; font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif; font-size: 16px; line-height: 25.6000003814697px; margin-bottom: 16px;">
<a href="http://carmelsoft.blogspot.com/2015/12/jquery-plugin-for-custom-animations.html" target="_blank">http://carmelsoft.blogspot.com/2015/12/jquery-plugin-for-custom-animations.html</a></div>
<div style="box-sizing: border-box; margin-bottom: 16px;">
<h3 style="font-size: 16px;">
</h3>
<h3 style="font-size: 16px;">
</h3>
<h3>
<u> Snapshots:</u> mobile devices :</h3>
<div>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-vYmupftm5mY/VnbPUuZBxMI/AAAAAAAAMAs/d_N6hs_o8tQ/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Plugin to create Custom Animations" border="0" height="486" src="https://1.bp.blogspot.com/-vYmupftm5mY/VnbPUuZBxMI/AAAAAAAAMAs/d_N6hs_o8tQ/s640/1.png" width="570" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Kq5A1TjxcmU/VnbPUWs-m6I/AAAAAAAAMAg/dv78RAA-_ko/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Plugin to create Custom Animations" border="0" height="512" src="https://1.bp.blogspot.com/-Kq5A1TjxcmU/VnbPUWs-m6I/AAAAAAAAMAg/dv78RAA-_ko/s640/2.png" width="570" /></a></div>
<br />
<h3>
<u><b>desktop machines :</b></u></h3>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-oSMc03dRmxY/VnbPUe9KBaI/AAAAAAAAMA0/weHiv39M_kE/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Plugin to create Custom Animations" border="0" height="470" src="https://2.bp.blogspot.com/-oSMc03dRmxY/VnbPUe9KBaI/AAAAAAAAMA0/weHiv39M_kE/s640/3.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
</div>
<h3>
<u><span style="font-size: large;"> Plugin Utilization:</span></u></h3>
<div>
This jQuery Plugin for Custom Animations can be used as follows:</div>
<div>
<br />
1) <u><b>Custom animation creation :</b></u><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-5WDAQZBZ86U/VnbPU9xUcCI/AAAAAAAAMAk/_bWAgXuuSuw/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Plugin to create Custom Animations" border="0" src="https://4.bp.blogspot.com/-5WDAQZBZ86U/VnbPU9xUcCI/AAAAAAAAMAk/_bWAgXuuSuw/s1600/4.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br />
2) <b><u>How to use the custom jQuery plugin in the code:</u></b><br />
<br />
<a href="http://2.bp.blogspot.com/-AApEpWTpMn8/VnbPU7S4kYI/AAAAAAAAMAo/bjrTruxSgHA/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="jQuery Plugin to create Custom Animations" border="0" height="342" src="https://2.bp.blogspot.com/-AApEpWTpMn8/VnbPU7S4kYI/AAAAAAAAMAo/bjrTruxSgHA/s640/5.png" width="570" /></a><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-x8BIb5Oltho/VnbPVLKN0WI/AAAAAAAAMAw/jKcMl-vuCAQ/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Plugin to create Custom Animations" border="0" height="348" src="https://1.bp.blogspot.com/-x8BIb5Oltho/VnbPVLKN0WI/AAAAAAAAMAw/jKcMl-vuCAQ/s640/6.png" width="570" /></a></div>
<br />
<br />
<br />
<span style="font-weight: normal;">by Carmel Schvartzman</span><span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "segoe ui" , "arial" , "freesans" , sans-serif; font-size: 1.25em; line-height: 1.4;"> - </span><a href="http://themvcclub.blogspot.com/" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">The MVC Club</a><span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "segoe ui" , "arial" , "freesans" , sans-serif; font-size: 1.25em; line-height: 1.4;"> </span><span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "segoe ui" , "arial" , "freesans" , sans-serif; font-size: 1.25em; line-height: 1.4;">-</span><span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "segoe ui" , "arial" , "freesans" , sans-serif; font-size: 1.25em; line-height: 1.4;"> </span><a href="http://thehtml5club.blogspot.com/" style="box-sizing: border-box; color: #4078c0; text-decoration: none;">The HTML5 Club</a><br />
<br />
<div>
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; direction: rtl; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
פיתוח: כרמל שוורצמן</div>
<br />
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
</div>
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<br /></div>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-41122466334767412752019-08-21T21:18:00.000-07:002019-08-21T21:18:59.865-07:00MVC Ajax WebGrid with Sorting and Paging<div class="separator" style="clear: both;">
In this <b>Step by step MVC Ajax WebGrid with Sorting and Paging in 10 Minutes </b></div>
we see how to build an Ajax enabled WebGrid using an jQueryUI Theme in 10 minutes, following this simple steps :<br />
<br />
<b>1) Use MVC scaffolding and build your Model and Views</b><br />
<b>2) Select a jQueryUI Theme & download it</b><br />
<b>3) In the "Index" View, replace the Table with a WebGrid and enable Ajax</b><br />
<br />
<br />
All the code in this tutorial , can be downloaded from the following GitHub repository:<br />
<a href="https://github.com/CarmelSoftware/MVC_WebGrid" target="_blank">https://github.com/CarmelSoftware/MVC_WebGrid</a><br />
<br />
This is how this sortable paged Ajax WebGrid is shown in the Ripple Mobile Emulator , Nexus Galaxy settings:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-iTisLpt_3Ys/VdwYrO4vGoI/AAAAAAAALoU/0ZyJk_S9wHc/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MVC Ajax WebGrid with Sorting and Paging" border="0" height="490" src="https://4.bp.blogspot.com/-iTisLpt_3Ys/VdwYrO4vGoI/AAAAAAAALoU/0ZyJk_S9wHc/s640/1.png" width="570" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
MVC Ajax WebGrid with Sorting and Paging in 10 Minutes</h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
The whole process of creating an Ajax WebGrid with a jQueryUI Theme , is as following:<br />
<br />
<h3 style="clear: both;">
<b>1) Use MVC scaffolding and build your Model and Views</b>:</h3>
<div>
First build your MVC project using EDM & Controller scaffolding.<br />
<br />
<br />
<h3 style="clear: both;">
<b>2) Select a jQueryUI Theme & download it</b></h3>
Browse to <a href="http://jqueryui.com/themeroller/" target="_blank">http://jqueryui.com/themeroller/</a> , select your Theme, and download it.<br />
After you unzip the folder, you'll see several files in it.<br />
You do not need all of them. Just copy the following 2 files and folder to your MVC project:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-H6TSXW9twrQ/VdwZNktR87I/AAAAAAAALoc/uIg-V_3aKFI/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MVC Ajax WebGrid with Sorting and Paging1" border="0" height="305" src="https://1.bp.blogspot.com/-H6TSXW9twrQ/VdwZNktR87I/AAAAAAAALoc/uIg-V_3aKFI/s400/6.png" width="400" /></a></div>
<br />
<br />
<br />
Paste the files inside your MVC project as follows:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-3QEckD0MFS4/VdwYr50UEfI/AAAAAAAALoE/5RbDEodXce8/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MVC Ajax WebGrid with Sorting and Paging2" border="0" height="400" src="https://1.bp.blogspot.com/-3QEckD0MFS4/VdwYr50UEfI/AAAAAAAALoE/5RbDEodXce8/s400/4.png" width="357" /></a></div>
<br />
<br />
As you can see, the <b>ONLY </b>files that we'll use from the jQueryUI theme are the following:<br />
<br />
<b>1) <u>JS folder </u>:</b><br />
"jquery-X.X.X.min.js" (here get the latest version of jQuery)<br />
"jquery-ui.min.js"<br />
<br />
<b>2) <u>CSS folder</u> :</b><br />
"jquery-ui.css"<br />
<br />
<br /></div>
<div>
<div class="separator" style="clear: both;">
Add the following references to the _Layout file:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-37BpJ4IRczc/VdwYsEM5CrI/AAAAAAAALoM/Ls1us-xZRBQ/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MVC Ajax WebGrid with Sorting and Paging3" border="0" height="456" src="https://1.bp.blogspot.com/-37BpJ4IRczc/VdwYsEM5CrI/AAAAAAAALoM/Ls1us-xZRBQ/s640/5.png" width="540" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
There is no need of referencing the "images" folder.</div>
<div class="separator" style="clear: both;">
Also, you get the latest version of jQuery framework : at this moment, that version is 2.1.4</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both;">
<b>3) In the "Index" View, replace the Table with a WebGrid and enable Ajax</b></h3>
<div>
Then go to the "Index" view, and comment the Table that was scaffolded there.<br />
Add the following markup to replace it:</div>
<div>
<br />
<span style="color: #274e13; font-size: x-small;"><b><link href="~/Content/index.css" rel="stylesheet" /></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>@{ var grid = new WebGrid(Model, new[] { "Title", "DatePosted", "MainPicture" }, rowsPerPage: 3, ajaxUpdateContainerId: "gridDIV"); }</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b><div id="gridDIV"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>@grid.GetHtml(tableStyle:"webgrid-table",headerStyle:"webgrid-header",</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b> columns: new[] {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b> grid.Column("ID",format:(item) => item.GetSelectLink(item.BlogID.ToString()) ) ,</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> grid.Column("Title",format:@<a href='/Blog/Comments/@item.BlogID'><b>@item.Title</b></a>),</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> grid.Column("DatePosted","DatePosted", (item) => String.Format("{0:dd/MM/yyyy}", item.DatePosted != null ? item.DatePosted : DateTime.Now )),</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> grid.Column("Picture",format:(item) =></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> { return new MvcHtmlString("<a href='/Blog/Comments/" + item.BlogID +</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> "'><img src='/Images/"+item.MainPicture+"' style='width:100px;height:100px;'></img></a>");</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> }),</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> grid.Column(</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> format:@<div class="ActionsTH"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> @Html.ActionLink("Edit", "Edit", new { id=item.BlogID })</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> @Html.ActionLink("Details", "Details", new { id=item.BlogID })</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> @Html.ActionLink("Delete", "Delete", new { id=item.BlogID })</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </div>)</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> })</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b></div></b></span></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
This code enable Ajax on the Grid, which comes already with Sorting and Paging functionality.<br />
Of course, customize this code with your Model's properties.<br />
<br />
As you can see, we also reference a <b style="color: #274e13; font-size: small;">"~/Content/index.css" file</b>:<br />
Inside this file, i added background style found in the "images" folder, such as <b style="color: #274e13; font-size: small;">"images/ui-bg_fine-grain" </b>corresponding to the Theme "Pepper-Grinder" .<br />
If you select another Theme, replace the backgrounds accordingly.<br />
Create this CSS file in the Content folder , and paste this style in it:<br />
<br />
<br />
<span style="color: #274e13; font-size: x-small;"><b>body {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> background: #f7f3de url("images/ui-bg_fine-grain_15_f7f3de_60x60.png") 50% 50% repeat;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.webgrid-table {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> font: italic 11px Verdana;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> width: 100%;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> display: grid;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> border-collapse: separate;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> border: solid 1px #98BF21;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> background: #f8f7f6 url("images/ui-bg_fine-grain_10_f8f7f6_60x60.png") 50% 50% repeat;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> padding: 5px 5px 5px 5px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> text-align: center;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.webgrid-header th {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> width: 150px; </b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> background: #eceadf url("images/ui-bg_fine-grain_10_eceadf_60x60.png") 50% 50% repeat;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> color: #FFFFFF !important;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> font: 900 14px Verdana !important;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> padding: 5px 5px 5px 5px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> text-align: center;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.ActionsTH {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> width: 50px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> background: #eceadf url("images/ui-bg_fine-grain_10_eceadf_60x60.png") 50% 50% repeat;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> color: #FFFFFF !important;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> font: 900 14px Verdana !important;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> padding: 5px 5px 5px 5px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> text-align: center;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> width: 180px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.webgrid-footer, .webgrid-footer a {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> background-color: #c67f1c;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> color: #FFF;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> font: 900 14px Verdana;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> padding: 3px 3px 3px 3px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.webgrid-alternating-row {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> background-color: #e5d773;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> padding: 5px 5px 5px 5px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.title-column {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> font: 900 13px Verdana;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> text-align: center;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.webgrid-img {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> width: 150px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> height: 150px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.webgrid-table a {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> text-decoration: none;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> color: #808080;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<div>
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Important:<br />
If you do not see the Ajax working (), it is because the jQuery scripts are lacking.<br />
Just cut the jQuery.js file from the _Layout file to the <head> tag :<br />
<span style="font-size: x-small;"><b> @Scripts.Render("~/bundles/jquery")</b></span><br />
<span style="font-size: x-small;"><b> @Scripts.Render("~/bundles/jqueryui")</b></span><br />
<span style="font-size: x-small;"><b></head></b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>THE END</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
To use a Mobile devices Emulator, take a look at this short <a href="http://themvcclub.blogspot.com/2015/05/how-to-install-ripple-mobile-app-emulator-for-android-blackberry-nokia-ipad-iphone-in-5-minutes.html" target="_blank">tutorial on installing the FREE Ripple Emulator</a>.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
That's all. Our WebGrid will be displayed this way:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-tuib7pbrTys/VdwYrIE3yYI/AAAAAAAALoI/vpulkph30qE/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MVC Ajax WebGrid with Sorting and Paging4" border="0" height="386" src="https://4.bp.blogspot.com/-tuib7pbrTys/VdwYrIE3yYI/AAAAAAAALoI/vpulkph30qE/s640/3.png" width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-iTisLpt_3Ys/VdwYrO4vGoI/AAAAAAAALoU/0ZyJk_S9wHc/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MVC Ajax WebGrid with Sorting and Paging5" border="0" height="490" src="https://4.bp.blogspot.com/-iTisLpt_3Ys/VdwYrO4vGoI/AAAAAAAALoU/0ZyJk_S9wHc/s640/1.png" width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-IoCtFnTVCwk/VdwYrYlXblI/AAAAAAAALoA/vM0v4FJ1lyE/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MVC Ajax WebGrid with Sorting and Paging6" border="0" height="640" src="https://1.bp.blogspot.com/-IoCtFnTVCwk/VdwYrYlXblI/AAAAAAAALoA/vM0v4FJ1lyE/s640/2.png" width="450" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div>
<b> </b>by Carmel Schvartzman<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b></div>
</div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com1tag:blogger.com,1999:blog-4898588871807377319.post-58966421904756106052018-07-09T04:16:00.001-07:002018-07-09T04:16:11.731-07:00WCF Error - SOLVED - Service Attribute value could not be found in ServiceHost directive<br />
In this article we take care of the WCF Error<span class="Apple-tab-span" style="white-space: pre;"> </span> '<span class="Apple-tab-span" style="white-space: pre;"> </span>Service Attribute value could not be found in ServiceHost directive', after changing a WCF Service properties or configuration.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-nK5bs-gyugI/VkQ_g1HrqoI/AAAAAAAALuw/Drh7hicDgGs/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="WCF Error - Service Attribute value could not be found in ServiceHost directive" border="0" height="212" src="https://1.bp.blogspot.com/-nK5bs-gyugI/VkQ_g1HrqoI/AAAAAAAALuw/Drh7hicDgGs/s640/1.png" width="570" /></a></div>
<br />
<br />
<h3 style="text-align: center;">
WCF Error - Service Attribute value could not be found in ServiceHost directive</h3>
<div>
<br /></div>
<div>
The error is originated after you changed some properties on a WCF web service.<br />
For example, you created a web service using a Visual Studio template, which sets a WCF service usually called "Service1".<br />
<br />
You customized the service and, after everything seems OK, you realize that the name of the service is inappropriate, and you change it and the class/interface behind it.<br />
The web service stops working.<br />
Now , the ERROR message says that the TYPE of the web service could not be found.<br />
The clue here is that could not be found in the "ServiceHost" directive.<br />
You take a look at the classes in your project, but can't see the Service Host:</div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-246mBS5vNiI/VkQ_g4RdN2I/AAAAAAAALus/jnvwEjXROT0/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="WCF Error - Service Attribute value could not be found in ServiceHost directive" border="0" height="400" src="https://2.bp.blogspot.com/-246mBS5vNiI/VkQ_g4RdN2I/AAAAAAAALus/jnvwEjXROT0/s400/2.png" width="340" /></a></div>
<br />
Perform a search inside your project, looking for the "ServiceHost", and add "@" to the search since we're talking about an MVC Directive:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-9Z4xLz2qpPo/VkQ_g0LwbBI/AAAAAAAALuo/9YNzWc5YGW8/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="WCF Error - Service Attribute value could not be found in ServiceHost directive" border="0" height="163" src="https://1.bp.blogspot.com/-9Z4xLz2qpPo/VkQ_g0LwbBI/AAAAAAAALuo/9YNzWc5YGW8/s400/3.png" width="400" /></a></div>
You'll find a small HTML file with the Directive: this is the markup which enables a hosting of your web service at the development stage:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-pjzvV1yZZJ0/VkQ_hBcyA0I/AAAAAAAALvM/G39WXASEIh8/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="WCF Error - Service Attribute value could not be found in ServiceHost directive" border="0" height="82" src="https://1.bp.blogspot.com/-pjzvV1yZZJ0/VkQ_hBcyA0I/AAAAAAAALvM/G39WXASEIh8/s640/4.png" width="570" /></a></div>
<br />
As you can see, when you renamed your service, Visual Studio updated the change of the name at the CodeBehind attribute, but didn't automatically renamed the <u>TYPE exposed by the web service</u>, in our example "RestService" instead of "Service1":<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-xSIcQ1R46wU/VkQ_hV1oZuI/AAAAAAAALvA/DAlXqh81CYI/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="WCF Error - Service Attribute value could not be found in ServiceHost directive" border="0" height="216" src="https://3.bp.blogspot.com/-xSIcQ1R46wU/VkQ_hV1oZuI/AAAAAAAALvA/DAlXqh81CYI/s640/5.png" width="570" /></a></div>
<br />
So, change the Service to the one you wish, and run it:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-lOu2GVZ73lM/VkQ_hS2_VWI/AAAAAAAALu8/5YoVLzhll3A/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="WCF Error - Service Attribute value could not be found in ServiceHost directive" border="0" height="138" src="https://4.bp.blogspot.com/-lOu2GVZ73lM/VkQ_hS2_VWI/AAAAAAAALu8/5YoVLzhll3A/s400/6.png" width="400" /></a></div>
Now you get it in JSON WebMessageFormat. If you wanted XML, just don't set any ResponseFormat, and you'll get the XML default format for WCF web services:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-d__9ZLQIcPg/VkQ_h26IrDI/AAAAAAAALvE/ZRYFrU8Bmqc/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="WCF Error - Service Attribute value could not be found in ServiceHost directive" border="0" src="https://2.bp.blogspot.com/-d__9ZLQIcPg/VkQ_h26IrDI/AAAAAAAALvE/ZRYFrU8Bmqc/s1600/7.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ob3fMY_x6So/VkQ_h3T4VcI/AAAAAAAALvI/7zoF-Hd4hRQ/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="WCF Error - Service Attribute value could not be found in ServiceHost directive" border="0" height="188" src="https://3.bp.blogspot.com/-ob3fMY_x6So/VkQ_h3T4VcI/AAAAAAAALvI/7zoF-Hd4hRQ/s640/8.png" width="570" /></a></div>
<br />
<br /></div>
<div>
<br /></div>
<div>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;">
<div style="margin: 0px;">
That's all!!!!</div>
<div style="margin: 0px;">
<br /></div>
<div style="margin: 0px;">
<br /></div>
<div style="margin: 0px;">
By Carmel Shvartzman</div>
<div style="margin: 0px;">
<br /></div>
<div style="margin: 0px;">
עריכה: כרמל שוורצמן</div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-6394405840887880152018-06-19T06:01:00.000-07:002018-06-19T06:01:28.303-07:00Make a WCF RESTful Web Service with CRUD operations in 5 minutes<div class="separator" style="clear: both;">
In this <b>Step by step we Make a WCF RESTful Web Service with CRUD operations in 5 minutes </b></div>
we see how to build a WCF REST web service with all CRUD operations to be Ajax called, all this in just 5 minutes, following this simple steps :<br />
<br />
<b>1) Use Visual Studio templates and build an Ajax WCF web service</b><br />
<b>2) Customize it to support RESTful calls in JSON format (can also be XML)</b><br />
<b>3) Code all C.R.U.D. (Create Read Update Delete) operations</b><br />
<br />
<br />
The whole code for this tutorial , can be downloaded from the following GitHub repository:<br />
<a href="https://github.com/CarmelSoftware/WCF_RESTful_WebService" target="_blank">https://github.com/CarmelSoftware/WCF_RESTful_WebService</a><br />
To build this service, we use a demo class which will be exposed by the REST service through HTTP calls, that you can later replace with your own EDM data model classes.<br />
This an HTTP GET response from this RESTful WCF service :<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-4M5h24lfUWI/VkmHdWfB8oI/AAAAAAAALyI/Fn1EeO4O56E/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="188" src="https://3.bp.blogspot.com/-4M5h24lfUWI/VkmHdWfB8oI/AAAAAAAALyI/Fn1EeO4O56E/s640/9.png" width="570" /></a></div>
And this other is an HTTP PATCH request-response from this WCF REST service:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-4HOsvRruqdE/VkmHa_rwGdI/AAAAAAAALxM/z1T38gX50G8/s1600/16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="586" src="https://4.bp.blogspot.com/-4HOsvRruqdE/VkmHa_rwGdI/AAAAAAAALxM/z1T38gX50G8/s640/16.png" width="570" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
Make a WCF RESTful Web Service with CRUD operations in 5 minutes</h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
The whole process for making this REST service , is as follows :<br />
<br />
<h3 style="clear: both;">
<b>1) </b><b><u>Use Visual Studio templates and build an Ajax WCF web service</u></b>:</h3>
<div>
First build an ASP.NET Web Application using this Visual Studio template:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-KEtB0YE-08k/VkmHZ4GVxvI/AAAAAAAALwc/SipKaI7_WSs/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="442" src="https://4.bp.blogspot.com/-KEtB0YE-08k/VkmHZ4GVxvI/AAAAAAAALwc/SipKaI7_WSs/s640/1.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Then, add an AJAX enabled WCF web service to the project:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-GKS2_XtayRw/VkmHb7fYkFI/AAAAAAAALxY/O1X0so39DOQ/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="442" src="https://1.bp.blogspot.com/-GKS2_XtayRw/VkmHb7fYkFI/AAAAAAAALxY/O1X0so39DOQ/s640/2.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
You'll get the following usable skeleton for the WCF service:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-Nbm27UQlafQ/VkmHc4ilR0I/AAAAAAAALyA/oqMv6dC1epA/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="288" src="https://4.bp.blogspot.com/-Nbm27UQlafQ/VkmHc4ilR0I/AAAAAAAALyA/oqMv6dC1epA/s640/3.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Take a look at the web.config file to see the WCF service configuration:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-KMVMrVpj1a0/VkmHbyIrS8I/AAAAAAAALxg/b3we401pYxk/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="370" src="https://3.bp.blogspot.com/-KMVMrVpj1a0/VkmHbyIrS8I/AAAAAAAALxg/b3we401pYxk/s640/4.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
As you can see , there is an endpoint which wears the name of the Web service class.</div>
<div class="separator" style="clear: both; text-align: center;">
The "enableWebScript " behavior sets that the service will respond to AJAX calls.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<h3 style="clear: both;">
<b>2) </b><b><u>Customize it to support RESTful calls in JSON format (can also be XML)</u></b></h3>
First thing we do, is to change the endpoint behavior to turn it into a REST service, using the "webHttp" directive, as follows:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-SJV9EhvFCTI/VkmHcIeadcI/AAAAAAAALxo/ZenLr_BYp_Y/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="346" src="https://1.bp.blogspot.com/-SJV9EhvFCTI/VkmHcIeadcI/AAAAAAAALxo/ZenLr_BYp_Y/s640/5.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Notice that this directive replaces the "enableWebScript" one.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
To make run this service, we design a demo class called "Data", which will be exposed by the REST service through HTTP calls:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/--9LbyjleYAg/VkmHdY3ahaI/AAAAAAAALyM/hlEbAzf53-A/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="330" src="https://1.bp.blogspot.com/--9LbyjleYAg/VkmHdY3ahaI/AAAAAAAALyM/hlEbAzf53-A/s640/6.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
This data will be decorated with the DataContract directive, and the properties will be DataMembers.</div>
<div class="separator" style="clear: both; text-align: center;">
We also add some constructors to create some records and return them by the service.</div>
<div class="separator" style="clear: both; text-align: center;">
After you have your WCF RESTful service working, you will replace this demo class with some EDM data model classes of your own.</div>
<div class="separator" style="clear: both; text-align: center;">
Remember to declare "serializable" your model.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both;">
<b>3) </b><b>Code all C.R.U.D. (Create Read Update Delete) operations</b></h3>
<div>
Then go to the WCF class and replace the "DoWork" method with the HTTP GET method to return ALL items:<br />
<br />
<br />
<b><u>HTTP GET :</u></b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-2E_py-1hPDc/VkmHcgSHFYI/AAAAAAAALx0/DoxaDO-qlxs/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="306" src="https://1.bp.blogspot.com/-2E_py-1hPDc/VkmHcgSHFYI/AAAAAAAALx0/DoxaDO-qlxs/s640/7.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
We specify the handle for HTTP GET requests, by using the attribute "WebGet".</div>
<div class="separator" style="clear: both; text-align: center;">
Also, we stipulate the response format as JSON, since the default is XML.</div>
<div class="separator" style="clear: both; text-align: center;">
And we set an UriTemplate as "/Get" , which will differentiate this method from the second GET one, which will return only one item according to the ID, which you will code as follows:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-IfN8UpmUJW4/VkmHdFI_DhI/AAAAAAAALx8/wHtzimEi9vs/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="130" src="https://2.bp.blogspot.com/-IfN8UpmUJW4/VkmHdFI_DhI/AAAAAAAALx8/wHtzimEi9vs/s640/8.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
Notice that the return value is an array of Data objects and a single Data object, accordingly:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-4M5h24lfUWI/VkmHdWfB8oI/AAAAAAAALyI/Fn1EeO4O56E/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="188" src="https://3.bp.blogspot.com/-4M5h24lfUWI/VkmHdWfB8oI/AAAAAAAALyI/Fn1EeO4O56E/s640/9.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-RRvrjIekiJo/VkmHZ12lAGI/AAAAAAAALyQ/Mu-zaBNJ-M0/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="216" src="https://1.bp.blogspot.com/-RRvrjIekiJo/VkmHZ12lAGI/AAAAAAAALyQ/Mu-zaBNJ-M0/s640/10.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b><u>HTTP POST :</u></b></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
The POST HTTP verb is used to CREATE a new item, and we define it using the WebInvoke attribute:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-_UTq74rKiaM/VkmHZ2RXuzI/AAAAAAAALyE/Y8QuXk-Dx4A/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="204" src="https://1.bp.blogspot.com/-_UTq74rKiaM/VkmHZ2RXuzI/AAAAAAAALyE/Y8QuXk-Dx4A/s640/11.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
We only want to check that our REST service works, so that just return the same Data object from the request (here i'm using <a href="https://chrome.google.com/webstore/category/apps" target="_blank">POSTMAN </a>to send HTTP requests. You can also use <a href="http://www.telerik.com/download/fiddler" target="_blank">FIDDLER</a> for that):</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-23VfmyQwn-E/VkmHaS2sasI/AAAAAAAALwo/v6vQTbhQOwY/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="638" src="https://2.bp.blogspot.com/-23VfmyQwn-E/VkmHaS2sasI/AAAAAAAALwo/v6vQTbhQOwY/s640/12.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: red;"><u><b>Important:</b></u> the JSON object in the request's body must hold the field's data with exactly the same field names set in the DataMembers in your service: it is case-sensitive ("Id" means "Id", and no "id", got it?).</span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<b><u>HTTP PUT:</u></b></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
The PUT HTTP VERB is used to update the entire item, i.e. to replace it with an updated one, and we do so by using the WebInvoke PUT option as follows:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-0jJoMkMUr0s/VkmHaQ8l_YI/AAAAAAAALyU/wEhRkTl6tX4/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="174" src="https://1.bp.blogspot.com/-0jJoMkMUr0s/VkmHaQ8l_YI/AAAAAAAALyU/wEhRkTl6tX4/s640/13.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
The binder will give you the Date object from the request, if the names of the fields being the same as the class in a case-sensitive way, and also will give you the ID of the item to update. Check that you wrote EXACTLY the same variable name for this : "Put/{id}" == string "id" .</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Test this method from POSTMAN sending an PUT request with a JSON object in the body:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-vd57UUfPTfc/VkmHaqFyAGI/AAAAAAAALw0/5YGLrX4AfKY/s1600/14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="610" src="https://2.bp.blogspot.com/-vd57UUfPTfc/VkmHaqFyAGI/AAAAAAAALw0/5YGLrX4AfKY/s640/14.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<u style="color: red;"><b>Important:</b></u><span style="color: red;"> the JSON object inside the request's body must contain the field's data with exactly the same field names set in the DataMembers in your service: it is case-sensitive ("Id" means "Id", and no "id").</span></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<b><u>HTTP PATCH</u></b> :<br />
<br />
The HTTP PATCH verb is used in REST for updating just some of the object's fields:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-2U6hmgOn8UQ/VkmHahHzRCI/AAAAAAAALws/4uZSi2gwwio/s1600/15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="184" src="https://4.bp.blogspot.com/-2U6hmgOn8UQ/VkmHahHzRCI/AAAAAAAALws/4uZSi2gwwio/s640/15.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Again, test it using this REST call with the HTTP PATCH verb:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-4HOsvRruqdE/VkmHa_rwGdI/AAAAAAAALxM/z1T38gX50G8/s1600/16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="586" src="https://4.bp.blogspot.com/-4HOsvRruqdE/VkmHa_rwGdI/AAAAAAAALxM/z1T38gX50G8/s640/16.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<b><u>HTTP DELETE</u></b> :</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Finally, create the method to handle HTTP DELETE requests, as follows:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-4rdA3cefYGc/VkmHbFHqx2I/AAAAAAAALw8/-UmmXg8k4PA/s1600/17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="168" src="https://2.bp.blogspot.com/-4rdA3cefYGc/VkmHbFHqx2I/AAAAAAAALw8/-UmmXg8k4PA/s640/17.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-5Y9XEJ5pUOw/VkmHbkc9RAI/AAAAAAAALxU/6eiDv-CYuG8/s1600/18.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Make a WCF RESTful Web Service with CRUD operations in 5 minutes" border="0" height="380" src="https://1.bp.blogspot.com/-5Y9XEJ5pUOw/VkmHbkc9RAI/AAAAAAAALxU/6eiDv-CYuG8/s640/18.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>THE END</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
That's all. Now you have a working WCF RESTful web service , and you can replace the Data model with your own.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div>
<b> </b>by Carmel Schvartzman<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b></div>
</div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-70774259660300832892016-03-31T03:08:00.000-07:002016-04-07T12:06:48.870-07:00Install jQueryUI Themes in your MVC App in 5 Minutes<div class="separator" style="clear: both;">
In this <b>Step by step Install jQueryUI Themes in your MVC App in 5 Minutes </b></div>
we see how to get your chosen jQueryUI Theme and use it inside your MVC application in 5 minutes, following this simple steps :<br />
<br />
<b>1) Select a Theme & download it</b><br />
<b>2) Select ONLY the script and style files you need</b><br />
<b>3) Reference them from your HTML5 file</b><br />
<br />
<br />
This is how this jQueryUI Application is shown in the Ripple Mobile Emulator , for Nexus Galaxy:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<a href="http://1.bp.blogspot.com/-Zp3nisyHfX4/Vdl83d4wPJI/AAAAAAAALnM/6X82wd4O5FY/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Install jQueryUI Themes in your MVC App in 5 Minutes" border="0" height="640" src="https://1.bp.blogspot.com/-Zp3nisyHfX4/Vdl83d4wPJI/AAAAAAAALnM/6X82wd4O5FY/s640/8.png" width="466" /></a><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Elfni276V-Y/Vdl80z10X4I/AAAAAAAALmc/RZJKVh_72Xs/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Install jQueryUI Themes in your MVC App in 5 Minutes 1" border="0" height="640" src="https://1.bp.blogspot.com/-Elfni276V-Y/Vdl80z10X4I/AAAAAAAALmc/RZJKVh_72Xs/s640/10.png" width="424" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
Install jQueryUI Themes in your MVC App in 5 Minutes</h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
The whole process of downloading a jQueryUI Theme , selecting the files you need , and using the Theme in your MVC app, are as following:<br />
<br />
<h3 style="clear: both;">
1) Select a Theme & download it:</h3>
<div>
Browse to <a href="http://jqueryui.com/" target="_blank">jQueryUI.com</a> , and open the "Themes" page:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-oTxaCIIiQ4o/Vdl80xm4X2I/AAAAAAAALm0/NTGIyqqOWeg/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Install jQueryUI Themes in your MVC App in 5 Minutes" border="0" height="528" src="https://2.bp.blogspot.com/-oTxaCIIiQ4o/Vdl80xm4X2I/AAAAAAAALm0/NTGIyqqOWeg/s640/1.png" width="540" /></a></div>
<br />
Select from the ThemeRoller the Theme you want to apply to your web site , clicking the "Download" button :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-OXgHiBq_vjk/Vdl81KnBUCI/AAAAAAAALmg/isoTzD0tQ9k/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Install jQueryUI Themes in your MVC App in 5 Minutes" border="0" height="616" src="https://4.bp.blogspot.com/-OXgHiBq_vjk/Vdl81KnBUCI/AAAAAAAALmg/isoTzD0tQ9k/s640/2.png" width="540" /></a></div>
<br />
We use the former version because it is more stable .<br />
Check all checkboxes if they are not :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-K4oALjfPGP0/Vdl81VNEBHI/AAAAAAAALm4/3sIvFIC-rgg/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Install jQueryUI Themes in your MVC App in 5 Minutes 2" border="0" height="616" src="https://4.bp.blogspot.com/-K4oALjfPGP0/Vdl81VNEBHI/AAAAAAAALm4/3sIvFIC-rgg/s640/3.png" width="540" /></a></div>
<br />
<div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
Download the theme to your machine.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both;">
2) <b>Select ONLY the script and style files you need</b>:</h3>
Unzip and open the downloaded theme, as you can see here:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-SFBcsLW6ZJ0/Vdl82Drni7I/AAAAAAAALnE/DSUMnB_nHKo/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Install jQueryUI Themes in your MVC App in 5 Minutes 3" border="0" height="265" src="https://1.bp.blogspot.com/-SFBcsLW6ZJ0/Vdl82Drni7I/AAAAAAAALnE/DSUMnB_nHKo/s400/4.png" width="400" /></a></div>
<br />
Copy- paste the CSS and JS folders to your MVC project.<br />
The <b>ONLY </b>files that the theme will need are the following:<br />
<br />
<b>1) <u>JS folder </u>:</b><br />
"jquery-X.X.X.min.js"<br />
"jquery-ui-1.9.2.custom.min.js"<br />
<br />
<b>2) <u>CSS folder</u> :</b><br />
"jquery-ui-1.9.2.custom.css"<br />
<br />
<br />
<br />
Inside the JS folder, replace the jQuery framework script file that comes with the jQueryUI theme, with the latest version:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ubPIsErrduk/Vdl82i6w1JI/AAAAAAAALnU/v0sXG00Oadg/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Install jQueryUI Themes in your MVC App in 5 Minutes" border="0" height="204" src="https://3.bp.blogspot.com/-ubPIsErrduk/Vdl82i6w1JI/AAAAAAAALnU/v0sXG00Oadg/s400/6.png" width="400" /></a></div>
<br />
And replace the corresponding reference in the HTML5 file :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-KToRX_4cbos/Vdl83KQqA1I/AAAAAAAALnI/15GfvMKexPM/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Install jQueryUI Themes in your MVC App in 5 Minutes 4" border="0" height="200" src="https://3.bp.blogspot.com/-KToRX_4cbos/Vdl83KQqA1I/AAAAAAAALnI/15GfvMKexPM/s640/7.png" width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
To take advantage of a Mobile Emulator, take a look at this short <a href="http://themvcclub.blogspot.com/2015/05/how-to-install-ripple-mobile-app-emulator-for-android-blackberry-nokia-ipad-iphone-in-5-minutes.html" target="_blank">tutorial on installing the FREE Ripple Emulator</a>.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
That's all. Our jQueryUI theme will be displayed this way:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Zp3nisyHfX4/Vdl83d4wPJI/AAAAAAAALnM/6X82wd4O5FY/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Install jQueryUI Themes in your MVC App in 5 Minutes 5" border="0" height="640" src="https://1.bp.blogspot.com/-Zp3nisyHfX4/Vdl83d4wPJI/AAAAAAAALnM/6X82wd4O5FY/s640/8.png" width="466" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-nXo3haUQVcQ/Vdl84ZDq4nI/AAAAAAAALnc/Xwvn2sgskr0/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Install jQueryUI Themes in your MVC App in 5 Minutes 6" border="0" height="640" src="https://3.bp.blogspot.com/-nXo3haUQVcQ/Vdl84ZDq4nI/AAAAAAAALnc/Xwvn2sgskr0/s640/9.png" width="440" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Elfni276V-Y/Vdl80z10X4I/AAAAAAAALmc/RZJKVh_72Xs/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Install jQueryUI Themes in your MVC App in 5 Minutes 7" border="0" height="640" src="https://1.bp.blogspot.com/-Elfni276V-Y/Vdl80z10X4I/AAAAAAAALmc/RZJKVh_72Xs/s640/10.png" width="424" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div>
<b> </b>by Carmel Schvartzman<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b></div>
</div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com1tag:blogger.com,1999:blog-4898588871807377319.post-43612548149477156342016-01-30T10:00:00.000-08:002016-01-30T10:00:08.846-08:00Step by step how to send an HTTP DELETE Request to an RESTful WCF Service using Fiddler<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
</div>
<span style="font-family: inherit;">In this tutorial we'll learn</span> <b>how to create an HTTP DELETE Request to an RESTful WCF application using Fiddler</b><span style="font-family: inherit;">. </span><br />
We'll use Fiddler for testing purposes of a RESTful WCF application, sending HTTP DELETE requests. We'll start with a WCF application, and we'll remove an entry using Fiddler, showing as follows :<br />
<br />
<br />
<a href="http://1.bp.blogspot.com/-AkDS8ISdEl0/U4HWINakW9I/AAAAAAAAEVs/90HIHrkuIho/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="406" src="http://1.bp.blogspot.com/-AkDS8ISdEl0/U4HWINakW9I/AAAAAAAAEVs/90HIHrkuIho/s1600/9.png" width="570" /></a><br />
<a href="http://2.bp.blogspot.com/-zqQtzWfshZw/U4HWEYbiIfI/AAAAAAAAEVw/RcQqAuwn7TY/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="314" src="http://2.bp.blogspot.com/-zqQtzWfshZw/U4HWEYbiIfI/AAAAAAAAEVw/RcQqAuwn7TY/s1600/10.png" width="570" /></a><br />
<br />
First of all, we have to download the FREE Fiddler tool from <a href="http://www.telerik.com/download/fiddler" target="_blank">this web site</a> :<br />
<br />
<a href="http://3.bp.blogspot.com/-fbLd3WYLBls/U4HWD0EvR_I/AAAAAAAAEUw/Wwdlu4Aub3g/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="448" src="http://3.bp.blogspot.com/-fbLd3WYLBls/U4HWD0EvR_I/AAAAAAAAEUw/Wwdlu4Aub3g/s1600/2.png" width="570" /></a><br />
<br />
Now check the settings of the Operation Contract at the WCF Service Contract, in order to provide exactly what it is expected:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-HJNnx3a23Ts/U-CWNbMcL3I/AAAAAAAAFjM/558w1560CNw/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="512" src="http://2.bp.blogspot.com/-HJNnx3a23Ts/U-CWNbMcL3I/AAAAAAAAFjM/558w1560CNw/s1600/4.png" width="570" /></a></div>
<br />
<br />
<br />
The WebInvoke is set to handle the DELETE HTTP method, and the request format is supposed to be JSON, the same as the response format. So, we'll send what the WCF wants.<br />
Open Fiddler and find the "Composer" option:<br />
<br />
<a href="http://4.bp.blogspot.com/-MDwfS7Uc-qY/U4HWEiCSUSI/AAAAAAAAEU8/Idlz4udunF4/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="400" src="http://4.bp.blogspot.com/-MDwfS7Uc-qY/U4HWEiCSUSI/AAAAAAAAEU8/Idlz4udunF4/s1600/3.png" width="387" /></a><br />
<br />
<br />
Then type in the WCF service URL and select "DELETE" HTTP method from the list. Set the request Headers as follows: (the Content-Length will be filled by Fiddler for you):<br />
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-J8arOrlNPhg/U-CWNRa1y1I/AAAAAAAAFis/6mV9SJAsbYk/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="496" src="http://3.bp.blogspot.com/-J8arOrlNPhg/U-CWNRa1y1I/AAAAAAAAFis/6mV9SJAsbYk/s1600/5.png" width="570" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
Fill the Request Body, and take care to fill the ID of the record to remove. The rest of fields is just optional.<br />
<br />
Press the "EXECUTE" button to send the request. If you set a breakpoint inside the WCF operation, you'll see the following in action :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-s73Jb5fAexc/U-CWNcgZUmI/AAAAAAAAFi8/KCmyTW_M6vY/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="396" src="http://4.bp.blogspot.com/-s73Jb5fAexc/U-CWNcgZUmI/AAAAAAAAFi8/KCmyTW_M6vY/s1600/6.png" width="570" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
As you see, WCF succeeded at identifying inside the JSON the ID to erase.<br />
Then the response is sent to Fiddler, with a "true" value, because everything went fine:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-LIHHj4f9o4U/U-CWN0nxj3I/AAAAAAAAFi0/MU08Pf8yErg/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://4.bp.blogspot.com/-LIHHj4f9o4U/U-CWN0nxj3I/AAAAAAAAFi0/MU08Pf8yErg/s1600/7.png" width="538" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
And the database shows the deleted value:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-_QHBTu1Wot4/U-CX4urJikI/AAAAAAAAFjU/eS7rmu5DKB4/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="306" src="http://3.bp.blogspot.com/-_QHBTu1Wot4/U-CX4urJikI/AAAAAAAAFjU/eS7rmu5DKB4/s1600/8.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
If you want to see the RESTful WCF that we're using here,<a href="http://themvcclub.blogspot.com/2014/08/create-wcf-restful-crud-json-mvc.html"> see this tutorial</a>.<br />
<br />
<div>
<b>That's all.... </b></div>
<span style="font-family: inherit;">In this tutorial we've seen </span>how to send an HTTP DELETE Request to an RESTful WCF service using Fiddler.<span style="font-family: inherit;"> </span><br />
<b>Happy programming.....</b><br />
By Carmel Shvartzman<br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-62126656445472538522016-01-05T10:55:00.000-08:002016-01-05T10:55:12.263-08:00How to send an HTTP DELETE Request to a RESTful ODataController Web API Service using Postman<span style="font-family: inherit;">In this post we'll learn</span> Step by step how to <b>send an HTTP </b><b>DELETE </b><b>Request to a RESTful ODataController Web API Service using Postman</b><span style="font-family: inherit;">. </span><br />
We'll use Postman to test a RESTful OData Web API application, sending an HTTP DELETE request. We'll use a working OData Web API ODataController built in a <a href="http://themvcclub.blogspot.co.il/2014/09/webapi-odata-v4-support-restful-service-mvc-crud.html" target="_blank">previous tutorial</a>, and we'll delete a record using Postman :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-bTymgGitwio/VBk4IfJVnAI/AAAAAAAAGWg/RHl0HClMsSI/s1600/14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to send an HTTP DELETE Request to a RESTful ODataController Web API Service using Postman" border="0" height="442" src="http://1.bp.blogspot.com/-bTymgGitwio/VBk4IfJVnAI/AAAAAAAAGWg/RHl0HClMsSI/s1600/14.png" title="How to send an HTTP DELETE Request to a RESTful ODataController Web API Service using Postman" width="570" /></a></div>
<br />
<br />
<br />
<br />
In order to get Postman installed , go to the Chrome Tools >> Extensions , search for "Postman" and install the App .<br />
<br />
<h3>
HTTP DELETE Request to a RESTful ODataController Web API with Postman</h3>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
Now let's see how to call the OData Web API to delete an item : in order to setup the ODataController , there will be an ODataModelBuilder at the "Register" method called from the Global.asax file : it's important that the EntitySet name MUST be the same name of the Controller , therefore we'll look for a "<span style="color: red;"><b>Notes</b></span>Controller" at the application :</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ytYNDP6F-DU/VBgiYXw2xfI/AAAAAAAAGSQ/LIA-h9cp2AY/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="254" src="http://3.bp.blogspot.com/-ytYNDP6F-DU/VBgiYXw2xfI/AAAAAAAAGSQ/LIA-h9cp2AY/s1600/2.png" width="570" /></a></div>
<div class="separator" style="clear: both;">
Because there is a route prefix set ( "ODataV4" ) , we'll also append it to the URL : </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-8uqnmWcRxM0/VBgiY3ntBnI/AAAAAAAAGSc/ukkJSHzNG7g/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="77" src="http://1.bp.blogspot.com/-8uqnmWcRxM0/VBgiY3ntBnI/AAAAAAAAGSc/ukkJSHzNG7g/s1600/3.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
At the ODataController , we check for the "Delete" action method , since we're sending an HTTP DELETE request :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-uMyggjV47aY/VBk5O6TKOhI/AAAAAAAAGW8/KA9S6e8J3BI/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="244" src="http://3.bp.blogspot.com/-uMyggjV47aY/VBk5O6TKOhI/AAAAAAAAGW8/KA9S6e8J3BI/s1600/9.png" width="570" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
Why are we checking this ? Because we want to know what is ODataController method expecting : in our case , it expects a URI which must include an integer "key" ID ( "[FromODataURI]" ) . </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
The Port of the application can be extracted from the Web tab at the application properties:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Wmj3-EYsGfI/VBgiZxH5_sI/AAAAAAAAGSo/8izf4bDHeYo/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="165" src="http://1.bp.blogspot.com/-Wmj3-EYsGfI/VBgiZxH5_sI/AAAAAAAAGSo/8izf4bDHeYo/s1600/6.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
Put all of this together , and you have the URI for the DELETE request : </div>
<div class="separator" style="clear: both;">
<br /></div>
<blockquote class="tr_bq" style="clear: both;">
<b>"http://localhost:21435/ODataV4/Notes(6)" :</b></blockquote>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<u><b><span style="color: red;">Important </span></b></u>: OData is <b>case sensitive</b> : therefore , if you type "notes" instead of "Notes" , you will not obtain any data.</div>
<br />
After setting the URI and the DELETE method , write the "Content-Type" header :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-9DuJVXeOtTI/VBk5OaOdWSI/AAAAAAAAGW4/yWLjtfuzp4o/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="278" src="http://4.bp.blogspot.com/-9DuJVXeOtTI/VBk5OaOdWSI/AAAAAAAAGW4/yWLjtfuzp4o/s1600/7.png" width="570" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
Send the request :</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-zDeNQz8o8iM/VBk5OWMSgdI/AAAAAAAAGXI/2uT-5bhXo4Q/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="296" src="http://3.bp.blogspot.com/-zDeNQz8o8iM/VBk5OWMSgdI/AAAAAAAAGXI/2uT-5bhXo4Q/s1600/8.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The request details can be seen this way :</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-bTymgGitwio/VBk4IfJVnAI/AAAAAAAAGWg/RHl0HClMsSI/s1600/14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="442" src="http://1.bp.blogspot.com/-bTymgGitwio/VBk4IfJVnAI/AAAAAAAAGWg/RHl0HClMsSI/s1600/14.png" width="570" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
In the meantime , the ODataController at the RESTful WebAPI have handled the request with the ID in the ODataURI : </div>
<a href="http://3.bp.blogspot.com/-uMyggjV47aY/VBk5O6TKOhI/AAAAAAAAGW8/KA9S6e8J3BI/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="244" src="http://3.bp.blogspot.com/-uMyggjV47aY/VBk5O6TKOhI/AAAAAAAAGW8/KA9S6e8J3BI/s1600/9.png" width="570" /></a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
The action method renders a response with code 410 "GONE" , to express that the record has been deleted , and Postman exposes it : </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-TVJA39JgfiI/VBk5Oa-3SWI/AAAAAAAAGXA/li9oWyiXOF0/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="462" src="http://3.bp.blogspot.com/-TVJA39JgfiI/VBk5Oa-3SWI/AAAAAAAAGXA/li9oWyiXOF0/s1600/10.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div>
<b>That's all... </b></div>
<span style="font-family: inherit;">In this tutorial we've learned</span> how to <b>send an HTTP DELETE Request to a RESTful ODataController Web API Service using Postman</b>.<br />
<b>Happy programming.....</b><br />
By Carmel Shvartzman<br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-21270636291753645022015-12-27T00:19:00.001-08:002015-12-27T00:19:09.066-08:00Add the jQueryUI to your web site in 5 minutes<div class="separator" style="clear: both;">
In this <b>Step by step Add the jQueryUI to your web site in 5 minutes </b>post, we see how to add the jQueryUI style and javascript to your web in 2 short steps.</div>
This is how a web site using jQueryUI is displayed:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-meCcBXDQYIw/VnFwRDHrAEI/AAAAAAAAL-Y/EdOawXcjRl8/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://3.bp.blogspot.com/-meCcBXDQYIw/VnFwRDHrAEI/AAAAAAAAL-Y/EdOawXcjRl8/s640/1.png" width="570" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;">And this is how the site looks like in Nexus Galaxy devices : </span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;"></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-kEYuEWT7oFE/VnFw4LaSjYI/AAAAAAAAL-s/RRldXr75h_U/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="584" src="http://3.bp.blogspot.com/-kEYuEWT7oFE/VnFw4LaSjYI/AAAAAAAAL-s/RRldXr75h_U/s640/8.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
<b style="font-size: medium; text-align: start;">Add the jQueryUI to your web site in 5 minutes </b></h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
If you are in a hurry and need to add say a nice Calendar to your web, just take a look here at how to add the jQueryUI style and javascripts to your web in this 2 short steps:<br />
<br />
<b><span style="color: #274e13;">1) download the jQueryUI</span></b><br />
<b><span style="color: #274e13;">2) add only this 3 elements to your Web :</span></b> 1 file CSS - 1 JS and the Images folder. (and discard all the other files and folders)<br />
<br />
<br />
<div>
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both;">
1) <u>Download the jQueryUI files:</u></h3>
<div class="separator" style="clear: both; text-align: center;">
Browse to <a href="http://jqueryui.com/themeroller/" target="_blank">http://jqueryui.com/themeroller/</a> and select your favorite Theme : </div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-uYCAZMOjUGI/VnFwRLa6rAI/AAAAAAAAL-I/mr-buuYFswQ/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="622" src="http://2.bp.blogspot.com/-uYCAZMOjUGI/VnFwRLa6rAI/AAAAAAAAL-I/mr-buuYFswQ/s640/2.png" width="570" /></a></div>
<br />
Click on "Download" and there click again on "Download" :<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-ACWL0EchQ9w/VnFwRdcf8HI/AAAAAAAAL-M/SNkAdxMlE98/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="337" src="http://1.bp.blogspot.com/-ACWL0EchQ9w/VnFwRdcf8HI/AAAAAAAAL-M/SNkAdxMlE98/s400/3.png" width="400" /></a></div>
<br />
<br />
Save the .zip file somewhere and unzip it.<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both;">
2) Add only this 3 elements to your Web:</h3>
Next, we select <b><u>only </u></b>the following 3 files :<br />
<br />
1) The file CSS : jquery-ui.css<br />
2) The JS file : jquery-ui.js<br />
3) The Images folder "images" :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-Acw1rssSIYM/VnFwRmItwqI/AAAAAAAAL-k/IF6TxJR0rXc/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="http://1.bp.blogspot.com/-Acw1rssSIYM/VnFwRmItwqI/AAAAAAAAL-k/IF6TxJR0rXc/s400/4.png" width="336" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Paste the files inside your web site project :</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-I92qhHZ3Etc/VnFwRmJuz3I/AAAAAAAAL-c/QEiB-b2U98k/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="297" src="http://4.bp.blogspot.com/-I92qhHZ3Etc/VnFwRmJuz3I/AAAAAAAAL-c/QEiB-b2U98k/s400/5.png" width="400" /></a></div>
<br />
Then, import the links to the web page where you want to enable the jQuery components and style :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-fgLpcgsasZ0/VnFwR_NNKdI/AAAAAAAAL-U/2MuJmfrp6DY/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="306" src="http://3.bp.blogspot.com/-fgLpcgsasZ0/VnFwR_NNKdI/AAAAAAAAL-U/2MuJmfrp6DY/s640/6.png" width="570" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The style reference must be located in the <head> element.</div>
<div class="separator" style="clear: both; text-align: left;">
The scripts will go by the end of the <body> tag, thus ensuring that all HTML5 elements were created , when the compiler will read the scripts.</div>
<div class="separator" style="clear: both; text-align: left;">
However, be careful to :</div>
<div class="separator" style="clear: both; text-align: left;">
1) referencing the file scripts <u><b>before </b></u>you start coding your own javascript code;</div>
<div class="separator" style="clear: both; text-align: left;">
2) the "jquery-ui.js" script file <b><u>must follow</u></b> the jQuery code "jquery.js" (or "jquery-X.X.X.js") [where "X" is the current version]</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-q9bxhcB5b5Y/VnFwSPQzcUI/AAAAAAAAL-g/5k0Fq4SP0Sw/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="420" src="http://4.bp.blogspot.com/-q9bxhcB5b5Y/VnFwSPQzcUI/AAAAAAAAL-g/5k0Fq4SP0Sw/s640/7.png" width="570" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
That's all. The web site will be shown like this:<br />
<div class="separator" style="clear: both;">
<br /></div>
<br />
<div class="separator" style="clear: both;">
<b>1- In Mobile devices : </b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-kEYuEWT7oFE/VnFw4LaSjYI/AAAAAAAAL-s/RRldXr75h_U/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="584" src="http://3.bp.blogspot.com/-kEYuEWT7oFE/VnFw4LaSjYI/AAAAAAAAL-s/RRldXr75h_U/s640/8.png" width="570" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both;">
<b>2- On Medium and Big desktops:</b></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-meCcBXDQYIw/VnFwRDHrAEI/AAAAAAAAL-Y/EdOawXcjRl8/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://3.bp.blogspot.com/-meCcBXDQYIw/VnFwRDHrAEI/AAAAAAAAL-Y/EdOawXcjRl8/s640/1.png" width="570" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div>
<b> </b>by Carmel Schvartzman<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b></div>
<div>
</div>
</div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-12885318470956881232015-12-04T02:09:00.000-08:002015-12-04T02:09:08.088-08:00Bootstrap Tutorial Lesson 14 - Responsive Tabs with Scrollspy <div class="separator" style="clear: both;">
In this <b>Step by step Bootstrap Tutorial Lesson 14 - Responsive Tabs with Scrollspy </b></div>
post, we design in 15 minutes a responsive Bootstrap Tab with Scrollspy , in a from-scratch Application for Mobile devices & desktop computers . All the code is open source at GitHub:<br />
<a href="https://github.com/CarmelSoftware/Bootstrap_TabsAndScrollspy" target="_blank">https://github.com/CarmelSoftware/Bootstrap_TabsAndScrollspy</a><br />
<br />
This is how the Responsive Tabs with Scrollspy are displayed:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-VDOQwGdVmx0/Va5Y1_fbs5I/AAAAAAAALfM/oM7Uvx_yrWI/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="532" src="http://2.bp.blogspot.com/-VDOQwGdVmx0/Va5Y1_fbs5I/AAAAAAAALfM/oM7Uvx_yrWI/s640/5.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;">And this is the App in Nexus Galaxy devices : </span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;"><a href="http://2.bp.blogspot.com/-f6O2aJWIDFg/Va5Y0-BwkJI/AAAAAAAALec/HPveyQsJRrg/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://2.bp.blogspot.com/-f6O2aJWIDFg/Va5Y0-BwkJI/AAAAAAAALec/HPveyQsJRrg/s640/2.png" width="372" /></a></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
<b style="font-size: medium; text-align: start;">Bootstrap Tutorial Lesson 14 - Responsive Tabs with Scrollspy </b></h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
If you are in a hurry and need the Tabs with Scrollspy right now, download it from the following GitHub repository. Afterwards, adapt it to your needs:<br />
<a href="https://github.com/CarmelSoftware/Bootstrap_TabsAndScrollspy" target="_blank">https://github.com/CarmelSoftware/Bootstrap_TabsAndScrollspy</a><br />
<br />
<br />
You can begin building this app from a free Bootstrap template downloaded from <a href="http://www.initializr.com/" target="_blank">www.initializr.com/</a> (we explained this in a short tutorial: <a href="http://themvcclub.blogspot.com/2015/05/twitter-bootstrap-tutorial-intro-first-app-using-templates.html" target="_blank">Bootstrap Templates</a>). Elsewhere add to your HTML5 page the following CDN jQuery and Bootstrap references :<br />
<br />
<br />
<div>
<span style="color: red; font-size: xx-small;"><b><meta name="viewport" content="width=device-width, initial-scale=1"></b></span><br />
<pre style="border-radius: 4px; border: 0px; box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; line-height: 1.42857143; overflow: auto; padding: 0px; white-space: nowrap; word-break: normal; word-wrap: break-word;"><code class="language-html" data-lang="html" style="border-radius: 0px; box-sizing: border-box; display: inline-block; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; padding: 0px 45px 0px 0px; white-space: pre-wrap;"><span style="color: #38761d; font-size: xx-small;"><b><span class="nt" style="box-sizing: border-box;"><link</span> <span class="na" style="box-sizing: border-box;">rel=</span><span class="s" style="box-sizing: border-box;">"stylesheet"</span> <span class="na" style="box-sizing: border-box;">href=</span><span class="s" style="box-sizing: border-box;">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="nt" style="box-sizing: border-box;">></span>
<span class="nt" style="box-sizing: border-box;"><link</span> <span class="na" style="box-sizing: border-box;">rel=</span><span class="s" style="box-sizing: border-box;">"stylesheet"</span> <span class="na" style="box-sizing: border-box;">href=</span><span class="s" style="box-sizing: border-box;">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"</span><span class="nt" style="box-sizing: border-box;">></span>
</b></span></code></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
...and the following scripts before closing the </body> element :<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<span style="color: #38761d; font-size: x-small;"><b><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script></b></span><b style="color: #38761d; font-size: small;"> </b><br />
<span style="color: #38761d; font-size: x-small;"><b><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script></b></span><br />
<div>
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
The latest versions of the Bootstrap files are in this CDN server: <a href="http://www.bootstrapcdn.com/" target="_blank">http://www.bootstrapcdn.com/</a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
If you need a Mobile device Emulator, read this short <a href="http://themvcclub.blogspot.com/2015/05/how-to-install-ripple-mobile-app-emulator-for-android-blackberry-nokia-ipad-iphone-in-5-minutes.html" target="_blank">tutorial on installing the FREE Ripple Emulator</a>.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both;">
1) Designing a <b style="font-size: medium; text-align: start;">Responsive Tab</b>:</h3>
<div class="separator" style="clear: both;">
Following, we give you all the code to create the Tabs: all this code you just copy-paste inside your page.</div>
<div class="separator" style="clear: both;">
Let's start.</div>
<div class="separator" style="clear: both;">
We begin by creating the Navbar which allows the user to open the corresponding tabs content . We do so by using the Bootstrap classes "<b style="color: #274e13;">nav nav-tabs</b>" , in order to set the menu :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="color: #274e13; font-size: xx-small;"><b><ul id="myTabs" class="nav nav-tabs"></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <li class="active"><a href="#home" id="home-tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a></li></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <li><a href="#profile" id="profile-tab" data-toggle="tab" aria-controls="profile">Life</a></li></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <li class="dropdown"></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">More <span class="caret"></span></a></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents"></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <li><a href="#dropdown1" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">A friend</a></li></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <li><a href="#dropdown2" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">Happiness</a></li></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </ul></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </li></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </ul></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <br /></b></span><br />
<br />
The buttons will open the corresponding "<b style="color: #274e13;">tab-pane fade</b>" , such as the following :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="color: #274e13; font-size: x-small;"><b><div class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <h3>Happiness</h3></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <img class="img-responsive img-rounded" src="..." alt="Alternate Text" /></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <br /></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <p>Men of the most vulgar type, seem to identify the Happiness with pleasure. (Etics, I ch V)</p></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <p>It is the mark of an educated mind to be able to entertain a thought without accepting it.</p></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-c1eF-J1k0u8/Va5Y2hUOfNI/AAAAAAAALfI/yH98JgoH7yg/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://4.bp.blogspot.com/-c1eF-J1k0u8/Va5Y2hUOfNI/AAAAAAAALfI/yH98JgoH7yg/s640/8.png" width="640" /></a></div>
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-OhwanficcG0/Va5Y20qOz1I/AAAAAAAALfE/lSaUko-ujzo/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="http://3.bp.blogspot.com/-OhwanficcG0/Va5Y20qOz1I/AAAAAAAALfE/lSaUko-ujzo/s640/9.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<h4 style="clear: both;">
All the Bootstrap Tabs documentation can be found in the <a href="http://getbootstrap.com/css/#tables-contextual-classes" target="_blank">GetBootstrap Web Site</a>.</h4>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both;">
2) Designing a Scrollspy inside a Tab:</h3>
Next, we create another Tab content, containing a Scrollspy:<br />
<br />
<br />
<br />
<span style="color: #274e13; font-size: x-small;"><b><div class="tab-pane fade" id="profile" aria-labelledby="profile-tab"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b> <div class="bs-example" data-example-id="embedded-scrollspy"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <nav id="navbar-example2" class="navbar navbar-default navbar-static"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <div class="container-fluid"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <div class="navbar-header"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <button class="navbar-toggle collapsed" type="button" </b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> data-toggle="collapse" </b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> data-target=".bs-example-js-navbar-scrollspy"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <span class="sr-only">Toggle navigation</span></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <span class="icon-bar"></span></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <span class="icon-bar"></span></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <span class="icon-bar"></span></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </button></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <a class="navbar-brand" href="#">Points Of View</a></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <div class="collapse navbar-collapse bs-example-js-navbar-scrollspy"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <ul class="nav navbar-nav"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <li><a href="#happy">A happy life</a></li></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <li><a href="#Truth">Truth</a></li></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <li class="dropdown"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <a href="#" id="navbarDrop1" </b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> class="dropdown-toggle" data-toggle="dropdown" role="button" </b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> aria-haspopup="true" aria-expanded="false">More About Life <span class="caret"></span></a></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <ul class="dropdown-menu" aria-labelledby="navbarDrop1"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <li><a href="#love">Love</a></li></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <li><a href="#privilege">Privilege</a></li></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <li role="separator" class="divider"></li></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <li><a href="#perspective">Perspective</a></li></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </ul></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </li></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </ul></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </nav></b></span><b style="color: #274e13; font-size: small;"> </b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
Every <a> button in the Nav will open the corresponding contents, and also, while you navigate from content to content, the corresponding menu will be outlined .<br />
<br />
<a href="http://1.bp.blogspot.com/-KxgPe3dp2OE/Va5Y0e-aNFI/AAAAAAAALeY/C4tDQgC27E0/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="398" src="http://1.bp.blogspot.com/-KxgPe3dp2OE/Va5Y0e-aNFI/AAAAAAAALeY/C4tDQgC27E0/s640/10.png" width="640" /></a><br />
<br />
Now for the Scrollspy:<br />
<br />
<span style="color: #274e13; font-size: xx-small;"><b><div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example"></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <h4 id="happy">A happy life</h4></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <img class="img-responsive img-rounded" src="..." alt="Alternate Text" /></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <br /></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <p>Very little is needed to make a happy life</p></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> ...</b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <h4 id="Truth">Truth</h4></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <img class="img-responsive img-rounded" src="..." alt="Alternate Text" /></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <br /></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <p>If someone is able to show me</p></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> ...</b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <h4 id="love">Love</h4></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <img class="img-responsive img-rounded" src="..." alt="Alternate Text" /></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <br /></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <p>It is not death that a man should fear</p></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> ...</b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <h4 id="privilege">Privilege</h4></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <img class="img-responsive img-rounded" src="..." alt="Alternate Text" /></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <br /></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <p>You need to avoid certain things in your train of thought</p></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> ...</b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <h4 id="perspective">Perspective</h4></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: xx-small;"><b> <img class="img-responsive img-rounded" src="..." alt="Alternate Text" /></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <br /></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <p>Everything we hear</p></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> ...</b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </div></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </ul></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </nav></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b><br />
</b></span><span style="color: #274e13; font-size: xx-small;"><b> </div></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </header></b></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-qtoMaiRyN4I/Va5Y0QH-vMI/AAAAAAAALeQ/Y7a5iRzQAB4/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="418" src="http://2.bp.blogspot.com/-qtoMaiRyN4I/Va5Y0QH-vMI/AAAAAAAALeQ/Y7a5iRzQAB4/s640/11.png" width="640" /></a></div>
<br />
<br />
That's all. The entire Tab with Scrollspy will be shown like this:<br />
<div class="separator" style="clear: both;">
<br /></div>
<br />
<div class="separator" style="clear: both;">
<b>1- In Mobile devices : </b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-T8Y-in02YdA/Va5Y0UEg_1I/AAAAAAAALfU/8lusCsrUMDs/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="516" src="http://4.bp.blogspot.com/-T8Y-in02YdA/Va5Y0UEg_1I/AAAAAAAALfU/8lusCsrUMDs/s640/1.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-f6O2aJWIDFg/Va5Y0-BwkJI/AAAAAAAALec/HPveyQsJRrg/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://2.bp.blogspot.com/-f6O2aJWIDFg/Va5Y0-BwkJI/AAAAAAAALec/HPveyQsJRrg/s640/2.png" width="372" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ANduI_Ap3qc/Va5Y1KVswwI/AAAAAAAALes/qqwAZXD0nJ8/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://3.bp.blogspot.com/-ANduI_Ap3qc/Va5Y1KVswwI/AAAAAAAALes/qqwAZXD0nJ8/s640/3.png" width="364" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-qky2Skg5qrc/Va5Y1Dh_7NI/AAAAAAAALfQ/LTAnvtGKcSg/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://2.bp.blogspot.com/-qky2Skg5qrc/Va5Y1Dh_7NI/AAAAAAAALfQ/LTAnvtGKcSg/s640/4.png" width="368" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both;">
<b>2- On Medium and Big desktops:</b></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-VDOQwGdVmx0/Va5Y1_fbs5I/AAAAAAAALfM/oM7Uvx_yrWI/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="532" src="http://2.bp.blogspot.com/-VDOQwGdVmx0/Va5Y1_fbs5I/AAAAAAAALfM/oM7Uvx_yrWI/s640/5.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-jHCckl_h0uo/Va5Y196u8KI/AAAAAAAALe8/MvEO9daXOfI/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="506" src="http://1.bp.blogspot.com/-jHCckl_h0uo/Va5Y196u8KI/AAAAAAAALe8/MvEO9daXOfI/s640/6.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-7AwbXhv4Qlw/Va5Y2Qg8A_I/AAAAAAAALfA/NsWM9UfERjw/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="478" src="http://1.bp.blogspot.com/-7AwbXhv4Qlw/Va5Y2Qg8A_I/AAAAAAAALfA/NsWM9UfERjw/s640/7.png" width="640" /></a></div>
<br />
<div class="separator" style="-webkit-text-stroke-width: 0px; clear: both; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both;">
This is the style for the App:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>body {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> padding-top: 60px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> padding-bottom: 20px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.jumbotron h1 {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>h2 {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 18px Verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.well p{</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 700 12px Verdana !important; </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.well-footer, .well-footer a {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 10px Comic Sans MS;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.alert {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 600 9px Verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.centered {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> text-align: center;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.scrollspy-example {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> position: relative;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>height:400px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>overflow-y:scroll;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div>
<b> </b>by Carmel Schvartzman<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b></div>
<div>
</div>
</div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-21437633711226980322015-10-26T14:58:00.000-07:002016-06-20T04:51:46.602-07:00MVC Ajax WebGrid with Administrator Buttons<div class="separator" style="clear: both;">
This article is about an<b> MVC Ajax WebGrid with Administrator Buttons and Sorting and Paging . </b></div>
Here we see how to build an Ajax enabled WebGrid , which in case of an User Administrator will display management buttons (Edit - Delete) , and otherwise will not.<br />
<br />
In case of an Administrator, the WebGrid will be displayed like this:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-wV03d-u_NMs/ViygkoaPYGI/AAAAAAAALrE/c2ft825d86M/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MVC Ajax WebGrid with Administrator Buttons" border="0" height="448" src="https://2.bp.blogspot.com/-wV03d-u_NMs/ViygkoaPYGI/AAAAAAAALrE/c2ft825d86M/s640/3.png" width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br />
<br />
In case of a common User, the WebGrid will be displayed this way:<br />
<a href="http://1.bp.blogspot.com/-O-jNqru-gsk/ViyglDjwyiI/AAAAAAAALrI/0qMgZ-FW6q0/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="MVC Ajax WebGrid with Administrator Buttons" border="0" height="384" src="https://1.bp.blogspot.com/-O-jNqru-gsk/ViyglDjwyiI/AAAAAAAALrI/0qMgZ-FW6q0/s640/4.png" width="540" /></a><br />
<br />
<br />
<br />
All the code in this tutorial , can be downloaded from the following GitHub repository:<br />
<a href="https://github.com/CarmelSoftware/MVC_WebGrid_Admin" target="_blank">https://github.com/CarmelSoftware/MVC_WebGrid_Admin</a><br />
<br />
This is how this Administrator's Ajax WebGrid is shown in a Mobile Emulator :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ThXe8rYxVdI/ViyhAa-cn-I/AAAAAAAALrc/3YMLeLt9pxU/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MVC Ajax WebGrid with Administrator Buttons" border="0" height="640" src="https://3.bp.blogspot.com/-ThXe8rYxVdI/ViyhAa-cn-I/AAAAAAAALrc/3YMLeLt9pxU/s640/2.png" width="398" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
In the case of a common User:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-PHYK6kb8q18/ViygkY5Z9nI/AAAAAAAALrM/76aNR3lkHL8/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MVC Ajax WebGrid with Administrator Buttons" border="0" height="640" src="https://4.bp.blogspot.com/-PHYK6kb8q18/ViygkY5Z9nI/AAAAAAAALrM/76aNR3lkHL8/s640/1.png" width="402" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
MVC Ajax WebGrid with Administrator Buttons</h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
The whole code for creating this Ajax WebGrid with Management functionality , can be obtained from the following GitHub rep:<br />
<a href="https://github.com/CarmelSoftware/MVC_WebGrid_Admin" target="_blank">https://github.com/CarmelSoftware/MVC_WebGrid_Admin</a><br />
<div>
<br /></div>
<div>
<div>
<br />
Add the following markup to the "Index" view:</div>
<div>
<br />
<span style="color: #274e13; font-size: x-small;"><b>@model IEnumerable<MyGrid_BL.Blog></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>@{</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> ViewBag.Title = "Ajax WebGrid with Administrator Role Check";</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> WebGrid grid = new WebGrid(Model, new[] { "Title", "Text", "DatePosted", "MainPicture", "Blogger" },</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> rowsPerPage:2,ajaxUpdateContainerId:"GridDiv");</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b> IEnumerable<WebGridColumn> oColumns = new[] {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b> grid.Column("ID",format:(item) => item.GetSelectLink(item.BlogID.ToString()) ) ,</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> grid.Column("Title",format:@<a href='/Blog/Details/@item.BlogID'><b>@item.Title</b></a>),</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> grid.Column("DatePosted","DatePosted", (item) => String.Format("{0:dd/MM/yyyy}", item.DatePosted != null ? item.DatePosted : DateTime.Now )),</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> grid.Column("Picture",format:(item) =></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> { return new MvcHtmlString("<a href='/Blog/Details/" + item.BlogID +</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> "'><img src='/Images/"+item.MainPicture+"' style='width:100px;height:100px;'></img></a>");</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> })</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> };</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="font-size: x-small;"><b><span style="color: #274e13;"> </span><span style="color: red;">if (User.IsInRole("Admin"))</span></b></span><br />
<span style="color: red; font-size: x-small;"><b> {</b></span><br />
<span style="font-size: x-small;"><b><span style="color: red;"> </span><span style="color: #274e13;"> oColumns = oColumns.Concat(new[] {grid.Column(</span></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> format:@<div class="ActionsTH"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> @Html.ActionLink("Edit", "Edit", new { id=item.BlogID })<br /></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> @Html.ActionLink("Details", "Details", new { id=item.BlogID })<br /></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> @Html.ActionLink("Delete", "Delete", new { id=item.BlogID })</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </div>) });</b></span><br />
<span style="color: red; font-size: x-small;"><b> }</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b><h2>@ViewData["Title"]</h2></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b><div id="GridDiv"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> @grid.GetHtml(tableStyle:"webgrid-tableStyle",headerStyle:"webgrid-headerStyle",footerStyle:"webgrid-footerStyle",alternatingRowStyle:"webgrid-alternatingRowStyle",columns: oColumns) </div></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><p style="text-align:center;"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <input type="button" value="Create New" onclick="javascript:location='/Blog/Create'" class="btn btn-default"/></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b></p></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
This code enable the Management Buttons on the Grid, only in case of a Power User such as an Administrator.<br />
<br />
The code to set some User to the "Admin" Role, must be added to the "Acount" Controller, at the Register Action, and is as follows:<br />
<br />
<span style="color: #274e13; font-size: x-small;"><b>[HttpPost]</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> [AllowAnonymous]</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> [ValidateAntiForgeryToken]</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> public ActionResult Register(RegisterModel model)</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> if (ModelState.IsValid)</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> // Attempt to register the user</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> try</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> {</b></span><br />
<span style="font-size: x-small;"><b><span style="color: #274e13;"> </span><span style="color: red;"> if (!Roles.RoleExists("Admin"))</span></b></span><br />
<span style="color: red; font-size: x-small;"><b> {</b></span><br />
<span style="color: red; font-size: x-small;"><b> Roles.CreateRole("Admin");</b></span><br />
<span style="color: red; font-size: x-small;"><b> }</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> WebSecurity.CreateUserAndAccount(model.UserName, model.Password);</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br /></b></span>
<span style="font-size: x-small;"><b><span style="color: #274e13;"> </span><span style="color: red;">string sAdmins = ConfigurationManager.AppSettings["Admins"];</span></b></span><br />
<span style="color: red; font-size: x-small;"><b> string[] oAdmins = sAdmins.Split(';');</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br /></b></span>
<span style="color: #274e13; font-size: x-small;"><b> WebSecurity.Login(model.UserName, model.Password);</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br /></b></span>
<span style="font-size: x-small;"><b><span style="color: #274e13;"> </span><span style="color: red;">foreach (string sAdmin in oAdmins)</span></b></span><br />
<span style="color: red; font-size: x-small;"><b> {</b></span><br />
<span style="color: red; font-size: x-small;"><b> if (string.Compare(model.UserName, sAdmin) == 0</b></span><br />
<span style="color: red; font-size: x-small;"><b> &&</b></span><br />
<span style="color: red; font-size: x-small;"><b> !Roles.IsUserInRole("Admin"))</b></span><br />
<span style="color: red; font-size: x-small;"><b> {</b></span><br />
<span style="color: red; font-size: x-small;"><b> Roles.AddUserToRole(model.UserName, "Admin");</b></span><br />
<span style="color: red; font-size: x-small;"><b> }</b></span><br />
<span style="color: red; font-size: x-small;"><b> }</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br /></b></span>
<span style="color: #274e13; font-size: x-small;"><b><br /></b></span>
<span style="color: #274e13; font-size: x-small;"><b><br /></b></span>
<span style="color: #274e13; font-size: x-small;"><b> return RedirectToAction("Index", "Home");</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> }</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> catch (MembershipCreateUserException e)</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> ModelState.AddModelError("", ErrorCodeToString(e.StatusCode));</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> }</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> }</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br /></b></span>
<span style="color: #274e13; font-size: x-small;"><b> // If we got this far, something failed, redisplay form</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> return View(model);</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> }</b></span><br />
<br />
And these are the AppSettings to the Web.config file:<br />
<br />
<br />
<b><span style="color: #274e13; font-size: x-small;"><appSettings></span></b><br />
<b><span style="color: #274e13; font-size: x-small;"> <add key="Admins" value="sa;sa1;sa2;sa3"/></span></b><br />
<b><span style="color: #274e13; font-size: x-small;"> </appSettings></span></b><br />
<br />
As you can see, we also reference a <b style="color: #274e13; font-size: small;">"~/Content/WebGrid.css" file</b>:<br />
<br />
<br />
<span style="color: #274e13; font-size: x-small;"><b>body {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> background: #f7f3de url("images/ui-bg_fine-grain_15_f7f3de_60x60.png") 50% 50% repeat;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.webgrid-tableStyle {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> font: italic 11px Verdana;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> width: 100%;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> display: grid;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> border-collapse: separate;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> border: solid 1px #98BF21;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> background: #f8f7f6 url("images/ui-bg_fine-grain_10_f8f7f6_60x60.png") 50% 50% repeat;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> padding: 5px 5px 5px 5px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> text-align: center;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> border-radius:10px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.webgrid-headerStyle th {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> width: 250px; </b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> background: #c67f1c url("images/ui-bg_fine-grain_10_eceadf_60x60.png") 50% 50% repeat;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> color: #FFFFFF !important;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> font: 900 14px Verdana !important;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> padding: 5px 5px 5px 5px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> text-align: center;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> height:50px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.ActionsTH { </b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> background: #eceadf url("images/ui-bg_fine-grain_10_eceadf_60x60.png") 50% 50% repeat;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> color: #FFFFFF !important;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> font: 900 14px Verdana !important;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> padding: 5px 5px 5px 5px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> text-align: center;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> width: 180px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.webgrid-footerStyle, .webgrid-footerStyle a {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> background:#c67f1c url("images/ui-bg_fine-grain_10_eceadf_60x60.png") 50% 50% repeat;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> color: #FFF;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> font: 900 14px Verdana;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> padding: 3px 3px 3px 3px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> height:50px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.webgrid-alternatingRowStyle {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> background: #f8f7f6 url("images/ui-bg_fine-grain_10_f8f7f6_60x60.png") 50% 50% repeat;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> padding: 5px 5px 5px 5px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.title-column {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> font: 900 13px Verdana;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> text-align: center;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.webgrid-img {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> width: 150px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> height: 150px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: x-small;"><b>.webgrid-tableStyle a {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> text-decoration: none;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> color: #808080;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>}</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b>select {</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> width: 200px;</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> }</b></span><br />
<div>
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<u><b><span style="color: red;">Important:</span></b></u><br />
If you do not see the Ajax working , it can be because some jQuery scripts are missing.<br />
Just cut the jQuery.js file from the _Layout file to the <head> tag :<br />
<span style="font-size: x-small;"><b> @Scripts.Render("~/bundles/jquery")</b></span><br />
<span style="font-size: x-small;"><b> @Scripts.Render("~/bundles/jqueryui")</b></span><br />
<span style="font-size: x-small;"><b></head></b></span><br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
To install a Mobile Emulator, take a look at this <a href="http://themvcclub.blogspot.com/2015/05/how-to-install-ripple-mobile-app-emulator-for-android-blackberry-nokia-ipad-iphone-in-5-minutes.html" target="_blank">tutorial on installing the FREE Ripple Emulator</a>.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
That's all. Our Administrator WebGrid will be displayed this way:</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ThXe8rYxVdI/ViyhAa-cn-I/AAAAAAAALrc/3YMLeLt9pxU/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MVC Ajax WebGrid with Administrator Buttons" border="0" height="320" src="https://3.bp.blogspot.com/-ThXe8rYxVdI/ViyhAa-cn-I/AAAAAAAALrc/3YMLeLt9pxU/s320/2.png" width="199" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-wV03d-u_NMs/ViygkoaPYGI/AAAAAAAALrQ/XigeHbvTzh8/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="MVC Ajax WebGrid with Administrator Buttons" border="0" height="224" src="https://4.bp.blogspot.com/-wV03d-u_NMs/ViygkoaPYGI/AAAAAAAALrQ/XigeHbvTzh8/s320/3.png" width="320" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div>
<b> </b>by Carmel Schvartzman<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b></div>
</div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-12755857533613050342015-09-08T11:29:00.000-07:002015-09-08T11:29:30.820-07:00Bootstrap Tutorial Lesson 13 - Responsive MegaNavbars <div class="separator" style="clear: both;">
In this <b>Step by step Bootstrap Tutorial Lesson 13 - Responsive MegaNavbars </b></div>
post, we design in 15 minutes a responsive Bootstrap MegaNavbar with several kinds of components like Tables, Lists, buttons, Carousel, Search form, and more, shown in different formats, in a from-scratch Application for Mobile & desktop computers . All the code is open source at GitHub:<br />
<a href="https://github.com/CarmelSoftware/Bootstrap_MegaNavbars" target="_blank">https://github.com/CarmelSoftware/Bootstrap_MegaNavbars</a><br />
This is how the MegaNavbars are displayed:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-4R1QVKEsSlA/VaYaSzwv91I/AAAAAAAALZQ/rkG4TOSHdUs/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Bootstrap Tutorial Lesson 13 - Responsive MegaNavbars " border="0" height="482" src="http://2.bp.blogspot.com/-4R1QVKEsSlA/VaYaSzwv91I/AAAAAAAALZQ/rkG4TOSHdUs/s540/7.png" width="580" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-4pHabumHyLg/VaYaTPwK8wI/AAAAAAAALZY/F8Ef6xxaF2w/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Tutorial Lesson 13 - Responsive MegaNavbars " border="0" height="578" src="http://1.bp.blogspot.com/-4pHabumHyLg/VaYaTPwK8wI/AAAAAAAALZY/F8Ef6xxaF2w/s540/8.png" width="580" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;">And this is the App in Nexus Galaxy devices : </span></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="text-align: start;"><br />
</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-k-XKWiIOuo0/VaYaRq0DmKI/AAAAAAAALZw/bmZNgJtVGzk/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Bootstrap Lesson 13 - Responsive MegaNavbars " border="0" height="540" src="http://2.bp.blogspot.com/-k-XKWiIOuo0/VaYaRq0DmKI/AAAAAAAALZw/bmZNgJtVGzk/s540/2.png" width="362" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
<b style="font-size: medium; text-align: start;">Bootstrap Tutorial Lesson 13 - Responsive MegaNavbars </b></h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
If you are in a hurry and need the MegaNavbar right now, download it from the following GitHub repository, then customize it to your needs:<br />
<a href="https://github.com/CarmelSoftware/Bootstrap_MegaNavbars" target="_blank">https://github.com/CarmelSoftware/Bootstrap_MegaNavbars</a><br />
<br />
<br />
You can start building from a free Bootstrap template from <a href="http://www.initializr.com/" target="_blank">www.initializr.com/</a> (as explained in this short tutorial: <a href="http://themvcclub.blogspot.com/2015/05/twitter-bootstrap-tutorial-intro-first-app-using-templates.html" target="_blank">Bootstrap Templates</a>). Elsewhere add to your HTML5 page the following jQuery and Bootstrap references :<br />
<br />
<br />
<div>
<span style="color: red; font-size: xx-small;"><b><meta name="viewport" content="width=device-width, initial-scale=1"></b></span><br />
<pre style="border-radius: 4px; border: 0px; box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; line-height: 1.42857143; overflow: auto; padding: 0px; white-space: nowrap; word-break: normal; word-wrap: break-word;"><code class="language-html" data-lang="html" style="border-radius: 0px; box-sizing: border-box; display: inline-block; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; padding: 0px 45px 0px 0px; white-space: pre-wrap;"><span style="color: #38761d; font-size: xx-small;"><b><span class="nt" style="box-sizing: border-box;"><link</span> <span class="na" style="box-sizing: border-box;">rel=</span><span class="s" style="box-sizing: border-box;">"stylesheet"</span> <span class="na" style="box-sizing: border-box;">href=</span><span class="s" style="box-sizing: border-box;">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="nt" style="box-sizing: border-box;">></span>
<span class="nt" style="box-sizing: border-box;"><link</span> <span class="na" style="box-sizing: border-box;">rel=</span><span class="s" style="box-sizing: border-box;">"stylesheet"</span> <span class="na" style="box-sizing: border-box;">href=</span><span class="s" style="box-sizing: border-box;">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"</span><span class="nt" style="box-sizing: border-box;">></span>
</b></span></code></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
...and the following scripts before closing the </body> element :<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<span style="color: #38761d; font-size: x-small;"><b><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script></b></span><b style="color: #38761d; font-size: small;"> </b><br />
<span style="color: #38761d; font-size: x-small;"><b><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script></b></span><br />
<div>
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
If you need a Mobile device Emulator, read this short <a href="http://themvcclub.blogspot.com/2015/05/how-to-install-ripple-mobile-app-emulator-for-android-blackberry-nokia-ipad-iphone-in-5-minutes.html" target="_blank">tutorial on installing the FREE Ripple Emulator</a>.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both;">
1) Designing a first MegaNavbar collapsible Menu:</h3>
<div class="separator" style="clear: both; text-align: left;">
Following, we give you all the code to create the MegaNavbar: all this code you just copy-paste inside your page, chaining the code <span style="color: #274e13;"><b>IN GREEN</b></span> , chunk after chunk, then customizing it to your needs.</div>
<div class="separator" style="clear: both; text-align: left;">
Let's start.</div>
<div class="separator" style="clear: both;">
We begin by creating the containing Navbar . We do so by using the Bootstrap classes "<b style="color: #274e13; font-size: small;">navbar navbar-default navbar-fixed-top</b>" and "<b style="color: #274e13; font-size: small;">navbar-header</b>" , in order to set the classic Mobile menu button:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="color: #274e13; font-size: x-small;"><b> <header class="navbar navbar-default navbar-fixed-top" role="navigation"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <div class="container"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <div class="navbar-header"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <button type="button" class="navbar-toggle collapsed"</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> data-toggle="collapse" data-target=".my-navbar-collapse"</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> aria-expanded="false" aria-controls="navbar"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <span class="sr-only">Toggle navigation</span></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <span class="icon-bar"></span></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <span class="icon-bar"></span></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <span class="icon-bar"></span></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </button></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <a class="navbar-brand" href="#">Bootstrap Advanced Navbars</a></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span><br />
<br />
The button will open the collapsible "navbar-collapse collapse" . Inside it, the navbar-bar will include the following button to open a dropdown-menu:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="color: #274e13; font-size: x-small;"><b><ul class="nav navbar-nav"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <li class="dropdown custom-dropdown"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Rich Controls <span class="caret"></span></a></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <ul class="dropdown-menu custom-dropdown-menu1 row"></b></span><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<h4 style="clear: both;">
<u>a ) Carousel:</u></h4>
<div class="separator" style="clear: both;">
Inside the menu, we first create a Carousel as follows:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b><li class="col-xs-12 col-sm-5 col-lg-3"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <div id="carousel-example-generic" class="carousel slide carousel-custom" data-ride="carousel"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <div class="carousel-inner"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <div class="item active"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <img src="http://www.stockvault.net/data/2011/02/23/118137/small.jpg" alt="..." /></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <div class="carousel-caption"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <h3>jQuery Mobile</h3></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <p>jQueryMobilePlugins</p></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <div class="item"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <img src="http://www.stockvault.net/data/2011/02/24/118148/small.jpg" alt="..." /></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <div class="carousel-caption"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <h3>Bootstrap</h3></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <p>Bootstrap Plugins</p></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <div class="item"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <img src="http://www.stockvault.net/data/2011/05/31/124348/small.jpg" alt="..." /></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <div class="carousel-caption"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <h3>HTML5</h3></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <p>HTML5 Mobile Apps</p></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <h5>Bootstrap Front End</h5></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <p class="nav-text"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> Bootstrap makes front-end web development faster and easier. </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </p></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </li></b></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<h4 style="clear: both;">
<u>b ) Buttons:</u></h4>
<div class="separator" style="clear: both;">
Now we add link buttons:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b><li class="col-xs-12 col-sm-7 col-lg-4"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <a href="http://carmelsoft.blogspot.com" class="btn btn-block btn-custom">CarmelSoft Mobile Plugins</a></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <a class="btn btn-block btn-custom" href="https://github.com/CarmelSoftware">CarmelSoftware GitHub</a></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <a class="btn btn-block btn-custom" href="http://themvcclub.blogspot.com">The MVC Club</a></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <a class="btn btn-block btn-custom" href="http://www.getbootstrap.com">Get Bootstrap </a></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <a class="btn btn-block btn-custom" href="http://www.jquery.com">Get jQuery</a></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </li></b></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<h4 style="clear: both;">
<u>c ) List :</u></h4>
<div class="separator" style="clear: both;">
We also add to the MegaNavbar a list group:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b><li class="col-xs-12 col-sm-12 col-lg-5"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <div class="list-group"></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <a href="https://github.com/CarmelSoftware" class="list-group-item active">CarmelSoftware GitHub</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </a><a href="http://carmelsoft.blogspot.com" class="list-group-item">CarmelSoft Mobile Plugins</a></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <a href="http://themvcclub.blogspot.com" class="list-group-item">The MVC Club</a></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <a href="http://www.getbootstrap.com" class="list-group-item">Get Bootstrap</a></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> <a href="http://www.jquery.com" class="list-group-item">Get jQuery</a></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </li></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </ul></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </li></b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #274e13; font-size: x-small;"><b> </ul></b></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
That's all. The first Menu is done. Just add the CSS3 style (at the end of this post) to display it correctly:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-oFLUO5Wq_h8/VaYaRIbUHCI/AAAAAAAALY0/GCpxvPVcG98/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Bootstrap Tutorial - Responsive MegaNavbars " border="0" height="510" src="http://2.bp.blogspot.com/-oFLUO5Wq_h8/VaYaRIbUHCI/AAAAAAAALY0/GCpxvPVcG98/s540/12.png" width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-tPqHSswdFeY/VaYaTxI8u6I/AAAAAAAALZk/guswIQJ6vFk/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Bootstrap Tutorial Lesson 13 - MegaNavbars " border="0" height="280" src="http://4.bp.blogspot.com/-tPqHSswdFeY/VaYaTxI8u6I/AAAAAAAALZk/guswIQJ6vFk/s540/9.png" width="540" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
All the Bootstrap Navbar documentation can be found in the <a href="http://getbootstrap.com/css/#tables-contextual-classes" target="_blank">GetBootstrap Web Site</a>.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both;">
2) Designing a second MegaNavbar dropdown Menu:</h3>
Next, we create another Navbar menu, containing a Table and a Form. Add the following menu:<br />
<br />
<span style="color: #274e13; font-size: x-small;"><b> <ul class="nav navbar-nav"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <li class="dropdown custom-dropdown"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Table & Search <span class="caret"></span></a></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <ul class="dropdown-menu custom-dropdown-menu2 row"></b></span><br />
<br />
Inside it, add the Search Form:<br />
<br />
<span style="color: #274e13; font-size: x-small;"><b><li class="col-xs-12 col-sm-12 col-lg-4"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <form class="navbar-form" role="form"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <h4>Search in this Website</h4></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <div class="form-group"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <input type="text" placeholder="Search" class="form-control" /></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </div></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <button type="submit" class="btn btn-default">Search</button></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </form></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <img src="http://www.stockvault.net/data/2011/02/23/118137/small.jpg" alt="..." /></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> <p class="nav-text"></b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> Bootstrap makes front-end web development faster and easier. </b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </p> </b></span><br />
<span style="color: #274e13; font-size: x-small;"><b> </li> </b></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
We enhanced this column with an image and some text.<br />
Now for the Table:<br />
<br />
<span style="color: #274e13; font-size: xx-small;"><b><li class="col-xs-12 col-sm-12 col-lg-8"> </b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <table class="table table-hover"></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <thead></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <tr></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <th>#</th></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <th>Website</th></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <th>Url</th></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <th>Description</th></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </tr></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </thead></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <tbody></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <tr></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <th scope="row">1</th></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td>CarmelSoftware GitHub</td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td><a href="https://github.com/CarmelSoftware" >CarmelSoftware GitHub</b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </a></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td>Open source MVC HTML5 CSS3 OData REST code</td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </tr></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <tr></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <th scope="row">2</th></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td>CarmelSoft Mobile Plugins</td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td><a href="http://carmelsoft.blogspot.com" >CarmelSoft Mobile Plugins</a></td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td>Bootstrap & jQuery Mobile Plugins</td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </tr></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <tr></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <th scope="row">3</th></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td>The MVC Club</td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td><a href="http://themvcclub.blogspot.com" >The MVC Club</a></td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td>MVC HTML5 CSS3 OData REST</td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </tr></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <tr></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <th scope="row">4</th></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td>GetBootstrap.com</td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td><a href="http://www.getbootstrap.com" >www.getbootstrap.com</a></td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td>Get Bootstrap</td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </tr></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <tr></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <th scope="row">5</th></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td>jQuery.com</td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td><a href="http://www.jquery.com" >www.jquery.com</a></td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> <td>Get jQuery</td></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </tr></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </tbody></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </table></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </li></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </ul></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </li></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: xx-small;"><b> </ul></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </nav></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b><br />
</b></span> <span style="color: #274e13; font-size: xx-small;"><b> </div></b></span><br />
<span style="color: #274e13; font-size: xx-small;"><b> </header></b></span><br />
<br />
<a href="http://3.bp.blogspot.com/-S6uhOzKXYA8/VaYaQsQSjNI/AAAAAAAALZs/rH1QdVUX61U/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt=" Bootstrap Tutorial Lesson 13 - Responsive " border="0" height="466" src="http://3.bp.blogspot.com/-S6uhOzKXYA8/VaYaQsQSjNI/AAAAAAAALZs/rH1QdVUX61U/s540/11.png" width="540" /></a><br />
<br />
That's all. The entire MegaNavbar will be shown like this:<br />
<div class="separator" style="clear: both;">
<br /></div>
<br />
<div class="separator" style="clear: both;">
<b>1- In Mobile devices : </b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-VJ34eSciq4c/VaYaQbVcNLI/AAAAAAAALYk/kWPOwc3Xe8U/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Lesson 13 - Responsive MegaNavbars " border="0" height="404" src="http://3.bp.blogspot.com/-VJ34eSciq4c/VaYaQbVcNLI/AAAAAAAALYk/kWPOwc3Xe8U/s540/1.png" width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-k-XKWiIOuo0/VaYaRq0DmKI/AAAAAAAALZw/bmZNgJtVGzk/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Bootstrap - Responsive MegaNavbars " border="0" height="540" src="http://2.bp.blogspot.com/-k-XKWiIOuo0/VaYaRq0DmKI/AAAAAAAALZw/bmZNgJtVGzk/s540/2.png" width="362" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-aNKJcTRqkGc/VaYaRtiyu9I/AAAAAAAALZg/oGMO-RaK9ac/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Bootstrap Tutorial Lesson 13 - " border="0" height="540" src="http://2.bp.blogspot.com/-aNKJcTRqkGc/VaYaRtiyu9I/AAAAAAAALZg/oGMO-RaK9ac/s540/3.png" width="388" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-M8W4QlIcITE/VaYaR9bZuFI/AAAAAAAALZA/Fu1RdwwUFOI/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Tutorial Lesson 13 - Responsive MegaNavbars " border="0" height="540" src="http://2.bp.blogspot.com/-M8W4QlIcITE/VaYaR9bZuFI/AAAAAAAALZA/Fu1RdwwUFOI/s540/4.png" width="364" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-spRA2kt-DEk/VaYaSWqqHoI/AAAAAAAALZc/Nc16LZAlWws/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Lesson 13 - Responsive MegaNavbars " border="0" height="540" src="http://2.bp.blogspot.com/-spRA2kt-DEk/VaYaSWqqHoI/AAAAAAAALZc/Nc16LZAlWws/s540/5.png" width="378" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ld4OzU357Ns/VaYaSowmv6I/AAAAAAAALZI/dCH6bXUieUw/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Responsive MegaNavbars " border="0" height="540" src="http://2.bp.blogspot.com/-ld4OzU357Ns/VaYaSowmv6I/AAAAAAAALZI/dCH6bXUieUw/s540/6.png" width="378" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both;">
<b>2- On Medium and Big desktops:</b></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="-webkit-text-stroke-width: 0px; clear: both; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; margin: 0px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<b><br />
</b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-4R1QVKEsSlA/VaYaSzwv91I/AAAAAAAALZQ/rkG4TOSHdUs/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" MegaNavbars " border="0" height="482" src="http://2.bp.blogspot.com/-4R1QVKEsSlA/VaYaSzwv91I/AAAAAAAALZQ/rkG4TOSHdUs/s540/7.png" width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-4pHabumHyLg/VaYaTPwK8wI/AAAAAAAALZY/F8Ef6xxaF2w/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Bootstrap Tutorial Lesson 13 " border="0" height="578" src="http://1.bp.blogspot.com/-4pHabumHyLg/VaYaTPwK8wI/AAAAAAAALZY/F8Ef6xxaF2w/s540/8.png" width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-tPqHSswdFeY/VaYaTxI8u6I/AAAAAAAALZk/guswIQJ6vFk/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Bootstrap Tutorial Lesson " border="0" height="280" src="http://4.bp.blogspot.com/-tPqHSswdFeY/VaYaTxI8u6I/AAAAAAAALZk/guswIQJ6vFk/s540/9.png" width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-bGxlwrbTLHk/VaYaQ4-EhHI/AAAAAAAALYo/ZTuwFGnciRc/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Bootstrap Tutorial " border="0" height="284" src="http://4.bp.blogspot.com/-bGxlwrbTLHk/VaYaQ4-EhHI/AAAAAAAALYo/ZTuwFGnciRc/s540/10.png" width="540" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both;">
This is the style for the App:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>body {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> padding-top: 50px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> padding-bottom: 20px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.jumbotron h1 {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 25px Verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>h2 {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 18px Verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.well {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 12px Comic Sans MS;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.well-footer, .well-footer a {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> margin-top:130px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 10px Comic Sans MS;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.alert {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 600 9px Verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.centered {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> text-align: center;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.navbar-nav > li > .dropdown-menu {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> margin-top: 15px;margin-left:10px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-top-left-radius: 10px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-top-right-radius: 10px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-bottom-left-radius: 0px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-bottom-right-radius: 0px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.custom-dropdown {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> position: static !important;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> width: 100%;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.nav-text {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> text-align: justify;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 800 11px verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.btn-custom {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 12px verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> text-shadow: -1px -1px 0px #fff;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> background-color: #f0f0f0;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> margin: 11px 21px 21px 0px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> padding: 20px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border: 1px solid #c0c0c0;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-radius: 5px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> box-shadow: 10px 10px #a0a0a0;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.custom-dropdown-menu1:before {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-bottom: 15px solid #fff;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-right: 17px solid transparent;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-left: 17px solid transparent;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> position: absolute;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> top: -15px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> left: 38%;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> z-index: 10;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.custom-dropdown-menu1:after {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-bottom: 17px solid #FFF;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-right: 19px solid transparent;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-left: 19px solid transparent;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> position: absolute;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> top: -15px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> left: 38%;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> z-index: 8;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.custom-dropdown-menu2 {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> margin: 20px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> padding: 15px 15px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> width: 70%;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> box-shadow: 2px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.custom-dropdown-menu2:before {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-bottom: 15px solid #fff;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-right: 17px solid transparent;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-left: 17px solid transparent;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> position: absolute;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> top: -15px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> left: 58%;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> z-index: 10;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.custom-dropdown-menu2:after {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-bottom: 17px solid #fff;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-right: 19px solid transparent;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> border-left: 19px solid transparent;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> position: absolute;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> top: -17px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> left: 58%;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> z-index: 8;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div>
<b> </b>by Carmel Schvartzman<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b></div>
</div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-40907822966589483932015-09-02T11:55:00.000-07:002015-09-02T11:55:37.347-07:00Bootstrap Tutorial Lesson 12 - Responsive Lists with linked items<div class="separator" style="clear: both;">
In this <b>Step by step Bootstrap Tutorial Lesson 12 - Responsive Lists with linked items </b></div>
we experiment with several kinds of responsive Lists, Linked, Contextual, Custom , with Badges, and more, shown in different formats, in an from-scratch Application for Mobile & desktop computers . This App will display the Bootstrap Lists fitting all screen sizes .<br />
You can download the complete app from the following GitHub repository:<br />
<a href="https://github.com/CarmelSoftware/Bootstrap_Lists" target="_blank">https://github.com/CarmelSoftware/Bootstrap_Lists</a><br />
<br />
This is how the Lists are displayed:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-7Pp4GYpKX5s/VYAxnmnnpeI/AAAAAAAALQ0/9tiVzr8c4ak/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://4.bp.blogspot.com/-7Pp4GYpKX5s/VYAxnmnnpeI/AAAAAAAALQ0/9tiVzr8c4ak/s640/2.png" width="390" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/--s-uQifRMh0/VYAxoSunGII/AAAAAAAALRY/UmWBgO74CtA/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="440" src="http://4.bp.blogspot.com/--s-uQifRMh0/VYAxoSunGII/AAAAAAAALRY/UmWBgO74CtA/s640/5.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both;">
And this is the way how they appear in an Nexus Galaxy devices, for example: </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-J6yFrBHQcOo/VYAxmwotqBI/AAAAAAAALQ8/sjtWZzILQG0/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="552" src="http://2.bp.blogspot.com/-J6yFrBHQcOo/VYAxmwotqBI/AAAAAAAALQ8/sjtWZzILQG0/s640/1.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
<b style="font-size: medium; text-align: start;">Bootstrap Tutorial Lesson 12 - Responsive Lists with linked items</b></h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
You can build this app by using a Bootstrap template (free download) from <a href="http://www.initializr.com/" target="_blank">www.initializr.com/</a> (as explained in this short post : <a href="http://themvcclub.blogspot.com/2015/05/twitter-bootstrap-tutorial-intro-first-app-using-templates.html" target="_blank">Bootstrap Templates</a>), or elsewhere writing the following jQuery and Bootstrap references in the HTML5 file :<br />
<br />
<br />
<div>
<span style="color: red; font-size: xx-small;"><b><meta name="viewport" content="width=device-width, initial-scale=1"></b></span><br />
<pre style="border-radius: 4px; border: 0px; box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; line-height: 1.42857143; overflow: auto; padding: 0px; white-space: nowrap; word-break: normal; word-wrap: break-word;"><code class="language-html" data-lang="html" style="border-radius: 0px; box-sizing: border-box; display: inline-block; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; padding: 0px 45px 0px 0px; white-space: pre-wrap;"><span style="color: #38761d; font-size: xx-small;"><b><span class="nt" style="box-sizing: border-box;"><link</span> <span class="na" style="box-sizing: border-box;">rel=</span><span class="s" style="box-sizing: border-box;">"stylesheet"</span> <span class="na" style="box-sizing: border-box;">href=</span><span class="s" style="box-sizing: border-box;">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="nt" style="box-sizing: border-box;">></span>
<span class="nt" style="box-sizing: border-box;"><link</span> <span class="na" style="box-sizing: border-box;">rel=</span><span class="s" style="box-sizing: border-box;">"stylesheet"</span> <span class="na" style="box-sizing: border-box;">href=</span><span class="s" style="box-sizing: border-box;">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"</span><span class="nt" style="box-sizing: border-box;">></span>
</b></span></code></pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-ygr1z-ILjak/VYAxqIrdHyI/AAAAAAAALRk/O8nJALESafI/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="http://1.bp.blogspot.com/-ygr1z-ILjak/VYAxqIrdHyI/AAAAAAAALRk/O8nJALESafI/s640/8.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
And also the following references before closing the </body> :<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<span style="color: #38761d; font-size: x-small;"><b><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script></b></span><b style="color: #38761d; font-size: small;"> </b><br />
<span style="color: #38761d; font-size: x-small;"><b><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script></b></span><br />
<div>
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-17ypwz5kpWk/VYAxnZu6aJI/AAAAAAAALR8/X5OuYiCAyjE/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="164" src="http://4.bp.blogspot.com/-17ypwz5kpWk/VYAxnZu6aJI/AAAAAAAALR8/X5OuYiCAyjE/s640/12.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
If you wish to setup a Mobile device Emulator, read this short <a href="http://themvcclub.blogspot.com/2015/05/how-to-install-ripple-mobile-app-emulator-for-android-blackberry-nokia-ipad-iphone-in-5-minutes.html" target="_blank">tutorial on installing the FREE Ripple Emulator</a>.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both;">
1) Displaying Bootstrap Custom Content Lists:</h3>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
The Bootstrap supports elegant Lists display . Following are several templates for exemplifying the use of Lists in Bootstrap. They include all kind of Lists, Contextual, Linked, Disabled, Badges, and more, shown in different formats. List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.</div>
<div class="separator" style="clear: both;">
We begin by creating Lists containing Custom Content . We do so by using the Bootstrap classes "list-group-item-heading" and "list-group-item-text" inside several "list-group-item" in a "list-group" , so you can display Custom Content Lists. You can add all type of HTML5 within, even for linked list groups:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-0M1--v-e7Tg/VYAxqmU3DrI/AAAAAAAALRw/yB5uC8_cLss/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="628" src="http://4.bp.blogspot.com/-0M1--v-e7Tg/VYAxqmU3DrI/AAAAAAAALRw/yB5uC8_cLss/s640/9.png" width="640" /></a></div>
<br />
<br />
The Custom Content List will be displayed this way:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/--2oAsPEuF24/VYAxod3pCXI/AAAAAAAALRs/WhFjZ9rSywU/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="472" src="http://4.bp.blogspot.com/--2oAsPEuF24/VYAxod3pCXI/AAAAAAAALRs/WhFjZ9rSywU/s640/4.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
All the Bootstrap Lists documentation can be found in the <a href="http://getbootstrap.com/css/#tables-contextual-classes" target="_blank">GetBootstrap Web Site</a>.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both;">
2) Responsive Bootstrap Linked items with Contextual classes:</h3>
Next, we create another List containing links, but also with Contextual information. The items are Links enhanced with contextual significance, from "Active" to "Disabled", and with Badges counters:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-Gct93hmdPjg/VYAxmxutmOI/AAAAAAAALR4/kEEBB5bJyiU/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="430" src="http://2.bp.blogspot.com/-Gct93hmdPjg/VYAxmxutmOI/AAAAAAAALR4/kEEBB5bJyiU/s640/10.png" width="640" /></a></div>
<br />
That will be shown this:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-X21P3lGkbT8/VYAxpLPjKqI/AAAAAAAALRo/Zp8cGBW9Yd0/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="278" src="http://2.bp.blogspot.com/-X21P3lGkbT8/VYAxpLPjKqI/AAAAAAAALRo/Zp8cGBW9Yd0/s640/6.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<h3 style="clear: both;">
3) Minimalistic List Example:</h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Finally, this is a very simple responsive List, build over an unordered HTML list :</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-EcOT0IzHhoA/VYAxmxOOukI/AAAAAAAALQw/3yhqRuCQ2ME/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="296" src="http://1.bp.blogspot.com/-EcOT0IzHhoA/VYAxmxOOukI/AAAAAAAALQw/3yhqRuCQ2ME/s640/11.png" width="640" /></a></div>
<br />
And will appear this way:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-WS0JFGJinTc/VYAxpFx1sEI/AAAAAAAALRg/HR89MFdSRoo/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="586" src="http://1.bp.blogspot.com/-WS0JFGJinTc/VYAxpFx1sEI/AAAAAAAALRg/HR89MFdSRoo/s640/7.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both;">
This is the style for the App:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>body {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> padding-top: 60px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> padding-bottom: 20px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.jumbotron h1 {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>h2 {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 18px Verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.well p, .panel p {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 700 12px Verdana !important;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>h4 + p {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 700 10px Verdana !important;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.well-footer, .well-footer a {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 10px Comic Sans MS;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.alert {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 600 9px Verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.centered {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> text-align: center;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>a.active p {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #fff;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
That's all. Our Lists will be displayed this way:</div>
<br />
<div class="separator" style="clear: both;">
<b>1- In Mobile devices : </b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-7Pp4GYpKX5s/VYAxnmnnpeI/AAAAAAAALQ0/9tiVzr8c4ak/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://4.bp.blogspot.com/-7Pp4GYpKX5s/VYAxnmnnpeI/AAAAAAAALQ0/9tiVzr8c4ak/s640/2.png" width="390" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/--h6m1nGlqRE/VYAxnyUPqsI/AAAAAAAALRI/UYoFL5t3TaM/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://3.bp.blogspot.com/--h6m1nGlqRE/VYAxnyUPqsI/AAAAAAAALRI/UYoFL5t3TaM/s640/3.png" width="362" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
The displays for Nexus devices screens is as follows:</div>
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<a href="http://2.bp.blogspot.com/-J6yFrBHQcOo/VYAxmwotqBI/AAAAAAAALQ8/sjtWZzILQG0/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="552" src="http://2.bp.blogspot.com/-J6yFrBHQcOo/VYAxmwotqBI/AAAAAAAALQ8/sjtWZzILQG0/s640/1.png" width="640" /></a><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>2- On Medium and Big desktops:</b></div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/--2oAsPEuF24/VYAxod3pCXI/AAAAAAAALRs/WhFjZ9rSywU/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="472" src="http://4.bp.blogspot.com/--2oAsPEuF24/VYAxod3pCXI/AAAAAAAALRs/WhFjZ9rSywU/s640/4.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/--s-uQifRMh0/VYAxoSunGII/AAAAAAAALRY/UmWBgO74CtA/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="440" src="http://4.bp.blogspot.com/--s-uQifRMh0/VYAxoSunGII/AAAAAAAALRY/UmWBgO74CtA/s640/5.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-X21P3lGkbT8/VYAxpLPjKqI/AAAAAAAALRo/Zp8cGBW9Yd0/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="278" src="http://2.bp.blogspot.com/-X21P3lGkbT8/VYAxpLPjKqI/AAAAAAAALRo/Zp8cGBW9Yd0/s640/6.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-WS0JFGJinTc/VYAxpFx1sEI/AAAAAAAALRg/HR89MFdSRoo/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="586" src="http://1.bp.blogspot.com/-WS0JFGJinTc/VYAxpFx1sEI/AAAAAAAALRg/HR89MFdSRoo/s640/7.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div>
<b> </b>by Carmel Schvartzman<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b></div>
</div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-9878716496121561522015-08-14T04:47:00.000-07:002015-08-14T04:47:09.002-07:00Bootstrap Tutorial Lesson 9 - Responsive Multimedia Video and Pictures<div class="separator" style="clear: both;">
In this <b>Step by step Bootstrap Tutorial Lesson 9 - Responsive Multimedia Video and Pictures</b></div>
we see the manipulation of videos and pictures in a responsive way, and build an Application for use on desktop computers and Mobile devices screens. This App will display videos and pictures, with round corners, ellipses and more .<br />
This is how this Bootstrap Application is shown:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-oLdmvPHrkrw/VW7zwEle27I/AAAAAAAALHk/8SjudhRlIfI/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures " border="0" height="640" src="http://2.bp.blogspot.com/-oLdmvPHrkrw/VW7zwEle27I/AAAAAAAALHk/8SjudhRlIfI/s540/7.png" width="342" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-W6wFASW-GAk/VW7zviTLEsI/AAAAAAAALHY/wvrPVdGP3uI/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures 1 " border="0" height="456" src="http://1.bp.blogspot.com/-W6wFASW-GAk/VW7zviTLEsI/AAAAAAAALHY/wvrPVdGP3uI/s540/5.png" width="570" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both;">
And this is the way how it looks the Video display in the Ripple Emulator , for Nexus Galaxy : </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-URKGFfI8juI/VW7zub8JlzI/AAAAAAAALHM/gdMllRXxtcY/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures 2 " border="0" height="588" src="http://3.bp.blogspot.com/-URKGFfI8juI/VW7zub8JlzI/AAAAAAAALHM/gdMllRXxtcY/s540/3.png" width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
Bootstrap Tutorial Lesson 9 - Responsive Multimedia Video and Pictures</h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
This App can be started by using a free Bootstrap template downloaded for example from <a href="http://www.initializr.com/" target="_blank">www.initializr.com/</a> (explained in this short Tutorial : <a href="http://themvcclub.blogspot.com/2015/05/twitter-bootstrap-tutorial-intro-first-app-using-templates.html" target="_blank">Bootstrap Templates</a>), or if you wish you can start from scratch. Just write this jQuery and Bootstrap references in the Head:<br />
<br />
<br />
<div>
<span style="color: red; font-size: xx-small;"><b><meta name="viewport" content="width=device-width, initial-scale=1"></b></span><br />
<pre style="border-radius: 4px; border: 0px; box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; line-height: 1.42857143; overflow: auto; padding: 0px; white-space: nowrap; word-break: normal; word-wrap: break-word;"><code class="language-html" data-lang="html" style="border-radius: 0px; box-sizing: border-box; display: inline-block; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; padding: 0px 45px 0px 0px; white-space: pre-wrap;"><span style="color: #38761d; font-size: xx-small;"><b><span class="nt" style="box-sizing: border-box;"><link</span> <span class="na" style="box-sizing: border-box;">rel=</span><span class="s" style="box-sizing: border-box;">"stylesheet"</span> <span class="na" style="box-sizing: border-box;">href=</span><span class="s" style="box-sizing: border-box;">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="nt" style="box-sizing: border-box;">></span>
<span class="nt" style="box-sizing: border-box;"><link</span> <span class="na" style="box-sizing: border-box;">rel=</span><span class="s" style="box-sizing: border-box;">"stylesheet"</span> <span class="na" style="box-sizing: border-box;">href=</span><span class="s" style="box-sizing: border-box;">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"</span><span class="nt" style="box-sizing: border-box;">></span>
</b></span></code></pre>
<br />
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-M7USluiVJDg/VW7zxM7LyeI/AAAAAAAALHs/Lm2mT04ehYs/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures 3 " border="0" height="306" src="http://4.bp.blogspot.com/-M7USluiVJDg/VW7zxM7LyeI/AAAAAAAALHs/Lm2mT04ehYs/s540/9.png" width="540" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
Also place the following javascripts before the </body> closing tag :<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<span style="color: #38761d; font-size: x-small;"><b><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script></b></span><b style="color: #38761d; font-size: small;"> </b><br />
<span style="color: #38761d; font-size: x-small;"><b><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script></b></span><br />
<div>
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
To use a Mobile Emulator, take a look at this short <a href="http://themvcclub.blogspot.com/2015/05/how-to-install-ripple-mobile-app-emulator-for-android-blackberry-nokia-ipad-iphone-in-5-minutes.html" target="_blank">tutorial on installing the FREE Ripple Emulator</a>.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both;">
1) Using Responsive Images in a Bootstrap Web Page:</h3>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
The Bootstrap web pages are designed to be opened both in Mobile devices and desktop machines. </div>
<div class="separator" style="clear: both;">
Therefore, to be Responsive means that the images will be small in small screens, and bigger in larger screens.</div>
<div class="separator" style="clear: both;">
To achieve that, use the class=img-responsive , as follows:</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-UkQSijOuk7A/VW7ztbk2iDI/AAAAAAAALHA/l_3z3JIf_30/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures 4 " border="0" height="268" src="http://4.bp.blogspot.com/-UkQSijOuk7A/VW7ztbk2iDI/AAAAAAAALHA/l_3z3JIf_30/s540/10.png" width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Also, we use 3 types of display here: the "img-circle" at the top, the "img-rounded" corners in the middle, and the "img-thumbnail" at the bottom, as defined in the <a href="http://getbootstrap.com/css/#images" target="_blank">Bootstrap Official Web Site</a> :</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-LemJWeovzvc/VW7zw8FPdQI/AAAAAAAALH0/AUnZCQiUAO8/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures 5 " border="0" height="540" src="http://2.bp.blogspot.com/-LemJWeovzvc/VW7zw8FPdQI/AAAAAAAALH0/AUnZCQiUAO8/s540/8.png" width="370" /></a></div>
<br />
Because we set the Grid layout as col-xs-12, in Mobile devices each image will spread over all 12 columns. However, in large screens, we set col-lg-4, so each picture will take only 4 cells out of 12:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-W6wFASW-GAk/VW7zviTLEsI/AAAAAAAALHY/wvrPVdGP3uI/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures 6 " border="0" height="457" src="http://1.bp.blogspot.com/-W6wFASW-GAk/VW7zviTLEsI/AAAAAAAALHY/wvrPVdGP3uI/s540/5.png" width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both;">
2) Using Responsive Videos in a Bootstrap Web Page:</h3>
Exactly the same thing applies for HTML5 Video controls, as you can see here:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-D9cpkLwLNvg/VW7ztT580NI/AAAAAAAALG0/BtcqXWI-gXI/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and Pictures 7 " border="0" height="308" src="http://2.bp.blogspot.com/-D9cpkLwLNvg/VW7ztT580NI/AAAAAAAALG0/BtcqXWI-gXI/s540/11.png" width="540" /></a></div>
<br />
<br />
Therefore displayed this way :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-URKGFfI8juI/VW7zub8JlzI/AAAAAAAALHM/gdMllRXxtcY/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bootstrap Tutorial Lesson 8 - Responsive Multimedia Video and " border="0" height="588" src="http://3.bp.blogspot.com/-URKGFfI8juI/VW7zub8JlzI/AAAAAAAALHM/gdMllRXxtcY/s540/3.png" width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-cgUnyJky9Aw/VW7ztfKMTwI/AAAAAAAALG8/oGzlwNvhg00/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Bootstrap Tutorial Lesson 8 - Responsive Multimedia Pictures " border="0" height="470" src="http://4.bp.blogspot.com/-cgUnyJky9Aw/VW7ztfKMTwI/AAAAAAAALG8/oGzlwNvhg00/s540/1.png" width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both;">
We also added some style code for the App:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>body {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> padding-top: 60px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> padding-bottom: 20px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.jumbotron h1 {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>h2 {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 18px Verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.well p{</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 700 12px Verdana !important; </b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.well-footer, .well-footer a {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 10px Comic Sans MS;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.alert {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 600 9px Verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.centered {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> text-align: center;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div>
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
That's all. Our Multimedia will be displayed this way:</div>
<br />
<div class="separator" style="clear: both;">
<b>1- In Mobile devices : </b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-LemJWeovzvc/VW7zw8FPdQI/AAAAAAAALH0/AUnZCQiUAO8/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Tutorial Lesson 8 - Responsive Multimedia Video and Pictures " border="0" height="540" src="http://2.bp.blogspot.com/-LemJWeovzvc/VW7zw8FPdQI/AAAAAAAALH0/AUnZCQiUAO8/s540/8.png" width="370" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-oLdmvPHrkrw/VW7zwEle27I/AAAAAAAALHk/8SjudhRlIfI/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Lesson 8 - Responsive Multimedia Video and Pictures " border="0" height="540" src="http://2.bp.blogspot.com/-oLdmvPHrkrw/VW7zwEle27I/AAAAAAAALHk/8SjudhRlIfI/s540/7.png" width="342" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-iFAT7jKzyVY/VW7zwFg-KiI/AAAAAAAALHg/CaT72MHksMw/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" 8 - Responsive Multimedia Video and Pictures " border="0" height="540" src="http://4.bp.blogspot.com/-iFAT7jKzyVY/VW7zwFg-KiI/AAAAAAAALHg/CaT72MHksMw/s540/6.png" width="424" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-UbSvRVwfa9c/VW7zuALI_lI/AAAAAAAALH8/OdUl5lwXDkI/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Responsive Multimedia Video and Pictures " border="0" height="540" src="http://4.bp.blogspot.com/-UbSvRVwfa9c/VW7zuALI_lI/AAAAAAAALH8/OdUl5lwXDkI/s540/2.png" width="416" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
The display for Nexus Mobile devices screens is as follows:</div>
<div class="separator" style="clear: both;">
<a href="http://3.bp.blogspot.com/-URKGFfI8juI/VW7zub8JlzI/AAAAAAAALHM/gdMllRXxtcY/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt=" Multimedia Video and Pictures " border="0" height="588" src="http://3.bp.blogspot.com/-URKGFfI8juI/VW7zub8JlzI/AAAAAAAALHM/gdMllRXxtcY/s540/3.png" width="540" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>2- On Medium and Big desktops:</b></div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-UbSvRVwfa9c/VW7zuALI_lI/AAAAAAAALH8/OdUl5lwXDkI/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Video and Pictures " border="0" height="540" src="http://4.bp.blogspot.com/-UbSvRVwfa9c/VW7zuALI_lI/AAAAAAAALH8/OdUl5lwXDkI/s540/2.png" width="416" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ZG6YYGUtojg/VW7zvJaP2XI/AAAAAAAALHo/UkrzQPu-U50/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" and Pictures " border="0" height="530" src="http://2.bp.blogspot.com/-ZG6YYGUtojg/VW7zvJaP2XI/AAAAAAAALHo/UkrzQPu-U50/s540/4.png" width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-cgUnyJky9Aw/VW7ztfKMTwI/AAAAAAAALG8/oGzlwNvhg00/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Tutorial Responsive Multimedia Video and Pictures " border="0" height="470" src="http://4.bp.blogspot.com/-cgUnyJky9Aw/VW7ztfKMTwI/AAAAAAAALG8/oGzlwNvhg00/s540/1.png" width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-W6wFASW-GAk/VW7zviTLEsI/AAAAAAAALHY/wvrPVdGP3uI/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Lesson Multimedia Video and Pictures " border="0" height="456" src="http://1.bp.blogspot.com/-W6wFASW-GAk/VW7zviTLEsI/AAAAAAAALHY/wvrPVdGP3uI/s540/5.png" width="540" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div>
<b> </b>by Carmel Schvartzman<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b></div>
</div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-4898588871807377319.post-67189920907332571792015-08-07T07:08:00.000-07:002015-08-07T07:08:16.832-07:00Bootstrap Tutorial Lesson 7 - Responsive YouTube Video Modal Window<div class="separator" style="clear: both;">
In this <b>Step by step Bootstrap Tutorial Lesson 7 - Responsive YouTube Video Modal Window</b></div>
we explain the implementation of a responsive Video Modal window, and build an App for use on both desktop computers and all kinds of Mobile devices screens. This App will contain a Modal Window that will display a YouTube Video and also Alert messages to the user, by using jQuery.<br />
You can download the complete app from the following GitHub repository:<br />
<a href="https://github.com/CarmelSoftware/Bootstrap_YouTubeModalWindow" target="_blank">https://github.com/CarmelSoftware/Bootstrap_YouTubeModalWindow</a><br />
This is how this Bootstrap Application is shown:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-5OaO1dn7Pa4/VW1VUANvSfI/AAAAAAAALEQ/VplJ0Ix0hL0/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="366" src="http://4.bp.blogspot.com/-5OaO1dn7Pa4/VW1VUANvSfI/AAAAAAAALEQ/VplJ0Ix0hL0/s640/5.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both;">
And this is the way how it looks in the Ripple Emulator , in Nexus Galaxy display: </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-SVmwteB_uuY/VW1VTFrBkDI/AAAAAAAALEs/D7cyTGCzYSo/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="548" src="http://1.bp.blogspot.com/-SVmwteB_uuY/VW1VTFrBkDI/AAAAAAAALEs/D7cyTGCzYSo/s640/2.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="text-align: center;">
Bootstrap Tutorial Lesson 7 - Responsive YouTube Video Modal Window</h3>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
You can begin building this Application by working with a template downloaded from <a href="http://www.initializr.com/" target="_blank">www.initializr.com/</a> (as is shown in this short Tutorial about <a href="http://themvcclub.blogspot.com/2015/05/twitter-bootstrap-tutorial-intro-first-app-using-templates.html" target="_blank">Bootstrap Templates</a>), or you can start from scratch by writing the following jQuery and Bootstrap references in the HTML5 <head>:<br />
<br />
<span style="color: #38761d; font-size: xx-small;"><b><script src="//code.jquery.com/jquery-1.11.3.min.js"></script></b></span><br />
<div>
<span style="color: red; font-size: xx-small;"><b><meta name="viewport" content="width=device-width, initial-scale=1"></b></span><br />
<pre style="border-radius: 4px; border: 0px; box-sizing: border-box; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; line-height: 1.42857143; overflow: auto; padding: 0px; white-space: nowrap; word-break: normal; word-wrap: break-word;"><code class="language-html" data-lang="html" style="border-radius: 0px; box-sizing: border-box; display: inline-block; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; padding: 0px 45px 0px 0px; white-space: pre-wrap;"><span style="color: #38761d; font-size: xx-small;"><b><span class="nt" style="box-sizing: border-box;"><link</span> <span class="na" style="box-sizing: border-box;">rel=</span><span class="s" style="box-sizing: border-box;">"stylesheet"</span> <span class="na" style="box-sizing: border-box;">href=</span><span class="s" style="box-sizing: border-box;">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"</span><span class="nt" style="box-sizing: border-box;">></span>
<span class="nt" style="box-sizing: border-box;"><link</span> <span class="na" style="box-sizing: border-box;">rel=</span><span class="s" style="box-sizing: border-box;">"stylesheet"</span> <span class="na" style="box-sizing: border-box;">href=</span><span class="s" style="box-sizing: border-box;">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"</span><span class="nt" style="box-sizing: border-box;">></span>
</b></span></code></pre>
<br />
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-XczTrRF_5To/VW1VURbAGrI/AAAAAAAALEc/GhAj5gSGaVU/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="http://4.bp.blogspot.com/-XczTrRF_5To/VW1VURbAGrI/AAAAAAAALEc/GhAj5gSGaVU/s640/7.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
And this javascript references will be located before you close the "Body" tag :<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<span style="color: #38761d; font-size: x-small;"><b><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script></b></span><b style="color: #38761d; font-size: small;"> </b><br />
<span style="color: #38761d; font-size: x-small;"><b><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script></b></span><br />
<div>
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-dsAAMkpn_wA/VW1VSFhFE-I/AAAAAAAALDo/E4KYQs_hcAM/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="64" src="http://4.bp.blogspot.com/-dsAAMkpn_wA/VW1VSFhFE-I/AAAAAAAALDo/E4KYQs_hcAM/s640/10.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
If you want to use a Mobile Emulator, how to get one is explained in this short <a href="http://themvcclub.blogspot.com/2015/05/how-to-install-ripple-mobile-app-emulator-for-android-blackberry-nokia-ipad-iphone-in-5-minutes.html" target="_blank">tutorial on installing the FREE Ripple Emulator</a>.</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both;">
1) Create a Button to open the Modal Bootstrap Video:</h3>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
Generally, the Bootstrap Modal forms will open by adding a data-toggle=modal and a data-target=[YourModalWindowMarkup] directives , to some button:</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-zMY7g-Lzu0w/VW1VUp68RPI/AAAAAAAALEo/AXA8WqgSdgo/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="232" src="http://2.bp.blogspot.com/-zMY7g-Lzu0w/VW1VUp68RPI/AAAAAAAALEo/AXA8WqgSdgo/s640/8.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here we add also a "data-url" directive with the URL of the YouTube video to be shown.</div>
<h3 style="clear: both;">
2) Create the Modal Window:</h3>
<br />
First, we'll import the markup for the Modal Window as-is from the <a href="http://getbootstrap.com/javascript/#modals" target="_blank">http://getbootstrap.com Official Web Site</a> , containing a Header, a Body and a Footer. Just COPY-PASTE the markup from the URL above.<br />
<br />
Our Modal Window will contain an inline Frame iframe, which will be set programmatically using javascript:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-cmdW8RBcnGE/VW1VU0U-DSI/AAAAAAAALEw/Mlof9u9SEiM/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="230" src="http://2.bp.blogspot.com/-cmdW8RBcnGE/VW1VU0U-DSI/AAAAAAAALEw/Mlof9u9SEiM/s640/9.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
The Modal Window will be closed by a button that's using the directive data-dismiss=modal.</div>
<div class="separator" style="clear: both;">
We can also close this window by using jQuery , with the .modal("toggle").</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<h3 style="clear: both;">
3) Avoiding Clickjacking by using jQuery:</h3>
<div class="separator" style="clear: both;">
Finally we code the javascript to set the Iframe URL "src", using jQuery as follows:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-KnIYSMMJ3nQ/VW1VSCcJDYI/AAAAAAAALDs/hsbD8Tmn9G4/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="354" src="http://1.bp.blogspot.com/-KnIYSMMJ3nQ/VW1VSCcJDYI/AAAAAAAALDs/hsbD8Tmn9G4/s640/11.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We also append "autoplay" to the video URL to force it to play when loaded.</div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both;">
We also add custom style to the CSS3 file :</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>body {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> padding-top: 50px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> padding-bottom: 20px;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.jumbotron h1 {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 25px Verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>h2 {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 18px Verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.well {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 12px Comic Sans MS;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.well-footer, .well-footer a {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 900 10px Comic Sans MS;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> color: #a8a3a3;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.alert {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> font: 600 9px Verdana;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b><br />
</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>.centered {</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b> text-align: center;</b></span></div>
<div class="separator" style="clear: both;">
<span style="color: #38761d; font-size: x-small;"><b>}</b></span></div>
<div>
<br /></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
And that's all. Our Modal Video Window will be displayed this way:</div>
<br />
<div class="separator" style="clear: both;">
<b>1- In Mobile devices : </b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-NKgRKN__wCA/VW1VSGI0DiI/AAAAAAAALD4/4_ko7J_LL8Q/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://1.bp.blogspot.com/-NKgRKN__wCA/VW1VSGI0DiI/AAAAAAAALD4/4_ko7J_LL8Q/s640/1.png" width="374" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-sZDpKHYxJDA/VW1VTTcAi0I/AAAAAAAALEk/ZBawGJk93eM/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="http://4.bp.blogspot.com/-sZDpKHYxJDA/VW1VTTcAi0I/AAAAAAAALEk/ZBawGJk93eM/s640/3.png" width="380" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-SVmwteB_uuY/VW1VTFrBkDI/AAAAAAAALEs/D7cyTGCzYSo/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="548" src="http://1.bp.blogspot.com/-SVmwteB_uuY/VW1VTFrBkDI/AAAAAAAALEs/D7cyTGCzYSo/s640/2.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
The display for Nexus Mobile devices screens is as follows:</div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
<b>2- On Medium and Big desktops:</b></div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-qWHNYEWWeGs/VW1VTSRv54I/AAAAAAAALEg/83Zsq83G-tk/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="http://2.bp.blogspot.com/-qWHNYEWWeGs/VW1VTSRv54I/AAAAAAAALEg/83Zsq83G-tk/s640/4.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-5OaO1dn7Pa4/VW1VUANvSfI/AAAAAAAALEQ/VplJ0Ix0hL0/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="366" src="http://4.bp.blogspot.com/-5OaO1dn7Pa4/VW1VUANvSfI/AAAAAAAALEQ/VplJ0Ix0hL0/s640/5.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-ncfMvLhUsZs/VW1VUXMsLNI/AAAAAAAALEU/CkmUqsQ-4iI/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="http://2.bp.blogspot.com/-ncfMvLhUsZs/VW1VUXMsLNI/AAAAAAAALEU/CkmUqsQ-4iI/s640/6.png" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both;">
<b><br />
</b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both;">
<br /></div>
<div>
<b> </b>by Carmel Schvartzman<br />
<b><br />
</b> <br />
<div style="direction: rtl;">
<b><span style="font-size: x-small;">כתב: כרמל שוורצמן</span></b><br />
<div>
<b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b><b><span style="font-size: x-small;"><br />
</span></b></div>
</div>
</div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0