tag:blogger.com,1999:blog-5589420775830216592024-03-19T11:16:14.675+05:00Asma's BlogKnowledge Sharer & Technology Doodler!!!Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.comBlogger319125tag:blogger.com,1999:blog-558942077583021659.post-82065156336855875972024-03-04T15:47:00.001+05:002024-03-04T15:55:13.157+05:00RASA Default Chatbot Response<p><span class="style-scope yt-formatted-string" dir="auto">RASA platform is all about customization. A good and responsive chatbot will always have interactive communication with it's users. Any good or customer related chatbot will definitely have default chatbot response especially for situations when a chatbot fails to understand customer question/query. By default RASA platform based chatbot is not configured with default chatbot response, but, it can be easily configured according to business requirements with a hard-coded message.</span><br />
</p><a name='more'></a>So, I am going to show you how
to the default chatbot response will look like when configured within RASA platform on the
Windows 10/11 machines. At the moment detail tutorial of configuring default chatbot response message using RASA platform on Windows and on Linux/Ubuntu machines are not available, but, source code is available. My detail course will be out soon for RASA on both Windows and Linux/Ubuntus machines. So, Keep following my posts and <a href="https://bit.ly/3bgtnrH">My Youtube Channel</a>.<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtu.be/2V9emVoVeNo" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="604" data-original-width="1066" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfvQwoO-kwxgp-iD1Wg3c8bCqupf-ZPlAKPLChq3snSsi1DmJrNyCR_mSkxkOfiHRMH7m4oeelk-26HiXElQg5_Whw4u-eXCcAcGLhjozP3jkz_4kcr0ZPk7YQCU4bQSX7DnuDn5lxP8OnO23oZBl5gbsoTR6UmXMAPzznCMJ_7GMdsR0TNzHqVeTDGg9z/s1600/1.PNG" width="600" /></a></div>
</div>
</div>
<h3 style="text-align: left;">
<b>Prerequisites:</b></h3><div style="text-align: justify;">
Following are some of the many prerequisites for this project:<br /></div>
<ol style="text-align: justify;">
<li>Python Latest Version Installation.</li><li>RASA Platform Installation.</li><li>Knowledge of Training RASA Custom Model.</li><li>Knowledge of Creating RASA Web Chat Widget using SOCKET.IO. <br /></li><li>Basic Knowledge of Building Chatbots.</li>
</ol><div style="text-align: justify;">
The running working source code solution for this project is
being developed using <b><span class="IL_AD" id="IL_AD6">Python-based RASA platform </span></b>on both Windows 10/11 and Linux/Ubuntu machines. For the source code in Windows or Linux/Ubuntu click on the button below.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Note that detail tutorial on how to configure default chatbot response message for RASA platform on both Windows and Linux/Ubuntu machines will be coming soon, but, if you like you can play around with the provided source code for Linux/Ubuntu.<br /></div><div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h3><a class="code_win" href="https://rb.gy/xypv52"><b>Code for Windows</b></a> <b>OR</b></h3>
<h3><a class="code_ubuntu" href="https://rb.gy/v44lo2"><b>Code for Linux/Ubuntu</b></a></h3>
</div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-49971923522213957252024-01-06T08:35:00.001+05:002024-01-06T08:35:00.142+05:00Install Python on Windows without Anaconda<p>I will show you a simple technique to install python on your Windows 10/11 machine without installing any third party tools like Anaconda.<span class="style-scope yt-formatted-string" dir="auto"> </span><br />
</p><a name='more'></a><p>Your Queries:<br /><span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap">Install Python on Windows without Anaconda.<br />Install python without anaconda windows 10.<br />
</span><span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap">Install python without anaconda windows 11</span><span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap">.<br />
</span><span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap">Install python without anaconda github</span><span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap">.<br />
</span><span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap">Install python without anaconda reddit</span><span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap">.<br />
</span><span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap">pip install python 3</span><span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap">.<br /></span></p><p><span class="style-scope yt-formatted-string" dir="auto"></span></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtu.be/1ib5NAy9xLk" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="604" data-original-width="1066" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfqrmOgwnakmTwWMGT1nz2ODn1Z6ISY0yedcikdfZHWP4mkpll9845zPZ_MusKALxatuaT2_vWXmPhyzyz8GeE8FRxKK9CArXx43txmdNqfuqXItt3YEfsslmB7TPdOx53UYFgpda3Vbov-PawOJxR9C84ebYygJhs3iPBrVDg9td_YbrU91yu4yzVkhyphenhyphenK/s1600/install_python.PNG" /></a></div>
</div>
<br /></div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-74889192023346079252023-12-13T08:20:00.001+05:002023-12-13T08:20:00.137+05:00WhatsApp New Voice Note? | McDonalds Using AI for Fries? | Lego in Fortnite? | Google Gemini<p><span class="style-scope yt-formatted-string" dir="auto">Welcome to tech weekly. So here what happens last week in tech world. </span><br /><br />
</p><a name='more'></a>WhatsApp HD image & video sharing feature for iOS users, WhatsApp new voice note feature listen once,
OpenAI new models will be available to Microsoft Copilot,
McDonalds will use Google AI for Fries,
Google Files Smart Search will Launch Soon,
Stable Diffusion XL Turbo is fastest,
Meta AI watermarking,
Introducing Google Gemini<span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap"><span class="yt-core-attributed-string--link-inherit-color" style="color: #131313;">.</span></span><br /><p><span class="style-scope yt-formatted-string" dir="auto"></span></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtu.be/Xl9rU_qJNbY" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="604" data-original-width="1066" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6_1Eb-zXrEhY8hnAbcA6EuiZCZwU9Qoi_5KMuDIdf9-3l-IYtIBirpmbNZlNPvELDQ8bLpcYNb6bmtE4IH4T1z7p6So9D6MtnXG6u4F4YzRl0sedrG1ZM-8-KUD24pLeVjtSVJ2Fptmkdsxvk_Rk-jyOjVBqsW5tHmBFyjlq5cJJD29TrswR_Z3895aJ6/s1600/1.PNG" /></a></div>
</div>
<br /></div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-74886858653864822822023-12-11T11:50:00.030+05:002023-12-11T11:50:00.255+05:00Copy Windows File(s) to Bluestack<p>I will show how to copy files to Bluestack platform from windows 10/11 PC machine<span class="style-scope yt-formatted-string" dir="auto">. </span><br /><br />
</p><a name='more'></a><p>Your Queries:<br /><span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap">Copy Files From Bluestack to Windows 10 PC.<br />Copy Files/Folders to Bluestacks (no drag & drop).<br />
How to transfer files from PC to Bluestacks 5.<br />
How to copy files from PC to bluestacks 5.<br />
Copy files from bluestacks to PC.<br />
How to copy files in bluestacks media manager.<br />
How to copy files in bluestacks 5.<br />
Transfer files to bluestacks
Copy file to bluestacks.</span></p><p><span class="style-scope yt-formatted-string" dir="auto"></span></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtu.be/qodMSoMpKvg" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="604" data-original-width="1066" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ofK_N5yEDhw_l1ndztqL8ub9lOmsHTtCCFTPhU2IcjpsudXdbvyZkYilICo0Muf8N2J2xBFqEYWL7Du2n25NVrE_EUYLg-D2tybVhxnO1vHE9FXetXp5y1Yn1E9fZ6Kj7-RV8tLpZvWHMJzNNdr56VXz_q-ZF-Q_f2zKoZY2U-Mu_XulxTczLmrMYZfE/s1600/1.PNG" /></a></div>
</div>
<br /></div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-10080079749606892302023-12-05T20:05:00.008+05:002024-01-15T18:27:12.453+05:00Error in Assassin's Creed Games | Gaming in Youtube? | Google Garage Door Detection <p><span class="style-scope yt-formatted-string" dir="auto">Welcome to tech weekly. So here what happens last week in tech world. </span><br /><br />
</p><a name='more'></a>Minecraft sells 300 million copies, Amazon Q bot is launched, Assassin's Creed Game showing pop up ad error,
YouTube is now jumping into gaming,
Microsoft Joins OpenAI board as member,
Destiny 2 The Final Shape release is delayed,
Google is adding garage door detection to Google nest cameras.
Soon you can record yourself in Google Slides,
Voicemod is now enabling unlimited number of custom AI voices creation and sharing<span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap"><span class="yt-core-attributed-string--link-inherit-color" style="color: #131313;">.</span></span><br /><p><span class="style-scope yt-formatted-string" dir="auto"></span></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtu.be/VWiULHjB-Yw" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="604" data-original-width="1066" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdWhDxKCGFztJLfFyZ8vBE1LMT_hzN_mXlcEeEiDvExo7Uzh88wLt6mywKn2B90uHHCqcGUyyng5D129kzM2zNDj_bfIOoE1qJp8Js9j43AbFHMYfKNY7J9WqhqzJprlq9I4V6dW_XDvzWNv3MmAoJyXi8FAZwLaODTdShkJXJKb81y8X7JZhQ_Fmq_r_4/s1600/1.PNG" /></a></div>
</div>
<br /></div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com1tag:blogger.com,1999:blog-558942077583021659.post-82182536154832724392023-10-03T17:23:00.000+05:002023-10-03T17:23:05.115+05:00Gmail going to Discontinue? | Meta & Ray-Ban AI Smart Glasses | DALL-E coming to MS Paint | Browse Internet via ChatGPT<p><span class="style-scope yt-formatted-string" dir="auto">Welcome to tech weekly. So here what happens last week in tech world. </span><br /><br />
</p><a name='more'></a><span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap"><span class="yt-core-attributed-string--link-inherit-color" style="color: #131313;">MacOS Sonoma is now available as free software update, Browse Internet with ChatGPT, Google Celebrates 25th Birthday Anniversary,
Generate ChatGPT prompt with voice and image commands,
AI-Powered tools for Intagram & FaceBook will be launched soon,
Meta & Ray-Ban Smart AI Glasses,
DALL-E coming to Microsoft Paint.
Google Whiteboard is going to Discontinue,
Gmail going to Google Graveyard.</span></span><br /><p><span class="style-scope yt-formatted-string" dir="auto"></span></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtu.be/4Ig_HkUGwEQ?si=-R27trDeL_OxvXCn" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="604" data-original-width="1066" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYpCAxiOMOB-yFVvBoxHZ1PlPCQaij_Ft37otLKSK3EmNe72n69bkWqHBkpIfcK71h0r264DYCHMCbR9DgHxB9oxLJRQocS7Ys5eRHMOqrQ4i_yg2t6dDKQRqlaEFTJ6U-K-_Ug240zOlLTZjbDKO-0L_c9naUDrj9JO_pLvT3h_SIdEUzYvZh35OS-QB4/s1600/t.PNG" /></a></div>
</div>
<br /></div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-39219181345329352142023-09-27T15:20:00.001+05:002024-01-15T18:28:17.120+05:00YouTube Launches New App | Microsoft Paint Turns Photoshop | TikTok Removing AI Content | Game of Thrones Sues OpenAI<p><span class="style-scope yt-formatted-string" dir="auto">Welcome to tech weekly. So here what happens last week in tech world. </span><br /><br />
</p><a name='more'></a><span class="yt-core-attributed-string yt-core-attributed-string--white-space-pre-wrap"><span class="yt-core-attributed-string--link-inherit-color" style="color: #131313;">YouTube launches new editing application,
Panos Panay resign from Microsoft, Microsoft paint turns into Photoshop,
TikTok is removing AI-generated content,
YouTube announces new AI powered tools for creators,
NVIDIA DLSS 3.5 launches,
Intel Meteor Lake release update,
UK passes massive online safety bill,
GitHub Copilot AI assistant is out now, Mark Zuckerberg and wife is funding AI System for medical Research,
OpenAI DALL-E 3 is launched,
Microsoft Surface event highlights,
Game of Thrones writer sues OpenAI,
Digital watermark for AI-Content is introduced to prevent illegal AI model training of online content.</span></span><br /><p><span class="style-scope yt-formatted-string" dir="auto"></span></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtu.be/0GRANQa6TGc?si=ALLxNPApqwDY6dcZ" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="604" data-original-width="1066" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguYMEhkSHA21lRGOe4slVhnaeks-qt_UAOLJE4Ukf8cSWg9gpEYmjVfr8zjtRrBZUWuLrZp-cW8eRckQ08woDFDy_CXNbBqLzvWvGh88jKsSxRWV5n0O4gM-UKdaPUlic6NNxCYM4D5MM6EXsZBlPDyAcDxBfGAf9QPdoP3BM87tGqQbxhXqnkfc6IPhHO/s1600/1.PNG" /></a></div>
</div>
<br /></div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-73292308992386582362023-09-05T12:41:00.004+05:002023-09-05T13:00:51.043+05:00One to one Online Session & Exclusive Discounts (%) on Membership<p> Dear All,</p><p>If you like what I do and if it helps you in anyway possible then do consider supporting my work and buy me a coke !</p>
<div>
<script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="asmak9" data-color="#FFDD00" data-emoji="🥤" data-font="Cookie" data-text="BUY ME A COKE" data-outline-color="#000000" data-font-color="#000000" data-coffee-color="#ffffff" ></script>
</div>
<br/>
<a name='more'></a>
<div>
If you want exclusive discounts (%) on my courses and coding projects and if you want to get my one to one hourly troubleshooting online help the <a href="https://www.buymeacoffee.com/asmak9" target="_blank">follow my page</a>. </div><div> </div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKq5yBHfD3bKH7OUND25oJks1joVJyreRXb5G9sXB-I6o6vlsQM0fhyYKNP1ihDy9Z7yV1X8dsO8j6B_SWL5TaH1jFrXffxUtP41uiOZRE4ZBAjGNbyfVqAcn_HaCZjcRqAVMM2UqhK7rgVWrLqUsAbwquWhqcLaEyrOLCKi6dN7VRVsnR9O9yhslsE0I5/s1409/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="825" data-original-width="1409" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKq5yBHfD3bKH7OUND25oJks1joVJyreRXb5G9sXB-I6o6vlsQM0fhyYKNP1ihDy9Z7yV1X8dsO8j6B_SWL5TaH1jFrXffxUtP41uiOZRE4ZBAjGNbyfVqAcn_HaCZjcRqAVMM2UqhK7rgVWrLqUsAbwquWhqcLaEyrOLCKi6dN7VRVsnR9O9yhslsE0I5/s16000/1.PNG" /></a></div><br /> </div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com1tag:blogger.com,1999:blog-558942077583021659.post-39988196302143076542023-08-24T17:20:00.000+05:002023-08-24T17:20:07.912+05:00Insert New Line within Excel Sheet Cell<p><span class="style-scope yt-formatted-string" dir="auto">In excel sheet, a single cell may contain large textual data that needs to be arranged in new line within cell instead of new cell.</span><br /><br />
</p><a name='more'></a><p>I am going to show you a very simple trick, which you can use in the excel sheet to insert new line within excel sheet cell.<br /></p><p><span class="style-scope yt-formatted-string" dir="auto"><br /></span></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtube.com/shorts/NPySCwHBZcg?feature=shared" style="display: block; padding: 1em 0px; text-align: center;"> <img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin1Ff5arBQMHZs1QdqottIekexF9ycvhw310R7LH_R_081YDn2YFQNpeIqC34HF4LcgQYRTSp3zuk0L10mDOCwwcvJVJkJ9v9bPsNKFR8F5p1xmorpxnUKNsWzu7H3ITvDe0KoSvNYJwo5kDqeEaMUcM_A21gh7CFJT-Vtr2ev6VSDJ4iEO9-7qTA18hBb/s1600/1.PNG" /></a></div>
</div>
<br /></div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-42178332118705598982023-08-16T13:00:00.032+05:002024-02-15T00:25:30.108+05:00RASA Chatbot SQL Server Integration using RASA Custom Actions<p><span class="style-scope yt-formatted-string" dir="auto">There are many platforms out there to develop chatbots for whatever business needs are required to be fulfilled and RASA platform is one of them. RASA chatbot platform is python-based. It comes with two version paid and open-source.</span><br /><br />
</p><a name='more'></a><p>The advantage of RASA open-source chatbot platform is that a lot of customizations can be made with a chatbot. Connecting database with the chatbot is one of them. </p><p>So, I am going to show you how to integrate SQL server database with RASA chatbot platform on windows machine.<br /></p><p><span class="style-scope yt-formatted-string" dir="auto"><br /></span></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtu.be/IWW6GFDswYI" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="604" data-original-width="1066" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih4YZyrdP5OOwK9ycZZJkoCiJFWmcsKAXP72QRGH4ABzgsnNyGRDSKF99aRLQ_vDulUp1LYFQ0stxr8PKs2OkWhdwsdATIWAGHcx71VewogBiNAcauKVHLnXjmrQqIYVHuI0KN0NodTDsGLouABmXtUCQnNWPFlfc6QNbuyqFQVLO5ZwYL5W-5YjKCRZmq/s600/1.PNG" width="600" /></a></div>
</div>
<br /></div>
<h3 style="text-align: left;">
<b><br />Prerequisites:</b></h3><div style="text-align: justify;">
Following are some of the many prerequisites for this project:<br /></div>
<ol style="text-align: justify;">
<li>Python Latest Version Installation.</li><li>RASA Platform Installation.</li><li>Knowledge of Training RASA Model.</li><li>Knowledge of Creating RASA Web Chat Widget using SOCKET.IO.</li><li>Knowledge of Building Chatbots.</li>
</ol><div style="text-align: justify;">
The running working source code solution for this project is
being developed using <b><span class="IL_AD" id="IL_AD6">Python-based RASA platform </span></b>with <b>Microsoft SQL Server 2019 Professional </b>as database on both Windows 10/11 and Linux/Ubuntu machines. For the source code in Windows or Linux/Ubuntu click on the button below.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Note that detail tutorial on how to work with RASA platform on Linux/Ubuntu machines will be coming soon, but, if you like you can play around with the provided source code for Linux/Ubuntu.<br /></div><div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h3><a class="code_win" href="https://rb.gy/qu166"><b>Code for Windows</b></a> <b>OR</b></h3>
<h3><a class="code_ubuntu" href="https://rb.gy/x7ufuh"><b>Code for Linux/Ubuntu</b></a></h3>
</div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-24008532644820835252023-08-15T19:30:00.003+05:002023-08-15T19:30:00.152+05:00Auto Fill or Auto Generate Serial Number Column in Excel without Dragging or Using Any Formulas<p><span class="style-scope yt-formatted-string" dir="auto">In excel sheet automatically generating serial number column is one of the key issue especially when data list is large and you have not apply any formula to the serial number column.</span><br /><br />
</p><a name='more'></a><p>I am going to show you a very simple trick, which you can use in the excel sheet to automatically generate or auto fill the serial number column without using any formula or dragging in excel sheet. This trick is applicable to any version of excel.<br /></p><p><span class="style-scope yt-formatted-string" dir="auto"><br /></span></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtube.com/shorts/kSinepN1vYE?feature=share" style="display: block; padding: 1em 0px; text-align: center;"> <img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3z7iuPWEo40Z5lY6eCluUz66yjZS9JQ0yDvE281q9dYbPsHNvjcjqoS0hiUdQp4vMAnWApWlf66Jqp6g4BpRRtYI_V7lq6ktDrJRxvvsXDEhRM4a0DKTI_y-J8TkD-8_IwuDUmccmIkDZn_LoHsGeynTOBxEWQoPm27W3rmXH34S5GSypqDEL0AjbrUep/s1600/2.PNG" /></a></div>
</div>
<br /></div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-6162866415644117532023-06-24T00:40:00.003+05:002024-03-04T15:57:08.023+05:00Enabling RESTful Web API for Python Chatbot RASA Platform<p><span class="style-scope yt-formatted-string" dir="auto">RASA platform </span><span class="style-scope yt-formatted-string" dir="auto">python-based </span><span class="style-scope yt-formatted-string" dir="auto"> chatbot can be easily integrated with several applications regardless of platform. The chatbot conversation can be converted to RESTful web API and then can easily integrated with platforms like android, ios, windows and the platform that is suitable to your business requirements. RASA platform is available in both paid and open-source versions.</span><br />
</p><a name='more'></a>So, I am going to show you how to enable RESTful Web API for the Python-based Chatbot using RASA platform on the
Windows 10/11 machines. At the moment detail tutorial about RASA platform Web Widget Integration on Linux/Ubuntu machines is not available, but, source code is available. My detail course will be out soon for RASA on both Windows and Linux/Ubuntus machines. So, Keep following my posts and <a href="https://bit.ly/3bgtnrH">My Youtube Channel</a>.<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtu.be/wvfo7U7ay6k" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="604" data-original-width="1066" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUOScpv0kWkbdrJiK5RWAO0hcFLhZBy9jfWwmj51tNpBvCdvonl25hZ5gzhSRyf6qJ_5WK1I06_0h35kAprybzB8cMJbZqJXWhj2bqDP282tpmUulUWjfRUBvOtjJqSyUjTTX6ZpasOikxDqGiLNANWTPsouI5BVVoU_F8U1OCjyun-0NgWZnsgA-C7CzT/s1600/1.png" width="600" /></a></div>
</div>
</div>
<h3 style="text-align: left;">
<b><br />Prerequisites:</b></h3><div style="text-align: justify;">
Following are some of the many prerequisites for this project:<br /></div>
<ol style="text-align: justify;">
<li>Python Latest Version Installation.</li><li>RASA Platform Installation.</li><li>Knowledge of Training RASA Custom Model.</li><li>Knowledge of Creating RASA Web Chat Widget using SOCKET.IO.</li><li>Basic Knowledge of Building Chatbots.</li>
</ol><div style="text-align: justify;">
The running working source code solution for this project is
being developed using <b><span class="IL_AD" id="IL_AD6">Python-based RASA platform </span></b>on both Windows 10/11 and Linux/Ubuntu machines. For the source code in Windows or Linux/Ubuntu click on the button below.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Note that detail tutorial on how to work with RASA platform on Linux/Ubuntu machines will be coming soon, but, if you like you can play around with the provided source code for Linux/Ubuntu.<br /></div><div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h3><a class="code_win" href="https://rb.gy/sxhs2t"><b>Code for Windows</b></a> <b>OR</b></h3>
<h3><a class="code_ubuntu" href="https://rb.gy/ci076r"><b>Code for Linux/Ubuntu</b></a></h3>
</div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-88940986706197904312023-06-16T23:36:00.003+05:002024-03-04T15:57:26.814+05:00Python Chatbot Web Integrating using RASA Platform | SOCKET.IO<p><span class="style-scope yt-formatted-string" dir="auto">RASA platform based chatbot can be easily integrated with HTML web pages. There are two ways RASA chatbot can be integrated with HTML web pages i.e method-1 is to use RASA platform SOCKET.IO enabling method, this is RASA platform provided web chat widget and I recommend this method. Method-2 is make your own Jquery based web chat widget and integrate RASA chatbot RESTful Web API with it. RASA platform is available in both paid and open-source versions.</span><br />
</p><a name='more'></a>So, I am going to show you how to integrate the Python-based Chatbot with a simple web page using RASA platform SOCKET.IO method web widget on the
Windows 10/11 machines. At the moment detail tutorial about RASA platform Web Widget Integration on Linux/Ubuntu machines is not available, but, source code is available. My detail course will be out soon for RASA on both Windows and Linux/Ubuntus machines. So, Keep following my posts and <a href="https://bit.ly/3bgtnrH">My Youtube Channel</a>.<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtu.be/k6G9arzR_qE" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="604" data-original-width="1066" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLbViPYNIsKnlteemB1mz6SY4mQ5FIzprjdTexS86FAnoIfuEwLHFgGBcpcgls6Ji6plOQOGsxUfWbFY5swO-OLloQSFYTlCuhmQ1EPc6SjuzFUAFtZR_bo70w_HYdDrdKLgN1tPjhDLliK2tAB_nH5rWmSP11sy8H1jMHEbCbAMDP27VD-e2v2ggXicxe/s1600/1.png" width="600" /></a></div>
</div>
</div>
<h3 style="text-align: left;">
<b><br />Prerequisites:</b></h3><div style="text-align: justify;">
Following are some of the many prerequisites for this project:<br /></div>
<ol style="text-align: justify;">
<li>Python Latest Version Installation.</li><li>RASA Platform Installation.</li><li>Knowledge of Training RASA Custom Model.</li><li>Basic Knowledge of Building Chatbots.</li>
</ol><div style="text-align: justify;">
The running working source code solution for this project is
being developed using <b><span class="IL_AD" id="IL_AD6">Python-based RASA platform </span></b>on both Windows 10/11 and Linux/Ubuntu machines. For the source code in Windows or Linux/Ubuntu click on the button below.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Note that detail tutorial on how to work with RASA platform on Linux/Ubuntu machines will be coming soon, but, if you like you can play around with the provided source code for Linux/Ubuntu.<br /></div><div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h3><a class="code_win" href="https://rb.gy/n45ioi"><b>Code for Windows</b></a> <b>OR</b></h3>
<h3><a class="code_ubuntu" href="https://rb.gy/hla22x"><b>Code for Linux/Ubuntu</b></a></h3>
</div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-62612250428028123542023-05-20T02:37:00.003+05:002024-03-04T15:57:44.440+05:00Train RASA Chatbot <p><span class="style-scope yt-formatted-string" dir="auto">Training chatbot is the key to successfully build chatbot according to your business needs. With RASA you can easily train the chatbot with your desire training data and build the custom model. You can also test out your chatbot in command style shell environment before publishing your chatbot to a rich web chat widget production environment. RASA platform is available in both paid and open-source versions.</span><br />
</p><a name='more'></a><p>RASA is a structured chatbot and as a platform it has a lot of advantages over other chatbot platfoms. A lot of customizations can be done with the RASA chatbot according to the business requirements. <br /></p><p>So, I am going to show you how
to train Python Chatbot using RASA platform with custom chat model and
how to start conversation using command style shell environment on the
Windows 10/11 machines. At the moment detail tutorial of training custom models using RASA platform on Linux/Ubuntu machines is not available, but, source code is available. My detail course will be out soon for RASA on both Windows and Linux/Ubuntus machines. So, Keep following my posts and <a href="https://bit.ly/3bgtnrH">My Youtube Channel</a>.<br /></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtu.be/T3RmPw32xDc" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="604" data-original-width="1066" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmIAQunQg_dfHRIiyyG1zVn88uPPLzmtIofoOmzMxiqgLdI1OAzTl6ObXRx_MsxssBFm782VwMRQjmRMKRIdsNZ6hzbrAduA1QoAoG3JOoDAjG4n1UiZ2cnOrBfJnhCCkANryywHX6ytcXDxIGcK13Bix36jN2Eh-9mW5DoUdISmDaTUU1FbiTG7eP8AUF/s1600/1.png" width="600" /></a></div>
</div>
</div>
<h3 style="text-align: left;">
<b><br />Prerequisites:</b></h3><div style="text-align: justify;">
Following are some of the many prerequisites for this project:<br /></div>
<ol style="text-align: justify;">
<li>Python Latest Version Installation.</li><li>RASA Platform Installation.</li><li>Basic Knowledge of Building Chatbots.</li>
</ol><div style="text-align: justify;">
The running working source code solution for this project is
being developed using <b><span class="IL_AD" id="IL_AD6">Python-based RASA platform </span></b>on both Windows 10/11 and Linux/Ubuntu machines. For the source code in Windows or Linux/Ubuntu click on the button below.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Note that detail tutorial on how to work with RASA platform on Linux/Ubuntu machines will be coming soon, but, if you like you can play around with the provided source code for Linux/Ubuntu.<br /></div><div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h3><a class="code_win" href="https://rb.gy/x3aoh3"><b>Code for Windows</b></a> <b>OR</b></h3>
<h3><a class="code_ubuntu" href="https://rb.gy/1zb5c9"><b>Code for Linux/Ubuntu</b></a></h3>
</div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-20030941051634318412023-05-12T02:34:00.010+05:002024-03-04T15:58:20.825+05:00Install Python Chatbot RASA on Windows or Linux/Ubuntu<p><span class="style-scope yt-formatted-string" dir="auto">From all the many chatbots available out there, RASA platform is one of a kind as it not only allows the developers to customize the chatbot as much as they wants using python scripting language, it is also very easy to installed on both windows 10/11 or Linux/Ubuntu machines. It is available in both paid and open-source versions.</span><br />
</p><a name='more'></a><p>RASA is a structured chatbot and as a platform it has a lot of advantages over other chatbot platfoms. A lot of customizations can be done with the RASA chatbot according to the business requirements. <br /></p><p>So, I am going to show you how to Install RASA chatbot platform on Windows 10/11 machines. For Installation on Linux/Ubuntu machines at the moment source code is available only, my detail course will be out soon for RASA on both Windows and Linux/Ubuntus machines. So, Keep following my posts and <a href="https://bit.ly/3bgtnrH">My Youtube Channel</a>.<br /></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<div class="separator" style="clear: both;"><a href="https://youtu.be/uqWDQ7inFKk" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="604" data-original-width="1066" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg24mwU0Q_LNLPaHJHkN1RsxpaH0rjfU05_sqtQRfC7IIjP0lwHyhyphenhyphenlAlwg96oOv_Oh8_C-Mwe-03fVVf4q-fLMuIytcoiwfougWWl6BKcek1ZkETsNcKXBht9o1eVPeodz3y2VKIZ9q3OJEs0Pd8yiABjLq6-fcb8liuylv-APHFUNqgAudQoq9HTy0KFS/s1600/1.png" width="600" /></a></div>
</div>
</div>
<h3 style="text-align: left;">
<b><br />Prerequisites:</b></h3><div style="text-align: justify;">
Following are some of the many prerequisites for this project:<br /></div>
<ol style="text-align: justify;">
<li>Python Latest Version Installation.</li><li>Basic Knowledge of Building Chatbots.</li>
</ol><div style="text-align: justify;">
The running working source code solution for this project is
being developed using <b><span class="IL_AD" id="IL_AD6">Python-based RASA platform </span></b>on both Windows 10/11 and Linux/Ubuntu machines. For the source code in Windows or Linux/Ubuntu click on the button below.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Note that detail tutorial on how to work with RASA platform on Linux/Ubuntu machines will be coming soon, but, if you like you can play around with the provided source code for Linux/Ubuntu.<br /></div><div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h3><a class="code_win" href="https://rb.gy/076zm1"><b>Code for Windows</b></a> <b>OR</b></h3>
<h3><a class="code_ubuntu" href="https://rb.gy/fmrhfl"><b>Code for Linux/Ubuntu</b></a></h3>
</div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com1tag:blogger.com,1999:blog-558942077583021659.post-9390697531950663042023-05-05T12:48:00.001+05:002023-05-05T12:48:50.374+05:00World's First Computer Bug<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/6nfd1gBkoMs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<br /></div>
Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-41106109528450164082023-02-20T10:27:00.000+05:002023-02-20T10:27:08.762+05:00How To Install Python JupyterLab on Windows 10/11 & Windows Server 2019<p><span class="style-scope yt-formatted-string" dir="auto">This video will show you how to install JupyterLab with latest or any version of python on Windows 10/11 or Windows Server 2019 or above machines. The video will also provide solution for the JupyterLab terminal window unhandled exception error. You will learn to install JupyterLab as windows service and also solution to JupyterLab kernel error is also provided.</span></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZGcQQV5w0Z8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<br /></div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com1tag:blogger.com,1999:blog-558942077583021659.post-87382111181821528032022-12-30T14:05:00.102+05:002023-08-15T03:50:47.520+05:00ASP.NET Core 7 MVC: Integrate Jquery Datatables Plugin with Popup CRUD Operations<div style="text-align: justify;" trbidi="on">When creating a website the key user interface (UI) components involve data list, a form that can create, edit and delete the data information, and data information detail page view. The two most popular UI designs that incorporate these UI components are <b>1)</b> Create separate pages for each UI component and when end-user interact with each action simply open a new page. <b>2)</b> Instead of creating new pages for each UI component, create page in page popup like user interaction, so that when end-user interact with each action an in-page popup opens. Option-2 is more rich and user interactive because it saves the pain of going to the new page each time one of these action is being performed. <br /></div><div dir="ltr" style="text-align: left;" trbidi="on"><br />
<a name='more'></a>
<div style="text-align: justify;">Jquery Datatables plugin is a highly recommended, interactive UI component which is used to display data list on the web pages, it provides rich features like sorting, pagination, searching and many more, which eventually saves a lot of time for developers to focus on their main development instead of reinventing the wheel to manipulate the data list at UI level. Data list can be easily manipulated at UI level using Jquery Datatables plugin. However, this plugin does not contain built-in feature to add, edit, view and delete the list data. To incorporate the CRUD (Create, Read, Update, Delete) operations with Jquery Datatables plugin, some additional development tweaks and customization are need at server-side. Also, for incorporating the CRUD operations with in-page popup view, customize development needs to be done at server-side, which may wary depend on the choice of server-side platform. <br /></div><div style="text-align: justify;"> </div><div style="text-align: justify;">Today, I shall be demonstrating integration of Jquery Ddatatables plugin with popup CRUD operations using ASP.NET Core 7 MVC platform.<br /></div></div><div dir="ltr" style="text-align: left;" trbidi="on"><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://bit.ly/3WNCAPk" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1116" data-original-width="1120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguB93LskCjDcSYK4Z3ADhLp2JiirGrIOTWThRML8NS7VjFovYKwOYQccKqaqtnuAZwOCEHj3NOftWt4myrdEEUEMd7tRXAZhykpHjeex5nIUpNNpeshuLNvgYlqVJK_pd0adkxnNgAUwV1CHxz7KTsbSceU2b0U1KOvIRE3v90pvw6tveyhYH74uY1-Q/s16000/1.png" /></a></div>
<h3 style="text-align: left;">
<b><br />Prerequisites:</b></h3><div style="text-align: justify;">
Before proceeding any further in this article, following are some of the many prerequisites for this article:<br /></div>
<ol style="text-align: justify;">
<li>Knowledge of Jquery Datatables Plugin <br /></li><li>Knowledge of Bootstrap5 Modal. </li><li>Knowledge of <a href="https://bit.ly/2OsSyNI">Loading Page on Bootstrap Modal</a>.<br /></li><li>Knowledge of ASP.NET Core MVC. </li><li>Knowledge of <a href="https://bit.ly/2PIaBhf">ASP.NET Core Entity Framework Database First Approach</a>.<br /></li>
<li>Knowledge of HTML.</li>
<li>Knowledge of JavaScript.</li>
<li>Knowledge of Bootstrap5.</li>
<li>Knowledge of JQuery.</li>
<li>Knowledge of C# Programming.</li>
</ol><div style="text-align: justify;">
The running working source code solution for this tutorial is
being developed in <b><span class="IL_AD" id="IL_AD6">Microsoft Visual</span> Studio 2022 Professional</b> with <b>Microsoft SQL Server 2019 Professional </b>as database. For the source code click on the download button below.<br /></div></div><div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h3><a class="button0" href="https://bit.ly/3WNCAPk"><b>Download Now!</b></a></h3>
<!--
<h3> <b>OR</b></h3>
<h3><sellcodes-checkout offer="Dsk2R4Kc" button-text="Buy Now" /></h3>
-->
<div style="text-align: justify;" trbidi="on">
Let's begin now.<br /><br /></div>
<div style="text-align: justify;" trbidi="on"><b>1)</b> In the first step, create a new "<i>ASP.NET Core Web App (Model-View-Controller)</i>" web project and name it "<i>CoreDatatablesPluginWithCRUD</i>". Make sure to select .NET 7 as framework.</div></div>
<p></p>
<p><b>2) </b>To connect the project with SQL server database, following list of packages are required to be installed using nuget package manager in the below <u>listed order</u> i.e.</p>
<ol style="text-align: left;">
<li>Microsoft.EntityFrameworkCore.SqlServer</li>
<li>Microsoft.EntityFrameworkCore.Tools</li>
<li>Microsoft.EntityFrameworkCore.Design <br /></li>
</ol>
<p>You also need to install 'Newtonsoft.Json' package if it is not already installed in your project.</p><p><b></b></p>
<div class="separator" style="clear: both; text-align: center;"><b>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7XeZQzj_QvaL2j13ucKElpWbrfMTKbN7uSh55BW1YgfRIsF97ffFGYzmsceUSpkkm-rjy8OJe-Op2Uu3l3ftT-sw3bMVXgk3xZZnF8CzMHuZ6TTxaDW1TMACLeU87_7SYqdNcTH57UunL85rIjn928XGaXuDnWAK3u8NBNaSYHWv8rpyEDXI8Nn0uQ/s936/2.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="298" data-original-width="936" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7XeZQzj_QvaL2j13ucKElpWbrfMTKbN7uSh55BW1YgfRIsF97ffFGYzmsceUSpkkm-rjy8OJe-Op2Uu3l3ftT-sw3bMVXgk3xZZnF8CzMHuZ6TTxaDW1TMACLeU87_7SYqdNcTH57UunL85rIjn928XGaXuDnWAK3u8NBNaSYHWv8rpyEDXI8Nn0uQ/s16000/2.PNG" /></a></b></div>
<div class="separator" style="clear: both; text-align: center;"><b>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZRISxUJxlo-GD2YTh0UMCeSi7WyrsUzPm99jRid6ODVr8lFuR7AuL5RioK_iXK1cTFfjnwT1XrwmFl2XkNyw--GG56_MRqf-KH3JVZN9Kagx1fBc28_mdqRkZdrGdm-qYXVI6_dB9cm88SI8mCCJM0J2vV_hB6_9w0hmKE6j0sobWnzD_moTTnIRKAA/s934/3.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="277" data-original-width="934" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZRISxUJxlo-GD2YTh0UMCeSi7WyrsUzPm99jRid6ODVr8lFuR7AuL5RioK_iXK1cTFfjnwT1XrwmFl2XkNyw--GG56_MRqf-KH3JVZN9Kagx1fBc28_mdqRkZdrGdm-qYXVI6_dB9cm88SI8mCCJM0J2vV_hB6_9w0hmKE6j0sobWnzD_moTTnIRKAA/s16000/3.PNG" /></a></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8J9oHsSpiN-57XnvB9vPrqF9cQPmWjbbuJm_7Q1okbNAK9gp5o4pXkrZZO0DBocOVItcsJYgKgWLbQ1OIBIxWGvOXb0yXr61PpzUKNMyC-dg_Jnqm4kgsaDYE3M-U0_8QCdM6T1TdCh_2GhuzoHIFTUNHJTxkysdKPB3QrKQzr85qSOFtPEUPo_453w/s926/4.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="285" data-original-width="926" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8J9oHsSpiN-57XnvB9vPrqF9cQPmWjbbuJm_7Q1okbNAK9gp5o4pXkrZZO0DBocOVItcsJYgKgWLbQ1OIBIxWGvOXb0yXr61PpzUKNMyC-dg_Jnqm4kgsaDYE3M-U0_8QCdM6T1TdCh_2GhuzoHIFTUNHJTxkysdKPB3QrKQzr85qSOFtPEUPo_453w/s16000/4.PNG" /></a></div>
<p><b>3)</b> Build the project and make sure that there is no errors in the build at this stage.</p>
<p><b>4) </b>Now, next step is to design the database with the require tables and store procedures and add some sample data in it using Microsoft SQL Server. I have created a database design with a simple customer table with some sample data and relevant store procedures to support the CRUD operations for data listing, insert, update, delete and view.<br /></p>
<p><b>5)</b> After creating the targeted database, now is the good time to connect the SQL server database with asp.net core 7 mvc project using entity framework database first approach. To do this as per asp.net core rules, a DbContext class needs to be created, which will be the data access layer for the application. To generate the DbContext file according to the targeted SQL server database, open the <i>Tools -> NuGet Package Manager -> Package Manager Console</i> as shown below i.e.</p><p></p>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ5MHvH5q7XOfBpUPQ_k4D7J67MF2AtP9wHPIrH4Q950EDiLRsnqdVPHYqxyHcyQDfxoKlTBvds32n_R-mHT8QknlqoE-VCfo_CRhjLLvoDGTf-Vbx6obtMHbMEWEMMOOGCUeV2QA-CocjuqN7p274BzNhe2rL09-3lNSix1y4FzmIU8EkraDMkt-Uwg/s1449/5.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="789" data-original-width="1449" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ5MHvH5q7XOfBpUPQ_k4D7J67MF2AtP9wHPIrH4Q950EDiLRsnqdVPHYqxyHcyQDfxoKlTBvds32n_R-mHT8QknlqoE-VCfo_CRhjLLvoDGTf-Vbx6obtMHbMEWEMMOOGCUeV2QA-CocjuqN7p274BzNhe2rL09-3lNSix1y4FzmIU8EkraDMkt-Uwg/s16000/5.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKewDa41krKXpop-HnEPapsX_xGD5IXj1v86qLv1qINxKXK2_ejdAUTVWdJ3jwRLo-SkMg2xM-MXlhgKjMCg37Z6e5m-jLXHKI7lRqMA9oQOrIDrDskuRsSInLs0tcQseZJbwUOR4DrymbA-8SsyvsQ-9jGjXR-K2UhnjHYz6ur7mI5Xm3ZTDoz-5HDQ/s850/6.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="390" data-original-width="850" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKewDa41krKXpop-HnEPapsX_xGD5IXj1v86qLv1qINxKXK2_ejdAUTVWdJ3jwRLo-SkMg2xM-MXlhgKjMCg37Z6e5m-jLXHKI7lRqMA9oQOrIDrDskuRsSInLs0tcQseZJbwUOR4DrymbA-8SsyvsQ-9jGjXR-K2UhnjHYz6ur7mI5Xm3ZTDoz-5HDQ/s16000/6.PNG" /></a></div>
<p></p>
<p><b>6)</b> Now, I will use "<i>Scaffold-DbContext</i>" command to generate the require DbContext file. There are two ways you can use the Scaffold-DbContext command to generate the require DbContext file i.e. </p>
<ol style="text-align: left;">
<li>Directly using SQL connection string with the command. </li>
<li> Define SQL connection string within appsettings.json file. </li>
</ol><p></p><p></p>
<h3 style="text-align: left;"><b>1. </b>Directly using SQL connection string within the command. </h3>
<p>Type the below command inside Package Manager Console window by directly using SQL connection string within Scaffold-DbContext command, make sure that you update the below command with your SQL server credentials i.e.</p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">Scaffold-DbContext <span style="background-color: #fff0f0;">"Server=SQL_SERVER_NAME;Database=SQL_DATABASE_NAME;user id=SQL_USERNAME;password=SQL_PASSWORD;Trusted_Connection=True;TrustServerCertificate=True;"</span> Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models/DB
</pre></div>
<p></p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjU8NGaT5eklIwchO5I-2A35iUa4IhUQaO1aZRdwKhZT9AaLtvDXJYqm55zcqpaCwUpMnHRXlMgPV_i00YBNbjwzTnOvVqwauVhkgnXO0BQ72HLwiCbpK-Hr8iXFVJvUJ3zv9cy1UsTbJfHsvrmzYFoEl8-5ky-W1aR_OFAOD4dNo4jaO-P_7pMNxCg/s1855/7.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="283" data-original-width="1855" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxjU8NGaT5eklIwchO5I-2A35iUa4IhUQaO1aZRdwKhZT9AaLtvDXJYqm55zcqpaCwUpMnHRXlMgPV_i00YBNbjwzTnOvVqwauVhkgnXO0BQ72HLwiCbpK-Hr8iXFVJvUJ3zv9cy1UsTbJfHsvrmzYFoEl8-5ky-W1aR_OFAOD4dNo4jaO-P_7pMNxCg/s16000/7.PNG" /></a></div>
<p></p>
<h3 style="text-align: left;">2. Define SQL connection string within appsettings.json file.</h3>
<p>First define the SQL server connection string within "<i>appsettings.json</i>" file and then type the below Scaffold-DbContext command inside Package Manager Console window to generate the DbContext file. Make sure
that you have updated the SQL server connection string within the appsettings.json file with your SQL server credentials and update the below command connection string name with your appsettings.json file i.e.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuAmVMPjy-4c6RCppCsmEHJFFTfBwQCirmRqdd_yKUslNo7_-nPeTnTwXSGzqxcDbTf9n9Cyse2LetFHkxQk5dJidfw-FqUFFy1xHZ8JUb7lo4W0LtKbHXBk_Uj_MwrZQDmr5iJ5hII5s7b6mlT3ktqpj3a1jfkotBdOGwWlGDvFFJCdG8pSMoKbu4jA/s1600/8a.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="102" data-original-width="1694" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuAmVMPjy-4c6RCppCsmEHJFFTfBwQCirmRqdd_yKUslNo7_-nPeTnTwXSGzqxcDbTf9n9Cyse2LetFHkxQk5dJidfw-FqUFFy1xHZ8JUb7lo4W0LtKbHXBk_Uj_MwrZQDmr5iJ5hII5s7b6mlT3ktqpj3a1jfkotBdOGwWlGDvFFJCdG8pSMoKbu4jA/s1600/8a.PNG" /></a></div>
<p></p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">Scaffold-DbContext <span style="background-color: #fff0f0;">"Name=ConnectionStrings:YOUR_CONNECTION_STRING_NAME"</span> Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models/DB
</pre></div>
<p></p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40SGd4-CK5iafEtswGwz1TxwDqGWJBsx01immLWl7VyxcPs5Grg5zAufqwV103-cvCMW3CwMijGLK7oAgUhbsZzS8xfKKXHuCogyHJa5KsegZGeCK13HY02ChsISun5LkxQv-7g6oKp6bvWuQ9LXFpyqZEuiLQ4O0_tua6uyGDQFUQgqk9T1uNhR02A/s1600/8b.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="284" data-original-width="1794" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40SGd4-CK5iafEtswGwz1TxwDqGWJBsx01immLWl7VyxcPs5Grg5zAufqwV103-cvCMW3CwMijGLK7oAgUhbsZzS8xfKKXHuCogyHJa5KsegZGeCK13HY02ChsISun5LkxQv-7g6oKp6bvWuQ9LXFpyqZEuiLQ4O0_tua6uyGDQFUQgqk9T1uNhR02A/s1600/8b.PNG" /></a></div>
<p><b>7)</b> The targeted DbContext file has been generated as shown below. Now update the DbContext file to incorporate the store procedures calls and also create the targeted custom object mapper classes for your select type store procedures. Here you need to make sure that the custom object mapper properties that you are creating must exactly match the fields defined in the database store procedure along with the data type. If in case you are generating an integer value dynamically which is not part of the table then its type must be set to long instead of integer within your object mapper property. </p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY3ljyz9QVhofLpPrH0GejLsRU7Xr7_VRU8JraB2-fwWn_zUV07XlGq7mmBM0-pQNj8OrvAmZARGDOAmyqp4saUBLUAR_FQvXvqAbyPEPYgxyFBbW2EdkyQ-FQhCiDYsHMPYnwa8Ky6TmESTgQfLyUih7CV5W2laRA6G-D00s6K9Js7A_5FMBLyDrBdQ/s398/9.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="398" data-original-width="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY3ljyz9QVhofLpPrH0GejLsRU7Xr7_VRU8JraB2-fwWn_zUV07XlGq7mmBM0-pQNj8OrvAmZARGDOAmyqp4saUBLUAR_FQvXvqAbyPEPYgxyFBbW2EdkyQ-FQhCiDYsHMPYnwa8Ky6TmESTgQfLyUih7CV5W2laRA6G-D00s6K9Js7A_5FMBLyDrBdQ/s16000/9.PNG" /></a></div>
<p></p>
<p><b>8)</b> Now, register the created DbContext file as service within asp.net core platform, so, that by using the dependency injection design pattern the database layer can be accessed within the controllers. To do this open "Program.cs" file, notice in .NET Core 7, there is no Startup.cs file available because it's content has been merged together within the Program.cs file, so, all services are now registered within Program.cs file. So, paste below line of code to register the generated DbContext as service i.e.</p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
<span style="color: #888888;">// [Asma Khalid]: Register SQL database configuration context as services. </span>
builder.Services.AddDbContext<DbCoreDatatablesContext>(options => options.UseSqlServer(builder.Configuration.GetConnectionString(<span style="background-color: #fff0f0;">"YOUR_CONNECTION_STRING_NAME"</span>)));
...
</pre></div>
<p></p><p>
In the above command, make sure to use the connection string name that you have defined within appsettings.json file.<b> <br /></b></p>
<p><b>9)</b> Now, for accessing the database layer services with the help of dependency injection design pattern, first create a private property of the DbContext database type and then create the overload constructor with DbContext database as passing variable within "<i>Controllers -> HomeController.cs</i>" file as shown in the below lines of code i.e.</p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
<span style="color: #888888;">/// <summary></span>
<span style="color: #888888;">/// Database Manager property.</span>
<span style="color: #888888;">/// </summary></span>
<span style="color: #008800; font-weight: bold;">private</span> <span style="color: #008800; font-weight: bold;">readonly</span> DbCoreDatatablesContext databaseManager;
...
<span style="color: #888888;">/// <summary></span>
<span style="color: #888888;">/// Initializes a new instance of the <see cref="HomeController"/> class.</span>
<span style="color: #888888;">/// </summary></span>
<span style="color: #888888;">/// <param name="databaseManagerContext">Database manager context parameter</param></span>
<span style="color: #008800; font-weight: bold;">public</span> <span style="color: #0066bb; font-weight: bold;">HomeController</span>(DbCoreDatatablesContext databaseManagerContext)
{
<span style="color: #008800; font-weight: bold;">try</span>
{
<span style="color: #888888;">// Settings.</span>
<span style="color: #008800; font-weight: bold;">this</span>.databaseManager = databaseManagerContext;
}
<span style="color: #008800; font-weight: bold;">catch</span> (Exception ex)
{
<span style="color: #888888;">// Info</span>
Console.Write(ex);
}
}
...
</pre></div>
<p></p>
<p><b>10)</b> Next, create a suitable default layout for your project and include
relevant JavaScripts and CSS styles libraries references. I am using
Jquery Datatables plugin for bootstrap 5 framework along with my
customize JavaScript & Style files. Make sure to add references of
all the necessary script and style files in your layout as needed. <b> <br /></b></p><p><b>11)</b> To use Ajax form in asp.net core 7 MVC install below package from nuget package manager i.e.</p><ol style="text-align: left;"><li>AspNetCore.Unobtrusive.Ajax</li></ol>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiClASZi52swmyWp_21gdtOSNwGD9OXlnS_mhLeYnTQNeoF--7jiX6lztVd1W0Qxx6qmasjepzRgWRooT8YifEtNoB52eFXr6uB6lLvwrXpfhD1ua240g5SjBFnUJ-G96b4_l5a8xXva-TcU-r-_gUB-WMCLrgxVHsd6CD9E5pvt6jBQGl2PbZLJZkG0g/s961/10.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="304" data-original-width="961" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiClASZi52swmyWp_21gdtOSNwGD9OXlnS_mhLeYnTQNeoF--7jiX6lztVd1W0Qxx6qmasjepzRgWRooT8YifEtNoB52eFXr6uB6lLvwrXpfhD1ua240g5SjBFnUJ-G96b4_l5a8xXva-TcU-r-_gUB-WMCLrgxVHsd6CD9E5pvt6jBQGl2PbZLJZkG0g/s16000/10.PNG" /></a></div>
<p><b>12)</b> To incorporate the reference of the "<i>AspNetCore.Unobtrusive.Ajax</i>" package, first register this package as a service in the "Program.cs" file by adding the below lines of code i.e.</p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
<span style="color: #888888;">// [Asma Khalid]: Register Unobtrusive Ajax services.</span>
builder.Services.AddUnobtrusiveAjax(useCdn: <span style="color: #008800; font-weight: bold;">true</span>, injectScriptIfNeeded: <span style="color: #008800; font-weight: bold;">false</span>);
...
<span style="color: #888888;">// [Asma Khalid]: Register Unobtrusive Ajax services. It is required for serving 'jquery-unobtrusive-ajax.min.js' embedded script file.</span>
app.UseUnobtrusiveAjax();
...
</pre></div>
<p></p>
<p>Then add this package references within the "<i>_Layout.cshtml</i>" file as shown in the below lines of code i.e.</p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
<span style="color: #888888;"><!-- Unotrusive Ajax Scripts --></span>
@Html.RenderUnobtrusiveAjaxScript()
...
</pre></div>
<p></p>
<p><b>13)</b> In the next step, for popup style page, I have created two modal files "<i>_ModalRemotePartial.cshtml</i>" & "<i>_ModalMsgPartial.cshtml</i>". First modal is used to load Add, Edit, Delete and View pages and second modal is used to display any messages from server side like an alert. So, these two modals need to be referenced within the layout file. As shown in the below lines of code i.e.</p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
<span style="color: #888888;"><!-- Modal --></span>
@await Html.PartialAsync(SpecialPaths.MODAL_REMOTE_PARTIAL_PAGE_PATH)
@await Html.PartialAsync(SpecialPaths.MODAL_MSG_PARTIAL_PAGE_PATH)
...
</pre></div>
<p></p>
<p><b>14) </b>Now, in the next step, design the "<i>Views -> Home -> Index.cshtml</i>" page file. In my case, I have design the page to display a page title, add button and a "<i>Views -> Home -> </i><i>_ViewListPartial.cshtml</i>" partial page file containing the Jquery Datatable plugin data list. As shown below i.e.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkrz3tmviTmihofz83DfjsvWyFLhm7eeEsP-evGwsSjF_te-92BS3EgsULMe-i1Ph5yKu4BYsKWPkUDKEC2eQwuX7SsE97e_F8nGfD_Pik9MItNDdTaor4Sg3uc9N7lyCaVHDqA8P2F_sW7j9v4JqovN4bha0lKit5R--vfadyZg7jqoldV5PJjtElA/s947/11.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="755" data-original-width="947" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkrz3tmviTmihofz83DfjsvWyFLhm7eeEsP-evGwsSjF_te-92BS3EgsULMe-i1Ph5yKu4BYsKWPkUDKEC2eQwuX7SsE97e_F8nGfD_Pik9MItNDdTaor4Sg3uc9N7lyCaVHDqA8P2F_sW7j9v4JqovN4bha0lKit5R--vfadyZg7jqoldV5PJjtElA/s16000/11.PNG" /></a></div>
<p>I am using a simple server-side processing of Jquery Datatables plugin. The key change in the plugin configuration is that I have added my customize loader instead of using plugin's default loader. So, add the below lines of code within the "<i>wwroot -> js -> script-custom-datatables.js</i>" scrip file inside the plugin configurations i.e.</p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
<span style="background-color: #fff0f0;">"language"</span><span style="color: #333333;">:</span>
{
<span style="background-color: #fff0f0;">"processing"</span><span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">"<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"</span>
},
...
</pre></div>
<p></p>
<p>When you add above lines of code within the jquery datatables plugin configurations, the loader will look something like this i.e.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vJRid6NsQo4UDT-muonvDoNOKdstYm4b4VtUkVB5PAu0ybITGBMvvLDViKkmN5H0X98E2inulcTVPQkgz6FO3Fo3k4jIoRxgweePPt_G2PpJ1_P7gqSDNOlBKrEc-G48Z-cJvC3YYDzKdMF7Ui2tXrA8lUA8_wNUHVCcEL-RLjS47ukYyUTsMO5Ipg/s1769/11b.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="567" data-original-width="1769" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vJRid6NsQo4UDT-muonvDoNOKdstYm4b4VtUkVB5PAu0ybITGBMvvLDViKkmN5H0X98E2inulcTVPQkgz6FO3Fo3k4jIoRxgweePPt_G2PpJ1_P7gqSDNOlBKrEc-G48Z-cJvC3YYDzKdMF7Ui2tXrA8lUA8_wNUHVCcEL-RLjS47ukYyUTsMO5Ipg/s16000/11b.PNG" /></a></div>
<p></p>
<p>You can notice the issue here that my customize loader is placed on top of the plugin's default's loader which is incorrect design. So, to remove the plugin's default loader, add below lines of code within the "<i>wwroot -> css -> style-custom-datatables.css</i>" style file i.e. </p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;"><span style="color: #333333;">...</span>
<span style="color: #007700;">div</span><span style="color: #bb0066; font-weight: bold;">.dataTables_processing</span> <span style="color: #333333;">></span> <span style="color: #007700;">div</span><span style="color: #555555; font-weight: bold;">:last-child</span>
{
<span style="color: #008800; font-weight: bold;">display</span><span style="color: #333333;">:</span> <span style="color: #008800; font-weight: bold;">none</span> <span style="color: #557799;">!important</span>;
}
<span style="color: #333333;">...</span>
</pre></div>
<p></p>
<p>The loader will now look correct as shown below i.e.</p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6BdxR4SsOtrY-1E04SlqxaPwHGEL-aBxlI1hiwwQupiMnCWzV62jNDlljMEPAalyAdsq84THomde6LIaRX6YUtUABPRXS1-EWS64FCHMbk7vl8dI4I4OacZv9UO0CSIJzbxbRWfKKk0-riCy0XRiUX39YYF85axkdYiuQIvjhWufzpw7RzZKI_WXsXg/s1759/11a.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="581" data-original-width="1759" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6BdxR4SsOtrY-1E04SlqxaPwHGEL-aBxlI1hiwwQupiMnCWzV62jNDlljMEPAalyAdsq84THomde6LIaRX6YUtUABPRXS1-EWS64FCHMbk7vl8dI4I4OacZv9UO0CSIJzbxbRWfKKk0-riCy0XRiUX39YYF85axkdYiuQIvjhWufzpw7RzZKI_WXsXg/s16000/11a.PNG" /></a></div>
<p></p>
<p>Another important thing is that with asp.net core 7 mvc platform, the json key data is only accepted in camel-case notation. So, if let say your server-side object mapper contains key variable name as "<i>FirstName</i>" and you use it exactly same within your JavaSctipt file then the JavaScriptot will not recognize this json key. So, you need to change it to camel-case notation i.e. "firstName". This change is also applicable to the jquery datatables plugin columns during configuration within the javascript file. So, make sure you have converted the column names in camel-case notation within the javascript. </p><p>The pagination, sorting and searching of Jquery Datatables plugin have been manged at server-side. As shown below i.e.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO2JeZLf_JTegOXkqqRDGhF7qdn3UDK7u__Bp7t9f_T5SqeGJhneJnB6METhHSZX5bSvaEq6atsfe4VD36QYQjy7JUm-PUKR5qqRUdN-PeCl6HyxaD007IW5IUrjEXHlXTiyJoPqBZB97v0H43OavSkoJeOf5rizQ77KbQ9xWLdvsvR4lXWWU9Yda9ig/s1732/11c.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="396" data-original-width="1732" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO2JeZLf_JTegOXkqqRDGhF7qdn3UDK7u__Bp7t9f_T5SqeGJhneJnB6METhHSZX5bSvaEq6atsfe4VD36QYQjy7JUm-PUKR5qqRUdN-PeCl6HyxaD007IW5IUrjEXHlXTiyJoPqBZB97v0H43OavSkoJeOf5rizQ77KbQ9xWLdvsvR4lXWWU9Yda9ig/s16000/11c.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid0fgYnV300qqaSAh-5oUQF13TVXpGwbTeO9zuAgqzAiTS3wSQbyHkdnUNSkicVB-qh2fqO2fwMEvYCU8HhFGUXS7UmEBBri8JHNsuBG77NmALNS-BXMJlEtpoMlzpuHsGg_pk_u7rOJcdro2aLE2zljYA54N_RS21Dk8Fxx2BzRWQJvbkZYu5bZyBYQ/s1736/11d.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="841" data-original-width="1736" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid0fgYnV300qqaSAh-5oUQF13TVXpGwbTeO9zuAgqzAiTS3wSQbyHkdnUNSkicVB-qh2fqO2fwMEvYCU8HhFGUXS7UmEBBri8JHNsuBG77NmALNS-BXMJlEtpoMlzpuHsGg_pk_u7rOJcdro2aLE2zljYA54N_RS21Dk8Fxx2BzRWQJvbkZYu5bZyBYQ/s16000/11d.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYWAesbKEt_Wilj6p03RzCgC4ABOm_3tqoX2vlompCPnuPScamxBo-9KvXMcikQp5FPUGqtIJb6eKgbsyiACK1EDGZJqOvNpbwRzMSJQro55ND5nRx77tlPyc9KQxjfz1I8wjAGKvGCYDdi-3g9pTsFUmFcWFwB4s4ZpVtS134NHYtyjtltDOtTjyCw/s1735/11e.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="834" data-original-width="1735" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYWAesbKEt_Wilj6p03RzCgC4ABOm_3tqoX2vlompCPnuPScamxBo-9KvXMcikQp5FPUGqtIJb6eKgbsyiACK1EDGZJqOvNpbwRzMSJQro55ND5nRx77tlPyc9KQxjfz1I8wjAGKvGCYDdi-3g9pTsFUmFcWFwB4s4ZpVtS134NHYtyjtltDOtTjyCw/s16000/11e.PNG" /></a></div>
<p></p>
<p><b>15)</b> In the next step, design the "<i>Views -> Home -> Add.cshtml</i>" page file. In my case, I have include a page tile and a "<i>Views -> Home -> </i><i>_CRUDPartial.cshtml</i>" partial page file containing a form which will process the add, update and view action perfom by the end-user. Since, I want my add page to be a popup page, therefore, in the "<i>Controllers -> HomeController.cs</i>" file HTTP Get action method "<i>Add</i>", change the return type to be a partial view with your attach model as shown in the below lines of code i.e. </p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
<span style="color: #888888;">// Info.</span>
<span style="color: #008800; font-weight: bold;">return</span> <span style="color: #008800; font-weight: bold;">this</span>.PartialView(model);
...
</pre></div>
<p></p>
<p>For HTTP POST action method "Add". I am returning different JSON responses depend on the business logic. In the "<i>Views -> Home -> </i><i>_CRUDPartial.cshtml</i>" partial page, I am using AJAX form helper tag as shown in the below lines of code i.e.</p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
@using (Html.AjaxBeginForm(Model.ActionName, SpecialPaths.HOME_CONTROLLER, new AjaxOptions { HttpMethod = "POST", OnSuccess = "onActionSuccess" }, new { @id = "homeActionId", @class = "form-horizontal", role = "form" }))
{
<span style="color: #888888;"><!-- Form Elements --></span>
...
}
...
</pre></div>
<p></p>
<p>In the above code, AjaxOptions onSuccess method is defined within "<i>wwroot -> js ->script-custom-forms.js</i>" script file. So, whatever message response from server side is received when the form data is submitted, the response messages will be displayed as a popup alert whenever onSuccess method is processed. Make sure to include the form validation scripts available within "<i>Views -> Shared -> _ValidationScriptsPartial.cshtml</i>" file. </p><p>The form data is submitted via JavaScript method "<i>AjaxHomeFormSubmit(...)</i>" along with onSuccess method "<i>onActionSuccess</i>" which are available within "<i>wwwroot -> js -> script-custom-forms.js</i>" file. The "<i>AjaxHomeFormSubmit(...)</i>" method needs to be register as form event listener in order to prevent multiple calling issue of the form submit AJAX method. This registration needs to be done within "<i>_ModalRemotePartial.cshtml</i>" modal configuration method which is available within "<i>wwwroot -> js -> script-custom-modal.js</i>" script file as shown in the below lines of code i.e.</p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
<span style="color: #888888;">// Modal Click Load server content.</span>
$(<span style="background-color: #fff0f0;">"#ModalRemoteBoxId"</span>).on(<span style="background-color: #fff0f0;">"show.bs.modal"</span>, <span style="color: #008800; font-weight: bold;">function</span> (e)
{
<span style="color: #888888;">// Loading.</span>
<span style="color: #008800; font-weight: bold;">var</span> link <span style="color: #333333;">=</span> $(e.relatedTarget);
<span style="color: #888888;">// Loading.</span>
$(<span style="color: #008800; font-weight: bold;">this</span>).find(<span style="background-color: #fff0f0;">".modal-body"</span>).load(link.attr(<span style="background-color: #fff0f0;">"href"</span>), <span style="color: #008800; font-weight: bold;">function</span> ()
{
<span style="color: #888888;">// Add Event listener to Home Form</span>
<span style="color: #008800; font-weight: bold;">const</span> homeForm <span style="color: #333333;">=</span> <span style="color: #007020;">document</span>.getElementById(<span style="background-color: #fff0f0;">'homeActionId'</span>);
homeForm.addEventListener(<span style="background-color: #fff0f0;">'submit'</span>, AjaxHomeFormSubmit);
});
});
...
</pre></div>
<p></p>
<p>To tie the entire add popup page together, In the index page's add button, include the below properties to enable the popup modal i.e.</p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
data-bs-toggle="modal" data-bs-target="#ModalRemoteBoxId"
...
</pre></div>
<p></p>
<p>The add page will look as shown below i.e.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4cAp4BKCP-lAnLqKkmJkVaCl3Tv64wm7je2BBPqKxp0EUCaEJL10AEOm92YbzD865f644_kGyDAkSLRV6shJBtelDMvH-iLskmQl1Se3EO4GQzUbqw_mPBvuD2kZrf95pD903SfY6Tzhbi1XovI6TBvxKyK5ANMyXHIkS35wZKSxzW2Fmh_LVw-chUg/s1821/12.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="856" data-original-width="1821" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4cAp4BKCP-lAnLqKkmJkVaCl3Tv64wm7je2BBPqKxp0EUCaEJL10AEOm92YbzD865f644_kGyDAkSLRV6shJBtelDMvH-iLskmQl1Se3EO4GQzUbqw_mPBvuD2kZrf95pD903SfY6Tzhbi1XovI6TBvxKyK5ANMyXHIkS35wZKSxzW2Fmh_LVw-chUg/s16000/12.PNG" /></a></div>
<p>As the form validation is also enabled, so, in case of error the popup will look like as shown below i.e.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJEmwBD7b-STny2dVXuU8_4ifCGJOJaylfk_Ag8PhAFuSG3a80y-TVbty5E2Ig3wmrxx6p5yiSovoVUeHkBb_9u-Ue6i5k9TWbkFWN88lIy6PDnfuzGslDFhPjw-dAH2oM9DH8yGHgTiDzoJmBdsU4Tbl1Z9iaCXbYMsK-nAXX9hn14bF0eZunHrssA/s1803/13.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="852" data-original-width="1803" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJEmwBD7b-STny2dVXuU8_4ifCGJOJaylfk_Ag8PhAFuSG3a80y-TVbty5E2Ig3wmrxx6p5yiSovoVUeHkBb_9u-Ue6i5k9TWbkFWN88lIy6PDnfuzGslDFhPjw-dAH2oM9DH8yGHgTiDzoJmBdsU4Tbl1Z9iaCXbYMsK-nAXX9hn14bF0eZunHrssA/s16000/13.PNG" /></a></div>
<p></p>
<p><b>16)</b> In the next step, create a menu button within the jquery datatable plugin data list in order to perform view, edit and delete actions. This menu can be created as dynamic HTML string at the plugin's configuration level or at the server-side level. I prefer creating the dynamic HTML string at server side. So, when loading my data list, all I have to do is mapped the dynamic HTML string into one of the object mapper property with the targeted customer IDs as shown in the below lines of code i.e.</p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
Action = <span style="background-color: #fff0f0;">" <div class=\"btn-group\"> "</span> +
<span style="background-color: #fff0f0;">" <button type=\"button\" class=\"btn btn-danger dropdown-toggle custom-btn-settings\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"> "</span> +
<span style="background-color: #fff0f0;">" <i class=\"fa fa-gear\"></i> "</span> +
<span style="background-color: #fff0f0;">" </button> "</span> +
<span style="background-color: #fff0f0;">" <ul class=\"dropdown-menu dropdown-menu-dark\"> "</span> +
<span style="background-color: #fff0f0;">" <li><a href= \""</span> + obj.Url.Action(viewActionName, controllerName, <span style="color: #008800; font-weight: bold;">new</span> { CustomerId = p.customer_id }) + <span style="background-color: #fff0f0;">"\" class=\"dropdown-item\" data-bs-toggle=\"modal\" data-bs-target=\"#ModalRemoteBoxId\" ><i class=\"fa fa-eye\"></i> <span>View</span></a></li> "</span> +
<span style="background-color: #fff0f0;">" <li><hr class=\"dropdown-divider\"/></li> "</span> +
<span style="background-color: #fff0f0;">" <li><a href= \""</span> + obj.Url.Action(editActionName, controllerName, <span style="color: #008800; font-weight: bold;">new</span> { CustomerId = p.customer_id }) + <span style="background-color: #fff0f0;">"\" class=\"dropdown-item\" data-bs-toggle=\"modal\" data-bs-target=\"#ModalRemoteBoxId\" ><i class=\"fa fa-edit\"></i> <span>Edit</span></a></li> "</span> +
<span style="background-color: #fff0f0;">" <li><a href= \"JavaScript:{AjaxDeleteAction('"</span> + obj.Url.Action(deleteActionName, controllerName, <span style="color: #008800; font-weight: bold;">new</span> { CustomerId = p.customer_id }) + <span style="background-color: #fff0f0;">"');}\" class=\"dropdown-item\"><i class=\"fa fa-trash\"></i> <span>Delete</span></a></li> "</span> +
<span style="background-color: #fff0f0;">" </ul> "</span> +
<span style="background-color: #fff0f0;">" </div> "</span>
...
</pre></div>
<p></p>
<p>In the above code, notice that view and edit actions will be displayed as popup modal and delete action is processed with a JavaScript method available within "<i>wwwroot -> js -> script-custom-forms.js</i>" file. The reason is simple, delete action does not need a page. The menu on each entry of the jquery datatables plugin list will look as shown below i.e.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIl3h9ghQwP56COoNTepJMBh6d3XGe693TX9hCArXsVkuzFhjJejN-GlU9n-5owvpM6LcDuJlbpJPRNYm9R5yRa2_O9yv0AFLlzeLXkQ7nEZ6lscEj5P8vdkmi1wjKF5WTGls_aNsfrg6WqRPfqYUJJ0XTTHGAFyNIPWBDOdhn4b3jUQCAXzoYN9iFBA/s281/16.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="279" data-original-width="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIl3h9ghQwP56COoNTepJMBh6d3XGe693TX9hCArXsVkuzFhjJejN-GlU9n-5owvpM6LcDuJlbpJPRNYm9R5yRa2_O9yv0AFLlzeLXkQ7nEZ6lscEj5P8vdkmi1wjKF5WTGls_aNsfrg6WqRPfqYUJJ0XTTHGAFyNIPWBDOdhn4b3jUQCAXzoYN9iFBA/s16000/16.PNG" /></a></div>
<p><b>17)</b> In the next step, create the view page in same manner as the add page. The only difference is in the HTTP GET "DetailView" action method logic and there is no HTTP POST action method and the page fields are non-editable. The view page will look as shown below i.e.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyL2gAHbfR3LtQ4gJrKdUDp-Lv4gtd0bBJdY0TFEiskB5AOo-sTit_NhnaQKrrPqekrxQ9LoNrvMDt82HCXNJ1O9GAMobM0AaimjeFR5vLZD5hFpkLfo42e2q0ZcwfRioUVZgccdkOoTKqTiQUE7B0uGg31dRXcbfn9ci8D_0UHuZCSmwWqf39zyBDGg/s1786/19.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="840" data-original-width="1786" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyL2gAHbfR3LtQ4gJrKdUDp-Lv4gtd0bBJdY0TFEiskB5AOo-sTit_NhnaQKrrPqekrxQ9LoNrvMDt82HCXNJ1O9GAMobM0AaimjeFR5vLZD5hFpkLfo42e2q0ZcwfRioUVZgccdkOoTKqTiQUE7B0uGg31dRXcbfn9ci8D_0UHuZCSmwWqf39zyBDGg/s16000/19.PNG" /></a></div>
<p><b>18)</b> Next, create the edit page in same manner as the add page. The only difference is in the HTTP GET & HTTP POST "Edit" action methods logic. The edit page will look as shown below i.e.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP98g7lIl-_wEudwUF8TlOxZm7WtMFpTACjqRwyZIf-LKUh8fc-ZFPq__joRb_GiQ1YN7rHOiLK9qJLCae5bQrXLmzo-b1k1-gWqQNCrU5rEOZhKOWDZwoOVEfBX8DOcjMDzIpyApB1w2mPQ1nKakh3KNyb6MWrO-E5SRgq_hvCuhnFAZHmNG9BRUzGA/s1774/21.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="846" data-original-width="1774" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP98g7lIl-_wEudwUF8TlOxZm7WtMFpTACjqRwyZIf-LKUh8fc-ZFPq__joRb_GiQ1YN7rHOiLK9qJLCae5bQrXLmzo-b1k1-gWqQNCrU5rEOZhKOWDZwoOVEfBX8DOcjMDzIpyApB1w2mPQ1nKakh3KNyb6MWrO-E5SRgq_hvCuhnFAZHmNG9BRUzGA/s16000/21.PNG" /></a></div>
<p><b>19)</b> Now, in the next step, create the HTTP POST delete action method in the controller with returning json message and business logic. Also create the related JavaScript method within "<i>wwwroot -> js -> script-custom-forms.js</i>" file. The delete popup will look as shown below i.e.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4JyrD45eYG82pq1s-0_k5I5BgkllZeH6bE1dPru_VkJ0jnCCt_LUIHexY60cvz4jfklBsBLyuP10GWx0xApduJK-rwL1vBLuq9mTuFwNhXUyupqz7EsOO8_YzMMIcRGRTUaZAzerSFBZYGEk7i7smBfhSGH78PVs7jj_yTlhFwSJbGf1uXJfDpGjcxg/s1736/26.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="851" data-original-width="1736" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4JyrD45eYG82pq1s-0_k5I5BgkllZeH6bE1dPru_VkJ0jnCCt_LUIHexY60cvz4jfklBsBLyuP10GWx0xApduJK-rwL1vBLuq9mTuFwNhXUyupqz7EsOO8_YzMMIcRGRTUaZAzerSFBZYGEk7i7smBfhSGH78PVs7jj_yTlhFwSJbGf1uXJfDpGjcxg/s16000/26.PNG" /></a></div>
<p><b>20)</b> Now, when you execute your project, you will be able to perform the CRUD operations as page popup style and changes will also be reflected within the SQL server database as well as shown below i.e.</p>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkrz3tmviTmihofz83DfjsvWyFLhm7eeEsP-evGwsSjF_te-92BS3EgsULMe-i1Ph5yKu4BYsKWPkUDKEC2eQwuX7SsE97e_F8nGfD_Pik9MItNDdTaor4Sg3uc9N7lyCaVHDqA8P2F_sW7j9v4JqovN4bha0lKit5R--vfadyZg7jqoldV5PJjtElA/s947/11.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="755" data-original-width="947" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkrz3tmviTmihofz83DfjsvWyFLhm7eeEsP-evGwsSjF_te-92BS3EgsULMe-i1Ph5yKu4BYsKWPkUDKEC2eQwuX7SsE97e_F8nGfD_Pik9MItNDdTaor4Sg3uc9N7lyCaVHDqA8P2F_sW7j9v4JqovN4bha0lKit5R--vfadyZg7jqoldV5PJjtElA/s16000/11.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikb01GbvDkI4XpzgS10t6oy1m2x1Y3xouBts0XaXIEeTJlyn3TtF5iuWCGdJ_c5KUrgyx1596yjgy49Lt6BVpop5G7aZC2_l1o4TcLWr8K__X8Bom2pj6Sb25oJpe5vpEVZ0ckRPXML3_4KaUGb33fF7HEt7GWbWf5n95jye6aeA4iFq8nMqNHpKX-Ug/s1744/14.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="856" data-original-width="1744" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikb01GbvDkI4XpzgS10t6oy1m2x1Y3xouBts0XaXIEeTJlyn3TtF5iuWCGdJ_c5KUrgyx1596yjgy49Lt6BVpop5G7aZC2_l1o4TcLWr8K__X8Bom2pj6Sb25oJpe5vpEVZ0ckRPXML3_4KaUGb33fF7HEt7GWbWf5n95jye6aeA4iFq8nMqNHpKX-Ug/s16000/14.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCB9BMwYmaRQXkqCX81c6BnKJ63c0rSo_6BFpgGsnDgCruYgljpFmPE-POH4jMCpNMylBkwm1yYnYp3Kue2XVdM1kkCGuRENHB6yJUN40rboVTxecgC6oiONZaijrAPMbjHn1ZPbod1jVZ6YrobU95t7avrANKGg9p9LlbwWoWmzmfPwOTw5YSqDv4UA/s1798/15.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="845" data-original-width="1798" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCB9BMwYmaRQXkqCX81c6BnKJ63c0rSo_6BFpgGsnDgCruYgljpFmPE-POH4jMCpNMylBkwm1yYnYp3Kue2XVdM1kkCGuRENHB6yJUN40rboVTxecgC6oiONZaijrAPMbjHn1ZPbod1jVZ6YrobU95t7avrANKGg9p9LlbwWoWmzmfPwOTw5YSqDv4UA/s16000/15.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZ_rZ3Mb-XOjS1-MTSEwhcBkzNw7ycNPVLTzv7ky5BGsmvRXeb2MBAcOqx4A0fpuH1RyC44BNkCDj3dKJpgLr2To3U3Zqa6yYYRRLTakrOhCNAaltkShPJ7BM93Kh1vrH4stpcPUpKeJFZmkTHhz7c8Tbd-dUsPrQqn5fZJvCmOGbj7OtBwPJYLN5wg/s1748/17.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="849" data-original-width="1748" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZ_rZ3Mb-XOjS1-MTSEwhcBkzNw7ycNPVLTzv7ky5BGsmvRXeb2MBAcOqx4A0fpuH1RyC44BNkCDj3dKJpgLr2To3U3Zqa6yYYRRLTakrOhCNAaltkShPJ7BM93Kh1vrH4stpcPUpKeJFZmkTHhz7c8Tbd-dUsPrQqn5fZJvCmOGbj7OtBwPJYLN5wg/s16000/17.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicLKyWKGAJ0d5UDqqTXvgnS6cY-3SKHprj0CJZui_WlYBIGN7b3OcxNeVgw7fuZMbTwFvXPlDT3dXwO5akHaUqbObQrHy008lHsFnQ4DXo7nKh8O3pzIBhJqiHZFc1zSrrsP1tHR9G17qivImlFK974ixnLBjRLEkMJVTq83hgAs3jqr-LX0RF_9I65w/s592/17a.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="436" data-original-width="592" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicLKyWKGAJ0d5UDqqTXvgnS6cY-3SKHprj0CJZui_WlYBIGN7b3OcxNeVgw7fuZMbTwFvXPlDT3dXwO5akHaUqbObQrHy008lHsFnQ4DXo7nKh8O3pzIBhJqiHZFc1zSrrsP1tHR9G17qivImlFK974ixnLBjRLEkMJVTq83hgAs3jqr-LX0RF_9I65w/s16000/17a.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwVziQaTsHVsbEgS7wz3JMEjcMJ725LD3EF3z2v7YybiB62OJJKiiv_yek5hE5KEFYTe_itXzlSS6OpSX295DQAo6K65cU3aGNBNA7UBIp3jFuM17OV_ABiUSL7VkKz4hM7QacwSGCbmcHTptDVJr2ifqP7iGphwY4c3jB4v-yy3MhmKebmUfowtMXUA/s1837/18.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="760" data-original-width="1837" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwVziQaTsHVsbEgS7wz3JMEjcMJ725LD3EF3z2v7YybiB62OJJKiiv_yek5hE5KEFYTe_itXzlSS6OpSX295DQAo6K65cU3aGNBNA7UBIp3jFuM17OV_ABiUSL7VkKz4hM7QacwSGCbmcHTptDVJr2ifqP7iGphwY4c3jB4v-yy3MhmKebmUfowtMXUA/s16000/18.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJBEN1J5ZmT9HpjR8F5mxPRwUmwMbAll_jWQ1r_-mrJE9eNPqUmTWkI2OtdESy06mUa7bhjQDXT8ONWd0QHM84sGIhn_Vka0QR-32oGRj-PqCA4Y1aP-O5FeICqANzFPtycYbzRhFGTg_yqVWtkQxgv29ua7mby5cVvzzt8RlbThZyIn7Z_dRqEmkDcw/s1786/19.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="840" data-original-width="1786" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJBEN1J5ZmT9HpjR8F5mxPRwUmwMbAll_jWQ1r_-mrJE9eNPqUmTWkI2OtdESy06mUa7bhjQDXT8ONWd0QHM84sGIhn_Vka0QR-32oGRj-PqCA4Y1aP-O5FeICqANzFPtycYbzRhFGTg_yqVWtkQxgv29ua7mby5cVvzzt8RlbThZyIn7Z_dRqEmkDcw/s16000/19.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWRoYq34s5BByOUDZrCroxe3B0qPlb75IQP77svHxjwXIvwAYRVvMuwZJWLz2McyKTWR1C_Hc69H7fgcUPv1w3H8LDii3Je-j3Pd4ROaz9Ak7R37WFzEdozOGuKj9mr6YcELwrKa7GNze0KMcd5SbMSIFxvZAUCWfuO8FeFXLx16iRIoBrVJlGEOoRog/s1812/20.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="758" data-original-width="1812" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWRoYq34s5BByOUDZrCroxe3B0qPlb75IQP77svHxjwXIvwAYRVvMuwZJWLz2McyKTWR1C_Hc69H7fgcUPv1w3H8LDii3Je-j3Pd4ROaz9Ak7R37WFzEdozOGuKj9mr6YcELwrKa7GNze0KMcd5SbMSIFxvZAUCWfuO8FeFXLx16iRIoBrVJlGEOoRog/s16000/20.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfkY1MQO62kEC93uhTERONYAGL5ffT3JI50MyXJ2L9iG_ATrJhseKzsyJx4tup6unPOmww0Mh7F1AkDLtJZ7-wMrVHh3-kbECcgmIBjSgCAJFxaRXBLeSi5nwagJS5LzFyNW70QctHvitx41e5Mv2hWX1c8czRgsuR9zENYP2yDfwOZ1Zp2GYG-7OY3g/s1735/22.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="851" data-original-width="1735" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfkY1MQO62kEC93uhTERONYAGL5ffT3JI50MyXJ2L9iG_ATrJhseKzsyJx4tup6unPOmww0Mh7F1AkDLtJZ7-wMrVHh3-kbECcgmIBjSgCAJFxaRXBLeSi5nwagJS5LzFyNW70QctHvitx41e5Mv2hWX1c8czRgsuR9zENYP2yDfwOZ1Zp2GYG-7OY3g/s16000/22.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiray1OW-molyrnXDbzNysWqJWPJJ5H-iG3Ut9SjxGs3wYXKcXAFoRdys084byh1peCnjxUVZeXxAk5f0f6AT3EKEjFyQnvWyWiz4lkKML62JQMZYMuZ98Nl_M9eB8DmSVMgPlssfauIdLYZEEL881MhMu4m_2zsZY2IbIcmqjLG4x36mOc8lsKXQg1ZQ/s1745/23.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="844" data-original-width="1745" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiray1OW-molyrnXDbzNysWqJWPJJ5H-iG3Ut9SjxGs3wYXKcXAFoRdys084byh1peCnjxUVZeXxAk5f0f6AT3EKEjFyQnvWyWiz4lkKML62JQMZYMuZ98Nl_M9eB8DmSVMgPlssfauIdLYZEEL881MhMu4m_2zsZY2IbIcmqjLG4x36mOc8lsKXQg1ZQ/s16000/23.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_MmfHczdlSQ2phwnBzcCx6Ho1Ubb1A0WEuqEKV7xgsng6-T-xi3im5dBjrFyVxSH69detTCk4sXbNQxhWlkVh8D9wBtk4xM0-sILema6tZ50qN5hCdTil0OV6K-_fmIK8kCNs_BJbn9EqMFGokdUu0d6uuVeghSLu2NU5XhI_1qhQTBQAS2foirHKLQ/s1735/24.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="851" data-original-width="1735" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_MmfHczdlSQ2phwnBzcCx6Ho1Ubb1A0WEuqEKV7xgsng6-T-xi3im5dBjrFyVxSH69detTCk4sXbNQxhWlkVh8D9wBtk4xM0-sILema6tZ50qN5hCdTil0OV6K-_fmIK8kCNs_BJbn9EqMFGokdUu0d6uuVeghSLu2NU5XhI_1qhQTBQAS2foirHKLQ/s16000/24.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdm2hkIVHFU99zmqiCmoHQNIDiK41pEL1uPR1Mn3VjZ-heAbmkXe9jXRT6IroyT4frSZ-tUNE7GX5Ftn4co9ocsGkgXNZyQGaGulW7zwRZUwT-P7xB6159eiMhMOtvTRsBBY4RYeIIVPu1ZKkj5lVks60qXitz_SQafRBvQ5BVfQc9J5GubFEILXIojA/s605/24a.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="435" data-original-width="605" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdm2hkIVHFU99zmqiCmoHQNIDiK41pEL1uPR1Mn3VjZ-heAbmkXe9jXRT6IroyT4frSZ-tUNE7GX5Ftn4co9ocsGkgXNZyQGaGulW7zwRZUwT-P7xB6159eiMhMOtvTRsBBY4RYeIIVPu1ZKkj5lVks60qXitz_SQafRBvQ5BVfQc9J5GubFEILXIojA/s16000/24a.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1LFAa_Hc4yvlp413W6jnA69jtrNgiT-0Y9NpLij5o__CpQx1QsBjN3C-8OdRHe-EMr9VZ4HUnri4rs194vy0uwIPY3JWaEx1ewxfATvNr-xOqqqh-CCEDsnbKrN4heebR_4vGPaP6RmuPCkSMmpPydT2IdvF5oIwxCMalUObYulNB9dkiKojH6jUSnQ/s1828/25.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="770" data-original-width="1828" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1LFAa_Hc4yvlp413W6jnA69jtrNgiT-0Y9NpLij5o__CpQx1QsBjN3C-8OdRHe-EMr9VZ4HUnri4rs194vy0uwIPY3JWaEx1ewxfATvNr-xOqqqh-CCEDsnbKrN4heebR_4vGPaP6RmuPCkSMmpPydT2IdvF5oIwxCMalUObYulNB9dkiKojH6jUSnQ/s16000/25.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRKrokT4PfMmUgLF3aJV9q6rzAPTFMH0qA6dxwgcKi_MduAHLdACl2D0rizFUPEuGvbX5J6tHp2YW-gG0t1kzeBK3pWiEcjRPVO2H0aAc00cCGsnvuqSGdmhYG3rT1CKFkLyZHp0dWRyWtrYw_qWzbtkAQWzj8i4oRQK8Ij41j2M5lzzovm3BPEq863g/s1736/26.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="851" data-original-width="1736" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRKrokT4PfMmUgLF3aJV9q6rzAPTFMH0qA6dxwgcKi_MduAHLdACl2D0rizFUPEuGvbX5J6tHp2YW-gG0t1kzeBK3pWiEcjRPVO2H0aAc00cCGsnvuqSGdmhYG3rT1CKFkLyZHp0dWRyWtrYw_qWzbtkAQWzj8i4oRQK8Ij41j2M5lzzovm3BPEq863g/s16000/26.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb1gdbVKwnICfYvNC4xzz9hczkDrEU1wMdIP4RKwQtlKHuGCVC99-SbJuTQKUPt1ObTqP0pryKExBvfM-Y5baPo1m1tv3uwSE1NwqRrDF3Y5YR8z3CTVHdMyQemEbnIFxseeStadSioUS2rfCmhoHbo2qj63KP01cJPryUJhZ2-GL1K8_nC4P2XZL-ag/s1725/27.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="848" data-original-width="1725" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb1gdbVKwnICfYvNC4xzz9hczkDrEU1wMdIP4RKwQtlKHuGCVC99-SbJuTQKUPt1ObTqP0pryKExBvfM-Y5baPo1m1tv3uwSE1NwqRrDF3Y5YR8z3CTVHdMyQemEbnIFxseeStadSioUS2rfCmhoHbo2qj63KP01cJPryUJhZ2-GL1K8_nC4P2XZL-ag/s16000/27.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinYtO9XmQKm2q-89kpGhQadI3QXu_tzO43Lgx7J__2Cc7SG9-x-qOJD1khym16ROrJayHDkNE0heSKJHhDxNsshCCixrvJDOR6n8Pr_UOScvhtC4wo8J0ZJDa3zwJwt-OQwscCovblJI2pub9WuLF7Qw6k8DhNQpIl43KIf-_SsaqwjlEWiQPt6aSwHg/s1724/28.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="853" data-original-width="1724" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinYtO9XmQKm2q-89kpGhQadI3QXu_tzO43Lgx7J__2Cc7SG9-x-qOJD1khym16ROrJayHDkNE0heSKJHhDxNsshCCixrvJDOR6n8Pr_UOScvhtC4wo8J0ZJDa3zwJwt-OQwscCovblJI2pub9WuLF7Qw6k8DhNQpIl43KIf-_SsaqwjlEWiQPt6aSwHg/s16000/28.PNG" /></a></div>
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDyjTMdQU7b8ePAPbRkaBvVZ0tkerDgZDeZFvwwdF4b4ZyfhaKeTOKlG8cZnepfhizuxxnFuauJSGHaHtvQnuAkJw0SeE0AhmUyGvlMt30ZmZB7ohrJ8iHKJiIMEt7UM7kJ6t07K7XYoldq1tuWVM5fXqZ5HVwSClGuhRvxoDwAEMc2B5KkaX-gh9aQA/s594/29.PNG" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="432" data-original-width="594" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDyjTMdQU7b8ePAPbRkaBvVZ0tkerDgZDeZFvwwdF4b4ZyfhaKeTOKlG8cZnepfhizuxxnFuauJSGHaHtvQnuAkJw0SeE0AhmUyGvlMt30ZmZB7ohrJ8iHKJiIMEt7UM7kJ6t07K7XYoldq1tuWVM5fXqZ5HVwSClGuhRvxoDwAEMc2B5KkaX-gh9aQA/s16000/29.PNG" /></a></div>
<p></p>
<h2>
Conclusion</h2>
<p>
In this article, you will learn to integrate Jquery Ddatatables plugin with popup CRUD operations using ASP.NET Core 7 MVC platform. You will learn two methods to auto generate the DbContext file using the "<i>Scaffold-DbContext</i>" command and appsettings.js file. You will also learn about Ajax Form. You will learn to make pages as a popup page using bootstrap5 modals. You will learn to configure the default loader of the jquery datatables plugin. You will also learn to create a dynamic action menu for the jquery datatables plugin customize with dynamic relevant customer ID for each data list entry. You will also learn to create add, edit and view pages as partial popup modal pages. Finally, you will learn to create the delete action as a popup page action.<br /></p>
<p></p>
<h2>Video Demo</h2>
<p></p>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Yp1NSHYyI2M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<br />
</div>
<p></p>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com1tag:blogger.com,1999:blog-558942077583021659.post-32220558196994173922022-11-23T21:36:00.003+05:002023-08-15T03:48:06.289+05:00How to Bind Multiple Dropdown Lists using ASP.NET MVC<div style="text-align: justify;" trbidi="on">Dropdown menu is one of the key User Interface (UI) component on any website when dealing with user selection from a list. A website might have one to multiple independent dropdown menus depending on the business requirements. However, for more sophisticated business requirements, there may be a need to have multiple dropdown menus, whose user selected data population depends on one another. This type of dropdown menus are bound with each other, representing data on one of the dropdown menu depends on the selection of another dropdown menu. The combination of ASP.NET MVC platform with Bootstrap style UI framework provides a rich interactive multiple dropdown menus binding UI component.<br /></div><div dir="ltr" style="text-align: left;" trbidi="on"><br />
<a name='more'></a>
<div style="text-align: justify;">Today, I shall be demonstrating binding of multiple dropdown menus using ASP.NET MVC web platform and bootstrap style UI framework.<br /></div></div><div dir="ltr" style="text-align: left;" trbidi="on"><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://bit.ly/3UZLHf3" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="897" data-original-width="882" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLFTm2paGVBrwCPQhpkyF9jjBPo_sNTtk7pOQuRtDa8OFIkz6Xyl-OoVhoRVLfoWcozQrZUAJC2pqUQqK9Aj8J9mkFMKfmVj9ly-HUgf9qyXd8O_1Fh3ChmP1wi0DeP7dj2JNtgXd6WoTOftTO2qjKNOPGZZkKvOI9yK4jdB5SBFEI-Nw-w--5hYvhbg/w640-h640/1.png" width="640" /></a></div>
<br />
<h3 style="text-align: left;">
<b><br />Prerequisites:</b></h3><div style="text-align: justify;">
Before proceeding any further in this article, following are some of the many prerequisites for this tutorial:<br /></div>
<ol style="text-align: justify;">
<li>Knowledge of ASP.NET MVC. <br /></li>
<li>Knowledge of HTML.</li>
<li>Knowledge of JavaScript.</li>
<li>Knowledge of Bootstrap.</li>
<li>Knowledge of JQuery.</li>
<li>Knowledge of C# Programming.</li>
</ol><div style="text-align: justify;">
The running working source code solution for this tutorial is
being developed in <b><span class="IL_AD" id="IL_AD6">Microsoft Visual</span> Studio 2022 Professional</b>. For the source code click on the download button below.<br /></div></div><div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h3>
<a class="button0" href="https://bit.ly/3UZLHf3"><b>Download Now!</b></a></h3><div style="text-align: justify;" trbidi="on">
Let's begin now.<br /><br /></div>
<div style="text-align: justify;" trbidi="on"><b>1)</b> In the first step, create a new ASP.NET MVC (.NET framework) web project and name it "<b>MVCDropDownMultiBind</b>".</div></div>
<p></p><p><b>2)</b> Create suitable default layout for your project and include relevant JavaScripts and CSS styles libraries references. I am using <a href="https://developer.snapappointments.com/bootstrap-select/">Bootstrap-Select</a> plugin for bootstrap 3.4.1 framework. Download this plugin for much rich interactive dropdown menu experience. </p>
<p><b>3)</b> The data structure of a dropdown menu is value-text type list, where value can be associated with unique identification key (ID) and the text will be the end-user friendly display text. When user selects an item from the dropdown menu, the system will capture the related ID key of that item. For this type of scheme, create a ViewModel for both dropdown menus with ID selection as property. As shown in below lines of code i.e.</p>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
/// <span style="color: #007700;"><summary></span>
/// Select country ID property
/// <span style="color: #007700;"></summary></span>
[Display(Name = "Choose country")]
public int? SelectedCountryId { get; set; }
/// <span style="color: #007700;"><summary></span>
/// Select state ID property
/// <span style="color: #007700;"></summary></span>
[Display(Name = "Choose state")]
public int? SelectedStateId { get; set; }
...
</pre></div>
<div style="text-align: justify;" trbidi="on"> </div>
<div style="text-align: justify;" trbidi="on"><b>4) </b>In your target code file, load dropdown menu lists into ViewBag data properties. My code file is Controllers/HomeController.cs.<b> <br /></b></div><div style="text-align: justify;" trbidi="on"><b> </b></div><div style="text-align: justify;" trbidi="on"><b>5)</b> I am using country list and state list as multiple dropdown menu data bindings. By default, country dropdown menu will contain list of countries and state list will be emptied. When end-user selects any country from the dropdown menu then related state list will be populated within the state dropdown menu. Therefore, to create a bootstrap-select plugin style dropdown menu, incorporate below lines of code into your target page. I have incorporated below lines of code inside the Views/Home/index.cshtml page file i.e.</div>
<div style="text-align: justify;" trbidi="on"> </div>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"row"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"col-xs-4 col-xs-push-2"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"form-group"</span><span style="color: #007700;">></span>
@Html.DropDownListFor(m => m.SelectedCountryId, this.ViewBag.CountryList as SelectList, new { id = "CountryList", @class = "selectCountry show-tick form-control" })
<span style="color: #007700;"></div></span>
<span style="color: #007700;"></div></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"col-xs-4 col-xs-push-2"</span><span style="color: #007700;">></span>
<span style="color: #007700;"><div</span> <span style="color: #0000cc;">class=</span><span style="background-color: #fff0f0;">"form-group"</span><span style="color: #007700;">></span>
@Html.DropDownListFor(m => m.SelectedStateId, this.ViewBag.StateList as SelectList, new { id = "StateList", @class = "selectState show-tick form-control" })
<span style="color: #007700;"></div></span>
<span style="color: #007700;"></div></span>
<span style="color: #007700;"></div></span>
...
</pre></div>
<div dir="ltr" style="text-align: left;" trbidi="on"><br /></div>
<div style="text-align: justify;" trbidi="on"></div>
<div style="text-align: justify;" trbidi="on"><b><b>6)</b> </b>Now to bind the dropdown menus together, the methodology that we are proposing here is adding a change event which needs to be attached to the country dropdown menu. This means that when end-user selection happens or changes that change is captured and base on that selection, the related state list data will be populated within the state dropdown menu. To configure initial setup of the dropdown
menus according to bootstrap-select plugin, you can look into our article <a href="http://bit.ly/2fzMWjE">ASP.NET MVC5: Bootstrap Style Dropdown Plugin</a> to setup a simple bootstrap-select plugin style dropdown menu. Now, create a JavaScript custom script file into your project, name it Scripts/script-bootstrap-select.js and add below lines
of code to create the binding change event for country dropdown menu i.e.</div><div style="text-align: justify;" trbidi="on"><b> </b></div>
<!--HTML generated using hilite.me-->
<div style="background: rgb(255, 255, 255); border-color: gray; border-image: none 100% / 1 / 0 stretch; border-style: solid; border-width: 0.1em 0.1em 0.1em 0.8em; border: medium solid gray; overflow: auto; padding: 0.2em 0.6em; width: auto;">
<pre style="background-color: white; color: black; height: auto; line-height: 125%; margin: 0px; overflow: auto; width: 99%;">...
$(<span style="background-color: #fff0f0;">'.selectCountry'</span>).on(<span style="background-color: #fff0f0;">'change'</span>,
<span style="color: #008800; font-weight: bold;">function</span> ()
{
<span style="color: #888888;">// Initialization</span>
<span style="color: #008800; font-weight: bold;">var</span> countryId <span style="color: #333333;">=</span> $(<span style="background-color: #fff0f0;">'option:selected'</span>, $(<span style="color: #008800; font-weight: bold;">this</span>)).val();
<span style="color: #888888;">// Loading States List.</span>
$.ajax({
url<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">'/Home/GetStates'</span>,
type<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">"GET"</span>,
dataType<span style="color: #333333;">:</span> <span style="background-color: #fff0f0;">"JSON"</span>,
data<span style="color: #333333;">:</span> { countryId<span style="color: #333333;">:</span> countryId },
success<span style="color: #333333;">:</span> <span style="color: #008800; font-weight: bold;">function</span> (result)
{
$(<span style="background-color: #fff0f0;">'#StateList'</span>).html(<span style="background-color: #fff0f0;">""</span>); <span style="color: #888888;">// clear before appending new list</span>
<span style="color: #008800; font-weight: bold;">var</span> items <span style="color: #333333;">=</span> <span style="background-color: #fff0f0;">''</span>;
$.each(result, <span style="color: #008800; font-weight: bold;">function</span> (i, data)
{
$(<span style="background-color: #fff0f0;">'#StateList'</span>).append($(<span style="background-color: #fff0f0;">'<option></option>'</span>).val(data.Value).html(data.Text));
});
<span style="color: #888888;">// Refresh.</span>
$(<span style="background-color: #fff0f0;">'#StateList'</span>).selectpicker(<span style="background-color: #fff0f0;">'refresh'</span>);
}
});
});
...
</pre></div>
<div style="text-align: justify;" trbidi="on"><b> </b></div><div style="text-align: justify;" trbidi="on">In the above<b> </b>code, I am first capturing the country ID from the end-user selection then making an AJAX method call to my back-end server in order to get my related states list and then finally, populate my states dropdown menu accordingly.<b><br /></b></div><p>
<b>7)</b> Now, when you execute your project, you will be able to see multiple dropdown menus bind with each other in action as shown below i.e. <br /></p><div class="separator" style="clear: both; text-align: center;"><a href="https://bit.ly/3UZLHf3" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="547" data-original-width="1025" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vjpYzOCwl8kwMzQ6sn7vEDxNMIPv26HdWZysq0H5e6Mvsk312X7yOj0m66XdOIg-arEyUMifgBw5wRKa5l1q5_pxHFKqy_sfuI0wiIZnF-DcL1Jy4smxYERCwjQWkn0DkyTH7p2b2-sXLGSysBLS-q4HDmKlb9bwEhWjABNwdJkYuvzDhKLGCEXQ3g/w640-h342/2a.PNG" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://bit.ly/3UZLHf3" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="479" data-original-width="1112" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBfYoiKdIckY40SvT3VnVAQUgRIFz67mcX7fh9bWDLL76uKlpDU2aHaQNKzacnvzka7t6MJNqQ2UeX2zF18En-y9upG4NF6UHbW6mZ5zAgrxlE-WcKtGQGo9Wv5SI7laqAHqs_mJ2MD-mlClsZvhpXbi0mOgDKypgJXvAsFSeiApnHn6_UZE1M9dmF1w/w640-h276/2b.PNG" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://bit.ly/3UZLHf3" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="426" data-original-width="1103" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdciINs6-vj1FmhShhz5IqLd_3sti0FI4RJzca0Dew2wVb3ycLpwC0ym22vFy9E3zlaUnD6VwCPoGoo2O-efyTGUGBUSJseGDYCcSNlRs13JziNcEC6CV0-JmH2de2v091OjI1Nps0PMhchQFd0Tefqdof1xOwqOHeyWrN6dgfjht7TnYX48cG02DbEQ/w640-h248/3a.PNG" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://bit.ly/3UZLHf3" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="546" data-original-width="1053" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQKIWuzwm1Z5kyF49__vtwSrS9Ij_dZRo1Nek3NHlLRcKvA3TIb3r25TBrN2wiYiiAJLo7T3LkywJSTvSKk3wGhQn5PFpI2lvvhG5srkeDefFU1TfWVklhIsiSIZRIQPo_KSiY4sVBDsc4GD4gFUmFlqAi-794b-jGAvCvPcc058OHGTKgevbW0oWk8w/w640-h332/3b.PNG" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://bit.ly/3UZLHf3" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="494" data-original-width="1012" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWREQvgkiVKBPdweJRy9YWrmpOF4P08tTHBN3D844wyA80dLBl9jm7toNVSc0mc2paPQp89_c8uKHAsRxiRLiirlpJEyxL-SUh6zFR9b8Y6iEjP0eKKVn51MoMJhS5X8RmHwfSPM21cGxZP955v5eU2bkwjE3CwQZyUYrAvkyZIDXYNtas9YIbd7DZkg/w640-h312/4.PNG" width="640" /></a></div><br /><p style="text-align: justify;"></p><p></p>
<p></p><p>
</p><p>
</p><h2>
Conclusion</h2><div style="text-align: justify;">
In this article, you will learn to bind multiple dropdown menus using ASP.NET MVC platform and Bootstrap UI framework. You will also learn about the methodology that we have proposed to bind two interdependent dropdown menus together by using the JQuery change event. Finally, you will be able to incorporate binding dropdown menus into your own project.<br /></div>
<br/>
<h2>Video Demo</h2>
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/tw5z3MzeHnc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br/>
</div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com3tag:blogger.com,1999:blog-558942077583021659.post-54259828063696818402022-11-16T18:34:00.001+05:002022-11-16T18:34:17.845+05:00Do This To | Build Chatbot Assistant | In 3 Steps | With Any platform <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/fgPRQUIhF0o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br /></div>
Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-64802898498652988522022-11-07T23:41:00.000+05:002022-11-07T23:41:25.268+05:00How to | Install | Linux Subsystem | on Windows 10/11 | WSL<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/K2pC_rl4as8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br /></div>
Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-8948131953281397392022-10-25T15:12:00.005+05:002022-11-30T12:39:04.407+05:00.NET Conf 2022 Pakistan via asmak9/Lahore<div class="separator" style="clear: both; text-align: center;">
<!--
<a href="https://youtu.be/b-uy7y6ntso" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEAepUZZud0z85m8yg8GVZIRzXCsDrlU7a0jHgiqVdVqeo2M33oPhqSOpH4C-LCb8H-2ZGJuFKFr5en-CCRFZWfOM4IRdn5ME8801gXCksQHyKnIHBGcgnCUFhpSHGrxFoebLnDJC08SupSgwTcqCKOBCSNLJkJ9hGpdUbWqD0jRqXYlmlcGcwINyiA/s1600/event_bg.png" /></a>
-->
<a href="https://bit.ly/3TPMy10" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEAepUZZud0z85m8yg8GVZIRzXCsDrlU7a0jHgiqVdVqeo2M33oPhqSOpH4C-LCb8H-2ZGJuFKFr5en-CCRFZWfOM4IRdn5ME8801gXCksQHyKnIHBGcgnCUFhpSHGrxFoebLnDJC08SupSgwTcqCKOBCSNLJkJ9hGpdUbWqD0jRqXYlmlcGcwINyiA/s1600/event_bg.png" /></a>
</div>
<a name='more'></a>
<br />
<a class="button_register_now" href="https://bit.ly/3TPMy10">Register Now</a> <b>OR</b> <a class="button_register_fb" href="https://fb.me/e/rfS7GmRyB">Register via Facebook</a>
<br/> <br/>
<b>OR</b> <a class="button_register_meetup" href="https://bit.ly/3gRTLzg">Register via Meetup</a>
<br />
<br />
<h2 style="text-align: left;">
.NET Conf 2022 Pakistan via asmak9/Lahore</h2><p>Join us live on 30-Nov-2022 at 12:00 PM PKT | 07:00 PM GMT | 03:00 PM EST to Learn insights about new happenings at .NET conference 2022 via #asmak9 #dotNETConf.<br />
</p>
<!--
<br />
<h2 style="text-align: left;">Session Video</h2><ul style="text-align: left;"><li><a href="https://youtu.be/b-uy7y6ntso">The Industrial Metaverse</a><br /></li></ul>
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b-uy7y6ntso" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br /></div>
-->
Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com0tag:blogger.com,1999:blog-558942077583021659.post-29659324517945147502022-10-04T00:21:00.004+05:002022-10-22T01:48:03.219+05:00Microsoft Ignite 2022 After Party hosted by Microsoft Community Pakistan<div class="separator" style="clear: both; text-align: center;"><a href="https://youtu.be/b-uy7y6ntso" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIyLmeagrI3zd2veV-gacQ67OkcKfphI_dc7OjrdD2y0fg74iOqSSIJJh-XdLXGevn8VxhVmGLXQ666yu2taTeovGAvdFQQOShY4m1tSlRot4iemuAzmNpcpJg-0Pdfc3GC_P3HPBWcvlPU-5WKba9E8VGfS7YPQOjkbF-ghdu0fs9z9crEYrA-sEjeQ/s1600/Thumbnail.png" /></a>
<!--
<a href="https://fb.me/e/6HFomIofr" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1920" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgasrAuREcebXVDLUHS3yG5J8qRg2BMTmbsq6EK8MIEZRH6Yn1ub9GDZEjdxK6bXLT6xdX76Ua80AvkAf5sXSMn7RwFRQJLzz-jymZA8jsY8G-rNRd02XItENmtKPCUD3n2BcfiCPnUX_hyz2LFATjJUoJoSYkEKuW6Hta7Ful_t4PcRodltJlKJpPsWA/s1600/event_bg.png" /></a>
-->
</div>
<a name='more'></a>
<!--
<br />
<a class="button_register_now" href="https://fb.me/e/6HFomIofr">Register Now</a>
-->
<br />
<br />
<h2 style="text-align: left;">
Microsoft Ignite 2022 After Party hosted by Microsoft Community Pakistan</h2><p>Join us live on 21-Oct-2022 at 11:00 PM PKT | 06:00 PM GMT | 02:00 PM EST to Learn insights about Microsoft technologies in Microsoft Ignite 2022 after party event.<br />
</p>
<br />
<h2 style="text-align: left;">Session Video</h2><ul style="text-align: left;"><li><a href="https://youtu.be/b-uy7y6ntso">The Industrial Metaverse</a><br /></li></ul>
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/b-uy7y6ntso" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br /></div>
Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com2tag:blogger.com,1999:blog-558942077583021659.post-58566927282133388982022-08-21T19:29:00.000+05:002022-08-21T19:29:13.207+05:00Top iOS and Android Trading Apps to Make Big Investments in Stock Market<p style="text-align: center;"><span style="font-family: inherit;"><span> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaTXnRHZ6mRolInt8lgRBesBdUBrPEp0_lGZm1jg0fD2fin7IkRSBXbpuSH_xW1ss_8KJUp9TraCQslSHB9aIsvf87XFfhyCSsC9Da7VD7As8ne620rKPFbRWyJYl-NavNwAOjbr9rvYqgCI5qqhZIXdUYuwB0I0CTXLpx7uHA4n71c3YbCqAVbh8CuA/s436/THumb.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="436" data-original-width="348" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaTXnRHZ6mRolInt8lgRBesBdUBrPEp0_lGZm1jg0fD2fin7IkRSBXbpuSH_xW1ss_8KJUp9TraCQslSHB9aIsvf87XFfhyCSsC9Da7VD7As8ne620rKPFbRWyJYl-NavNwAOjbr9rvYqgCI5qqhZIXdUYuwB0I0CTXLpx7uHA4n71c3YbCqAVbh8CuA/w510-h640/THumb.jpg" width="510" /></a><br /></span></span></p><span style="font-family: inherit;"><span>
</span></span><p style="text-align: justify;"><span style="font-family: inherit;"><span>For free equity market applications Check out Difference wiki hot book before reading the article. <a href="https://www.difference.wiki/android-vs-ios/">Android vs iOS</a> let you follow prices, receive notifications, manage your portfolio, and invest smarter. The stock market investment is a critical element of the financial management puzzle for everyone.</span></span></p><p><span style="font-family: inherit;"><span>It's a good chance to adapt to the changing environment or maybe get some extra cash. And technology makes it much simpler for anybody to choose to invest online. While taking a plunge into the market could seem like a significant step, particularly for rookie traders, technology has rendered keeping up with individual equities and the markets much simpler.</span></span></p><a name='more'></a><p style="text-align: justify;"><span style="font-family: inherit;"><span>You may quickly follow the market on a mobile device or tablet with the correct applications along with various financial websites. Here are some of the top free stock trading applications that can help you follow people up and off the market.</span></span><span style="font-family: inherit;"><span> <br /></span></span></p><div style="text-align: justify;"><span style="font-family: inherit;"><span>The applications mentioned below are free to install and use, but they all promote subscriptions or in-app fees for enhanced functionality.<br /></span></span></div><div style="text-align: left;"><span style="font-family: inherit;"><span><br /></span></span></div>
<div style="text-align: left;"><h2 style="text-align: left;"><span style="font-family: inherit;"><span>1. Investing.com</span></span></h2></div><div style="text-align: justify;"><span style="font-family: inherit;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGuKg-654hSWr0_Vku5GV2YwvilunLx-nylXS5g41ATxVv0cvGSJHDNTq0_Uiol9DONf109IHKTtyalkXnsf7j70Z5ShazUgqy4p3iK_U2fT2bTpaeyH5Qf9WFGR-u8wUVuHkZKGqX8nyEEgTb3ZYc32lKSE1cpxCbbtE6EbpdFvlZY-7b_tuyH0kkLw/s1942/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1102" data-original-width="1942" height="363" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGuKg-654hSWr0_Vku5GV2YwvilunLx-nylXS5g41ATxVv0cvGSJHDNTq0_Uiol9DONf109IHKTtyalkXnsf7j70Z5ShazUgqy4p3iK_U2fT2bTpaeyH5Qf9WFGR-u8wUVuHkZKGqX8nyEEgTb3ZYc32lKSE1cpxCbbtE6EbpdFvlZY-7b_tuyH0kkLw/w640-h363/1.png" width="640" /></a></div><span> </span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>The Investing.com app is an excellent tool for keeping tabs on stock prices throughout the globe. Live stock quotes and charts are available for over 100,000 equities traded on more than 70 worldwide exchanges with this app. financial data such as bond yields, commodity prices, currency exchange rates, interest rates, futures prices, option prices, and more are all available to you.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>The app's economic calendar, which keeps users abreast of happenings worldwide, is one of its most valuable functions. You may track stocks and other investments, like bonds, in a specialized portfolio that you build and manage yourself. You may then assess the effects on the market and individual equities.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>One of the top stock trading apps is Investing.com. The app's users may set up individualized notifications for particular stock prices, percentage changes, or trading volumes. A news analysis piece or economic event may both have alerts set for them.</span></span></div><div style="text-align: left;"><span style="font-family: inherit;"><span> </span></span></div><div style="text-align: left;">
<h2 style="text-align: left;"><span style="font-family: inherit;"><span>2. Yahoo Finance</span></span></h2><div style="text-align: justify;"><span style="font-family: inherit;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUGonUWBYPXfSH5waf0ZeHtvDGxpdJs20A6q_LfIKNzdWuwEQodeRm_4ap45lbUzOPIyD150YxdQB4syXSVQuBGPHa_UdIMX8lzv57qTOy4ajpCEZiajCD9niTKKWxDVvxkliG4D0KJ_ijnck3nag4_rcnB8XqXOYE5Cksfzo38UY0XNRlkkI4Ldf2Tg/s608/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="552" data-original-width="608" height="582" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUGonUWBYPXfSH5waf0ZeHtvDGxpdJs20A6q_LfIKNzdWuwEQodeRm_4ap45lbUzOPIyD150YxdQB4syXSVQuBGPHa_UdIMX8lzv57qTOy4ajpCEZiajCD9niTKKWxDVvxkliG4D0KJ_ijnck3nag4_rcnB8XqXOYE5Cksfzo38UY0XNRlkkI4Ldf2Tg/w640-h582/2.png" width="640" /></a></div><span> </span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>The Yahoo Finance app is a fantastic market resource, and Yahoo Finance itself is among the most well-known locations online for financial information. Software monitors portfolios and offers real-time stock data.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>These resources provide in-depth equities analysis and even facilitate comparisons between competing investments. Adding stocks to a watch list will allow you to get price updates and customized company news as it becomes available. Observe graphs in their entirety by positioning your mobile device in landscape mode.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>The program monitors the market more than just; it also offers data on commodities, currencies, bonds, stocks, and global markets. It also allows you to track more than a hundred other cryptocurrencies, including Bitcoin, the most popular.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>Conveniently, your stock data may be synchronized across all of your devices. This is a great application for trading stocks online.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><b>Download:</b> Yahoo Finance for iOS | Android (Free, subscription available).</span></span></div><div style="text-align: left;"><span style="font-family: inherit;"><span> </span></span></div><div style="text-align: left;"><h2 style="text-align: left;"><span style="font-family: inherit;"><span>3. Stock twits</span></span></h2><div style="text-align: left;"><span style="font-family: inherit;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg9x907_Ml0k36wvrsrmFLsd4zgKyLXGbsZS9aeseP8NzkoM09T-pmdtQQWmqpxQ9jKmDNcNqqENuLuHppLGeKM42zcmSe49ZqaTi5SVHvpw7efXi2o2ZTOl0obWDMfg3XcfB5amebW6--qJIO3t43kNQ_rmyvNcogKBX2BC0rfGaWcfWjSGp5NanH-w/s1284/3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="822" data-original-width="1284" height="410" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg9x907_Ml0k36wvrsrmFLsd4zgKyLXGbsZS9aeseP8NzkoM09T-pmdtQQWmqpxQ9jKmDNcNqqENuLuHppLGeKM42zcmSe49ZqaTi5SVHvpw7efXi2o2ZTOl0obWDMfg3XcfB5amebW6--qJIO3t43kNQ_rmyvNcogKBX2BC0rfGaWcfWjSGp5NanH-w/w640-h410/3.jpg" width="640" /></a></div><br /><span></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>Stock twits is a fascinating social app that facilitates communication between investors and traders to monitor market trends and stock performance. Investor chat is available on every stock page and a market chat. Stocks generating headlines, experiencing significant price changes, or favoring the market's most influential participants are highlighted in a separate trending list.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>The market highlights, stock lists, and news articles available here are both automatically generated and edited by human editors to help you discover new investing opportunities.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>In addition to a detailed cryptocurrencies section, the app also has a live earnings calendar that lists companies that will soon publish their quarterly or annual financial results.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>Stock twitters may also link their accounts with popular brokerages like Robin Hood, E-Trade, and Fidelity to make trades without leaving the app. Based on Reddit's investor community feedback, these are some of the most OK stock trading applications available.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><b>Download:</b> Stock twits for IOS ~ Android (Free, subscription available).</span></span></div><div style="text-align: left;"><span style="font-family: inherit;"><span> </span></span></div><div style="text-align: left;"><h2 style="text-align: left;"><span style="font-family: inherit;"><span>4. Real Time Stocks Tracker</span></span></h2><div style="text-align: justify;"><span style="font-family: inherit;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf4-KXtyeZx35QFiGqfLOM4qynoPLax2zUHugddfqbCF-TyYJuVNXnX1HANfAcHf2axMkandmqA1_J7nvEu1UGde3s-nh2Icf2IIL93f-djOtydqwL34VMx1e-XQijS7ZWeIniG_eg1o7hV1L3h-_QmPGI2te7oHbe-ny_T9xYcwsBc44GHNPnrUlpuA/s1302/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="822" data-original-width="1302" height="404" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf4-KXtyeZx35QFiGqfLOM4qynoPLax2zUHugddfqbCF-TyYJuVNXnX1HANfAcHf2axMkandmqA1_J7nvEu1UGde3s-nh2Icf2IIL93f-djOtydqwL34VMx1e-XQijS7ZWeIniG_eg1o7hV1L3h-_QmPGI2te7oHbe-ny_T9xYcwsBc44GHNPnrUlpuA/w640-h404/4.png" width="640" /></a></div><span> </span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>Stock twits is an intriguing social software that helps investors and traders connect so that they can keep tabs on market movements and stock prices. A market conversation and an investor chat may be found on each stock page. A second trending list highlights stocks making news, experiencing large price swings, or are the favorites of a market's most influential players.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>Discover fresh investment prospects with the aid of these automatically produced and human-edited market recaps, stock listings, and news pieces.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>The app has an in-depth cryptocurrency section and a real-time earnings calendar detailing when various firms will release their quarterly or yearly financial data.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>If you want to trade stocks without leaving the Stock twits app, you may connect your account with a brokerage like Robin Hood, E-Trade, or Fidelity. Investors on Reddit have ranked the following software as some of the best in the business for trading stocks.</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><b>Download:</b> Real Time Stocks Tracker for iOS | Android (Free, in-app purchases available).</span></span></div><div style="text-align: left;"><span style="font-family: inherit;"><span> </span></span></div><div style="text-align: left;"><h2 style="text-align: left;"><span style="font-family: inherit;"><span>5. My Stocks Portfolio & Widget</span></span></h2><div style="text-align: left;"><span style="font-family: inherit;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdBQV3aD7hY60yKfxJMy-1qqyp6YDJPc8xsqwelCcK09IAykTl4K9XvcaDP8wTV2t0SLr0wO69fbYnu7i-7ETjcd31nTNH0DdHyqC_mT2aswXEIDg3DgfQLdlg9QKkEJZyWxdIsRqU-s7DFRrvZMtjDvIe39m6PnTOzxa5K-l4eGokNHspGJspO78FQQ/s342/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="332" data-original-width="342" height="622" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdBQV3aD7hY60yKfxJMy-1qqyp6YDJPc8xsqwelCcK09IAykTl4K9XvcaDP8wTV2t0SLr0wO69fbYnu7i-7ETjcd31nTNH0DdHyqC_mT2aswXEIDg3DgfQLdlg9QKkEJZyWxdIsRqU-s7DFRrvZMtjDvIe39m6PnTOzxa5K-l4eGokNHspGJspO78FQQ/w640-h622/5.png" width="640" /></a></div><br /><span></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>My Stock Portfolio & Widget is a terrific all-around option to keep track of your stock portfolio. Current stock prices for the US and specific overseas markets are real-time.<br /><br />The software allows you to build an unlimited number of portfolios to help you keep track of all of your investments. After adding your individual stocks, you may analyses annualized gains and keep track of minute fluctuations. Information on the stocks in a certain portfolio may also be seen.<br /><br />A stock's watch list and current holdings may be seen without opening the app. All stock data may be encrypted and protected with a password. The program supports restoring information from a comma-separated values (CSV) file as a backup method.<br /><br /><b>Download:</b> iOS | Android My Stocks Portfolio & Widget (Free, in-app securing available).</span></span></div><div style="text-align: left;"><span style="font-family: inherit;"><span><br /></span></span><h2 style="text-align: left;"><span style="font-family: inherit;"><span>6. Bloomberg</span></span></h2><div style="text-align: left;"><span style="font-family: inherit;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVtR5_m3p1rf-Ad-udJF1nocAV0WOjnr4EoQ0-W7SShCAk_QXAbccAVzY-G0dxDLHUAdoTcnS4A1penKwK0qE3BLws-gW2fEUx_sDCwwMAvx5PZ63GD0-aVYkkZyywfeWPsNiRYXOlXVaFf9eDZgWcnLrCZ5GanBBBM6XPsn9iFuLIV09UKkbtiz7kw/s1742/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="922" data-original-width="1742" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVtR5_m3p1rf-Ad-udJF1nocAV0WOjnr4EoQ0-W7SShCAk_QXAbccAVzY-G0dxDLHUAdoTcnS4A1penKwK0qE3BLws-gW2fEUx_sDCwwMAvx5PZ63GD0-aVYkkZyywfeWPsNiRYXOlXVaFf9eDZgWcnLrCZ5GanBBBM6XPsn9iFuLIV09UKkbtiz7kw/w640-h338/6.png" width="640" /></a></div><br /><span></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>The name Bloomberg is instantly recognizable to those who know about the financial industry. And the same name app is an excellent tool for monitoring stocks and staying up on the latest business news. The many components of a portfolio are as varied as the investors who use them. The application will notify you of changes to your account balance and other economic and financial news.<br /><br />A widget's display includes excerpts from highlighted articles, market statistics, and a synopsis of your watch list’s holdings. The app provides news from the marketplace and other areas to help users better comprehend the global economy and political climate. Listening to Bloomberg Radio is free, but watching Bloomberg TV requires a paid membership. <br /><br /><b>Download:</b> iOS | Android Bloomberg (Free, subscription available).</span></span></div><div style="text-align: left;"><span style="font-family: inherit;"><span><br /></span></span><h2 style="text-align: left;"><span style="font-family: inherit;"><span>7. J Stock</span></span></h2><div style="text-align: left;"><span style="font-family: inherit;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3pVU0_04kKcKVt84LE30J1yU6iEnzhsUvzEXsYZRrMRqxgA9CKRxE5Lvf4wUAFrAez-4Pdx7jm7k6s7ri44m9hxqwtLXn7LZuyUUn1pB7fIwKJ_MT7aGBA2xZfnaOBLqh2EDZvW-mx4F1_os1Q8nKUvFhBIq-1xGexhDWfgkAxC9XBYZl-fTbr1-BWA/s954/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="572" data-original-width="954" height="384" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3pVU0_04kKcKVt84LE30J1yU6iEnzhsUvzEXsYZRrMRqxgA9CKRxE5Lvf4wUAFrAez-4Pdx7jm7k6s7ri44m9hxqwtLXn7LZuyUUn1pB7fIwKJ_MT7aGBA2xZfnaOBLqh2EDZvW-mx4F1_os1Q8nKUvFhBIq-1xGexhDWfgkAxC9XBYZl-fTbr1-BWA/w640-h384/7.png" width="640" /></a></div><br /><span></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>Investors all around the globe who use Android should check out JStock. The program supports stock market data for 28 nations, including the US. The most up-to-date conversion rate shows the national currency in blue while viewing overseas equities.<br /><br />Keeping track of stock dividends and an infinite number of portfolios is a breeze with this software. Watch list stocks, global market data, and purchase portfolios are accessible through widgets. Both dividend and portfolio returns may be examined in further detail thanks to the charts provided.<br /><br /><b>Download:</b> JStock Android mobile (Free, in-app purchases accessible).</span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span><br /></span></span></div><div style="text-align: left;"><span style="font-family: inherit;"><span></span></span></div></div></div></div></div><div style="text-align: left;"><h3 style="text-align: left;"><span style="font-family: inherit;"><span>Easy mobile stock tracking</span></span></h3><div style="text-align: left;"><span style="font-family: inherit;"><span></span></span></div><div style="text-align: justify;"><span style="font-family: inherit;"><span>JStock is an excellent investment app for Android users throughout the world. The program includes stock market data from 28 nations, including the US. According on the most current conversion rate, international equities are represented in blue local currency.<br /><br />Managing dividend payments and an unlimited number of portfolios is a snap with this program. You may look deeper at dividend and portfolio performance using the given charts. With widgets, stocks on your watch list, international market data, and your investment portfolio may all be accessed in one place.</span></span></div><div style="text-align: left;"><span style="font-family: inherit;"><span> </span></span></div><div style="text-align: left;"><h2 style="text-align: left;"><span style="font-family: inherit;"><span>Conclusion </span></span></h2><div style="text-align: justify;"><span style="font-family: inherit;"><span>The Investing.com app tracks global stock prices. This software provides live stock quotations and charts for over 100,000 stocks on 70 global exchanges. Bond yields, commodity prices, currency exchange rates, interest rates, futures prices, and option prices are provided.<br /><br />These tools give detailed equity analysis and investment comparisons. Adding stocks to a watch list lets you obtain price updates and corporate news. In landscape view, you can see whole graphs.<br /><br />The program contains a bitcoin area and a real-time earnings calendar.<br /><br />Without launching the app, you can see a stock's watch list and holdings. Password-protect all stock data. The application supports CSV backups.<br /><br />JStock is for Android investors worldwide. The program assists 28 countries, including the US. The latest conversion rate shows the national currency in blue while viewing foreign stocks.<br /></span></span></div><div style="text-align: left;"><span style="font-family: inherit;"><span><br /></span></span></div></div><div style="text-align: left;"><h3 style="text-align: left;"><span style="font-family: inherit;"><span><u>Author's Bio</u></span></span></h3><div style="text-align: justify;"><span style="font-family: inherit;"><span><u>Adam Vega</u> is a researcher with numerous technical degrees who resides in Ohio. His zeal for new and cutting-edge technologies distinguishes his from his classmates. He is a maestro at writing on a wide variety of themes with meticulously researched and organized information. His presentation abilities and persuasiveness aid his in gaining clients' trust. Aside from the technical aspect, she enjoys traveling and learning about diverse countries and traditions.<br /></span></span></div></div></div></div></div>Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com3tag:blogger.com,1999:blog-558942077583021659.post-60828323987610391152022-08-14T02:58:00.003+05:002022-08-14T02:58:19.510+05:00Copy Files on | Android Emulator Adb | using Visual Studio 2022<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TAVDDB97KTE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br /></div>
Asma's Bloghttp://www.blogger.com/profile/12607929324251304307noreply@blogger.com4