tag:blogger.com,1999:blog-82932868529621702642024-03-13T09:30:44.059-07:00Information SystemsSoftware Development - Code Tips - ASP.NET , Entity Framework - JavaScript - Angular , AngularJS - C# , Information System , AzureMohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comBlogger28125tag:blogger.com,1999:blog-8293286852962170264.post-610922549151256612023-03-19T02:12:00.005-07:002023-03-19T02:13:11.833-07:00Boosting Your Web App's Interactivity with Asp.Net Core 7 SignalR<p> </p><h1 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Boosting Your Web App's Interactivity with Asp.Net Core 7 SignalR</h1><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><br style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 700px;" /></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><img src="https://img.freepik.com/free-vector/gamification-interactive-game-application-online-landing-page_107791-6001.jpg?w=2000" style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; display: inline-block; height: auto; margin-left: auto; margin-right: auto; max-width: 100%; vertical-align: middle;" /></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><br /></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><br style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 700px;" /></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">In today's digital age, user engagement is more important than ever. As businesses strive to create a seamless and interactive experience for their customers, web applications have become a crucial tool. However, simply having a web app is not enough. To truly stand out in a crowded online marketplace, it's essential to boost its interactivity. That's where Asp.Net Core 7 SignalR comes in. By integrating this powerful framework into your web app, you can take your user engagement to the next level. From real-time updates and notifications to chat functionality and more, SignalR makes it easy to create an immersive user experience that keeps your visitors coming back for more. In this article, we'll explore the benefits of Asp.Net Core 7 SignalR and how you can use it to boost your web app's interactivity. So, whether you're a seasoned developer or just starting out, let's dive in and discover how SignalR can take your web app to the next level.</p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><br style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 700px;" /></p><h2 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Benefits of using SignalR for web app interactivity</h2><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">SignalR is a real-time communication framework that enables bi-directional communication between client and server. Its key feature is that it allows you to push data from the server to the client as soon as it's available, without the need for the client to request it. This opens up a world of possibilities for web app interactivity. Here are just a few of the benefits of using SignalR:</p><h3 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-weight: inherit; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Real-time updates and notifications</h3><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">One of the most powerful features of SignalR is the ability to push real-time updates to the client. This means that you can instantly update the UI in response to changes on the server, without the need for the user to refresh the page. This is perfect for applications that require real-time updates, such as stock tickers, sports scores, or chat apps.</p><h3 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-weight: inherit; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Chat functionality</h3><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">SignalR makes it easy to implement chat functionality in your web app. With SignalR, you can create a real-time chat application that allows users to communicate with each other instantly. This is perfect for social networking sites or any application that requires real-time communication between users.</p><h3 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-weight: inherit; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Improved user engagement</h3><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">By providing real-time updates and notifications, SignalR can significantly improve user engagement. Users are more likely to stay on your site if they feel that they are getting the latest information in real-time. This can lead to increased user satisfaction, repeat visits, and ultimately, increased revenue.</p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><br style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 700px;" /></p><h2 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">How SignalR works</h2><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">At its core, SignalR is a .NET library that provides server-side and client-side APIs for real-time communication. The server-side API is responsible for handling connections, managing groups of clients, and pushing messages to the clients. The client-side API is responsible for connecting to the server, receiving messages, and updating the UI in response to those messages.</p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">SignalR uses several transport protocols to establish a connection between the client and server. These include WebSockets, Server-Sent Events (SSE), Long Polling, and Forever Frame. The transport protocol used depends on the capabilities of the client and server, and the network conditions.</p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><br style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 700px;" /></p><h2 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Setting up SignalR in your Asp.Net Core 7 project</h2><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Setting up SignalR in your Asp.Net Core 7 project is simple. Here's how to do it:</p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 16px; list-style: none; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px 0px 0px 1.5em; white-space: pre-wrap;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Install the SignalR package using NuGet.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Add the SignalR middleware to your app's request pipeline.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Create a SignalR hub by inheriting from the Hub class.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Add methods to the hub that will be called by clients.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Call client methods from the server.</li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><br style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 700px;" /></p><h2 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Implementing real-time communication with SignalR</h2><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Implementing real-time communication with SignalR is straightforward. Here's an example of how to send a message from the server to the client:</p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 16px; list-style: none; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px 0px 0px 1.5em; white-space: pre-wrap;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Create a hub method that sends a message to clients.</li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: #f0f0f0; border-radius: 3px; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 15.3px; margin-left: auto; margin-right: auto; max-width: 700px; padding: 2px 4px;">csharp public async Task SendMessage(string user, string message) { await Clients.All.SendAsync("ReceiveMessage", user, message); }</code> 2. Call the hub method from the client.</p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: #f0f0f0; border-radius: 3px; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 15.3px; margin-left: auto; margin-right: auto; max-width: 700px; padding: 2px 4px;">javascript connection.on("ReceiveMessage", function (user, message) { // Update the UI with the message });</code></p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 16px; list-style: none; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px 0px 0px 1.5em; white-space: pre-wrap;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Call the server method from the client.</li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: #f0f0f0; border-radius: 3px; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 15.3px; margin-left: auto; margin-right: auto; max-width: 700px; padding: 2px 4px;">javascript connection.invoke("SendMessage", user, message);</code></p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><br style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 700px;" /></p><h2 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">SignalR hub and client-side code</h2><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">A SignalR hub is a class that acts as a high-level pipeline between the server and the client. The hub contains methods that can be called by clients and methods that can be called by the server. When a client connects to the hub, SignalR automatically generates a JavaScript proxy that can be used to call the hub's server-side methods.</p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">To call a server-side method from the client, you can use the <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: #f0f0f0; border-radius: 3px; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 15.3px; margin-left: auto; margin-right: auto; max-width: 700px; padding: 2px 4px;">invoke</code> method on the connection object. To call a client-side method from the server, you can use the <code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: #f0f0f0; border-radius: 3px; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 15.3px; margin-left: auto; margin-right: auto; max-width: 700px; padding: 2px 4px;">Clients</code> property on the hub object.</p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><br style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 700px;" /></p><h2 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Broadcasting messages with SignalR</h2><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">SignalR makes it easy to broadcast messages to groups of clients. Here's an example of how to send a message to a specific group of clients:</p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 16px; list-style: none; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px 0px 0px 1.5em; white-space: pre-wrap;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Create a group.</li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: #f0f0f0; border-radius: 3px; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 15.3px; margin-left: auto; margin-right: auto; max-width: 700px; padding: 2px 4px;">csharp public async Task AddToGroup(string groupName) { await Groups.AddToGroupAsync(Context.ConnectionId, groupName); }</code></p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 16px; list-style: none; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px 0px 0px 1.5em; white-space: pre-wrap;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Send a message to the group.</li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><code style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: #f0f0f0; border-radius: 3px; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 15.3px; margin-left: auto; margin-right: auto; max-width: 700px; padding: 2px 4px;">csharp public async Task SendMessageToGroup(string groupName, string message) { await Clients.Group(groupName).SendAsync("ReceiveMessage", message); }</code></p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 16px; list-style: none; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px 0px 0px 1.5em; white-space: pre-wrap;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Call the group method from the client.</li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">```javascript connection.invoke("AddToGroup", groupName).catch(function (err) { return console.error(err.toString()); });</p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">connection.on("ReceiveMessage", function (message) { // Update the UI with the message }); ```</p><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><br style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 700px;" /></p><h2 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Scaling your SignalR application</h2><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">As your SignalR application grows, you may need to scale it to handle more clients and messages. Here are a few tips for scaling your SignalR application:</p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 16px; list-style: none; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px 0px 0px 1.5em; white-space: pre-wrap;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Use a load balancer to distribute traffic across multiple servers.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Use a distributed cache to store connection information and messages.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Use a message broker such as RabbitMQ or Azure Service Bus to handle large volumes of messages.</li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><br style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 700px;" /></p><h2 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Debugging and troubleshooting SignalR issues</h2><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Debugging and troubleshooting SignalR issues can be challenging. Here are a few tips for troubleshooting common issues:</p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 16px; list-style: none; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px 0px 0px 1.5em; white-space: pre-wrap;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Use the SignalR diagnostics page to view detailed information about connections, messages, and errors.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Use browser developer tools to inspect network traffic and debug client-side code.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Use logging to track server-side events and errors.</li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><br style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 700px;" /></p><h2 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Best practices for SignalR development</h2><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Here are a few best practices for SignalR development:</p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 16px; list-style: none; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px 0px 0px 1.5em; white-space: pre-wrap;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Keep messages small to reduce network traffic.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Use authentication and authorization to secure your SignalR application.</li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-increment: list-0 1; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; font-size: 18px; list-style-type: none; margin-left: auto; margin-right: auto; max-width: 700px; padding-left: 1.5em;">Use a message schema to ensure compatibility between different versions of your application.</li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;"><br style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 700px;" /></p><h2 style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">Conclusion</h2><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 #0000; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; background-color: white; border: 0px solid rgb(229, 231, 235); box-sizing: border-box; counter-reset: list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0; cursor: text; font-family: Inter, sans-serif; font-size: 18px; margin-bottom: 0px; margin-left: auto !important; margin-right: auto !important; margin-top: 0px; margin: 0px auto; max-width: 700px; padding: 0px; white-space: pre-wrap;">In conclusion, Asp.Net Core 7 SignalR is a powerful framework for boosting your web app's interactivity. By providing real-time updates and notifications, chat functionality, and improved user engagement, SignalR can help you create a more immersive user experience that keeps visitors coming back for more. With easy setup, straightforward implementation, and the ability to scale as your app grows, SignalR is a must-have tool for any web app developer. By following best practices and troubleshooting common issues, you can ensure that your SignalR application is secure, efficient, and provides the best possible user experience. So why wait? Start exploring the power of SignalR today and take your web app to the next level!</p>Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-1077684510203872512023-02-19T04:03:00.002-08:002023-02-23T21:16:33.432-08:00Simplify Your Data Synchronization Process with Dapper and Bulk Insert in ASP.NET<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7133854016810018"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-7133854016810018"
data-ad-slot="5700254903"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<style>
hr {
border-top-width: 1px;
color: inherit;
height: 0
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit
}
a {
color: inherit;
text-decoration: inherit
}
b,
strong {
font-weight: bolder
}
code,
kbd,
pre,
samp {
font-family: Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
table {
border-collapse: collapse;
border-color: inherit;
text-indent: 0
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font-family: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
margin: 0;
padding: 0
}
button,
select {
text-transform: none
}
[type=button],
[type=reset],
[type=submit],
button {
-webkit-appearance: button;
background-color: transparent;
background-image: none
}
:-moz-focusring {
outline: auto
}
:-moz-ui-invalid {
box-shadow: none
}
progress {
vertical-align: baseline
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
summary {
display: list-item
}
blockquote,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
margin: 0
}
fieldset,
legend {
padding: 0
}
menu,
ol,
ul {
list-style: none;
margin: 0;
padding: 0
}
textarea {
resize: vertical
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #acacbe
}
input::placeholder,
textarea::placeholder {
color: #acacbe
}
[role=button],
button {
cursor: pointer
}
:disabled {
cursor: default
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
display: block;
vertical-align: middle
}
img,
video {
height: auto;
max-width: 100%
}
[multiple],
[type=date],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
select,
textarea {
--tw-shadow: 0 0 transparent;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
border-color: #8e8ea0;
border-radius: 0;
border-width: 1px;
font-size: 1rem;
line-height: 1.5rem;
padding: .5rem .75rem
}
[multiple]:focus,
[type=date]:focus,
[type=datetime-local]:focus,
[type=email]:focus,
[type=month]:focus,
[type=number]:focus,
[type=password]:focus,
[type=search]:focus,
[type=tel]:focus,
[type=text]:focus,
[type=time]:focus,
[type=url]:focus,
[type=week]:focus,
select:focus,
textarea:focus {
--tw-ring-inset: var(--tw-empty,
/*!*/
/*!*/
);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
border-color: #2563eb;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
outline: 2px solid transparent;
outline-offset: 2px
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #8e8ea0;
opacity: 1
}
input::placeholder,
textarea::placeholder {
color: #8e8ea0;
opacity: 1
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0
}
::-webkit-date-and-time-value {
min-height: 1.5em
}
::-webkit-datetime-edit,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-meridiem-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-year-field {
padding-bottom: 0;
padding-top: 0
}
[multiple] {
background-image: none;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
background-size: initial;
padding-right: .75rem;
-webkit-print-color-adjust: inherit;
print-color-adjust: inherit
}
[type=checkbox],
[type=radio] {
--tw-shadow: 0 0 transparent;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-origin: border-box;
border-color: #8e8ea0;
border-width: 1px;
color: #2563eb;
display: inline-block;
flex-shrink: 0;
height: 1rem;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
-webkit-user-select: none;
user-select: none;
vertical-align: middle;
width: 1rem
}
[type=checkbox] {
border-radius: 0
}
[type=radio] {
border-radius: 100%
}
[type=checkbox]:focus,
[type=radio]:focus {
--tw-ring-inset: var(--tw-empty,
/*!*/
/*!*/
);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
outline: 2px solid transparent;
outline-offset: 2px
}
[type=checkbox]:checked,
[type=radio]:checked {
background-color: currentColor;
background-position: 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent
}
[type=checkbox]:checked {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")
}
[type=radio]:checked {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")
}
[type=checkbox]:checked:focus,
[type=checkbox]:checked:hover,
[type=radio]:checked:focus,
[type=radio]:checked:hover {
background-color: currentColor;
border-color: transparent
}
[type=checkbox]:indeterminate {
background-color: currentColor;
background-position: 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent
}
[type=checkbox]:indeterminate:focus,
[type=checkbox]:indeterminate:hover {
background-color: currentColor;
border-color: transparent
}
[type=file] {
background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
background: initial;
border-color: inherit;
border-radius: 0;
border-width: 0;
font-size: inherit;
line-height: inherit;
padding: 0
}
[type=file]:focus {
outline: 1px solid ButtonText;
outline: 1px auto -webkit-focus-ring-color
}
h1 {
font-size: 1.875rem;
line-height: 2.25rem
}
h1,
h2,
h3 {
font-weight: 600
}
h2,
h3 {
font-size: 1.5rem;
line-height: 2rem
}
*,
:after,
:before {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, .5);
--tw-ring-offset-shadow: 0 0 transparent;
--tw-ring-shadow: 0 0 transparent;
--tw-shadow: 0 0 transparent;
--tw-shadow-colored: 0 0 transparent;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia:
}
::-webkit-backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, .5);
--tw-ring-offset-shadow: 0 0 transparent;
--tw-ring-shadow: 0 0 transparent;
--tw-shadow: 0 0 transparent;
--tw-shadow-colored: 0 0 transparent;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia:
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, .5);
--tw-ring-offset-shadow: 0 0 transparent;
--tw-ring-shadow: 0 0 transparent;
--tw-shadow: 0 0 transparent;
--tw-shadow-colored: 0 0 transparent;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia:
}
.prose {
color: var(--tw-prose-body);
max-width: 65ch
}
.prose :where([class~=lead]):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-bottom: 1.2em;
margin-top: 1.2em
}
.prose :where(a):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-links);
font-weight: 500;
text-decoration: underline
}
.prose :where(strong):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-bold);
font-weight: 600
}
.prose :where(a strong):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(blockquote strong):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(thead th strong):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(ol):not(:where([class~=not-prose] *)) {
list-style-type: decimal;
margin-bottom: 1.25em;
margin-top: 1.25em;
padding-left: 1.625em
}
.prose :where(ol[type=A]):not(:where([class~=not-prose] *)) {
list-style-type: upper-alpha
}
.prose :where(ol[type=a]):not(:where([class~=not-prose] *)) {
list-style-type: lower-alpha
}
.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)) {
list-style-type: upper-alpha
}
.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)) {
list-style-type: lower-alpha
}
.prose :where(ol[type=I]):not(:where([class~=not-prose] *)) {
list-style-type: upper-roman
}
.prose :where(ol[type=i]):not(:where([class~=not-prose] *)) {
list-style-type: lower-roman
}
.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)) {
list-style-type: upper-roman
}
.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)) {
list-style-type: lower-roman
}
.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)) {
list-style-type: decimal
}
.prose :where(ul):not(:where([class~=not-prose] *)) {
list-style-type: disc;
margin-bottom: 1.25em;
margin-top: 1.25em;
padding-left: 1.625em
}
.prose :where(ol>li):not(:where([class~=not-prose] *))::marker {
color: var(--tw-prose-counters);
font-weight: 400
}
.prose :where(ul>li):not(:where([class~=not-prose] *))::marker {
color: var(--tw-prose-bullets)
}
.prose :where(hr):not(:where([class~=not-prose] *)) {
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-bottom: 3em;
margin-top: 3em
}
.prose :where(blockquote):not(:where([class~=not-prose] *)) {
border-left-color: var(--tw-prose-quote-borders);
border-left-width: .25rem;
color: var(--tw-prose-quotes);
font-style: italic;
font-style: normal;
font-weight: 500;
margin-bottom: 1.6em;
margin-top: 1.6em;
padding-left: 1em;
quotes: "\201C" "\201D" "\2018" "\2019"
}
.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose] *)):before {
content: open-quote
}
.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose] *)):after {
content: close-quote
}
.prose :where(h1):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-size: 2.25em;
font-weight: 800;
line-height: 1.1111111;
margin-bottom: .8888889em;
margin-top: 0
}
.prose :where(h1 strong):not(:where([class~=not-prose] *)) {
color: inherit;
font-weight: 900
}
.prose :where(h2):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-size: 1.5em;
font-weight: 700;
line-height: 1.3333333;
margin-bottom: 1em;
margin-top: 2em
}
.prose :where(h2 strong):not(:where([class~=not-prose] *)) {
color: inherit;
font-weight: 800
}
.prose :where(h3):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-size: 1.25em;
font-weight: 600;
line-height: 1.6;
margin-bottom: .6em;
margin-top: 1.6em
}
.prose :where(h3 strong):not(:where([class~=not-prose] *)) {
color: inherit;
font-weight: 700
}
.prose :where(h4):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
line-height: 1.5;
margin-bottom: .5em;
margin-top: 1.5em
}
.prose :where(h4 strong):not(:where([class~=not-prose] *)) {
color: inherit;
font-weight: 700
}
.prose :where(img):not(:where([class~=not-prose] *)) {
margin-bottom: 2em;
margin-top: 2em
}
.prose :where(figure>*):not(:where([class~=not-prose] *)) {
margin-bottom: 0;
margin-top: 0
}
.prose :where(figcaption):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-captions);
font-size: .875em;
line-height: 1.4285714;
margin-top: .8571429em
}
.prose :where(code):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-code);
font-size: .875em;
font-weight: 600
}
.prose :where(code):not(:where([class~=not-prose] *)):before {
content: "`"
}
.prose :where(code):not(:where([class~=not-prose] *)):after {
content: "`"
}
.prose :where(a code):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(h1 code):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(h2 code):not(:where([class~=not-prose] *)) {
color: inherit;
font-size: .875em
}
.prose :where(h3 code):not(:where([class~=not-prose] *)) {
color: inherit;
font-size: .9em
}
.prose :where(h4 code):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(blockquote code):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(thead th code):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(pre):not(:where([class~=not-prose] *)) {
background-color: transparent;
border-radius: .375rem;
color: currentColor;
font-size: .875em;
font-weight: 400;
line-height: 1.7142857;
margin: 0;
overflow-x: auto;
padding: 0
}
.prose :where(pre code):not(:where([class~=not-prose] *)) {
background-color: transparent;
border-radius: 0;
border-width: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
padding: 0
}
.prose :where(pre code):not(:where([class~=not-prose] *)):before {
content: none
}
.prose :where(pre code):not(:where([class~=not-prose] *)):after {
content: none
}
.prose :where(table):not(:where([class~=not-prose] *)) {
font-size: .875em;
line-height: 1.7142857;
margin-bottom: 2em;
margin-top: 2em;
table-layout: auto;
text-align: left;
width: 100%
}
.prose :where(thead):not(:where([class~=not-prose] *)) {
border-bottom-color: var(--tw-prose-th-borders);
border-bottom-width: 1px
}
.prose :where(thead th):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
padding-bottom: .5714286em;
padding-left: .5714286em;
padding-right: .5714286em;
vertical-align: bottom
}
.prose :where(tbody tr):not(:where([class~=not-prose] *)) {
border-bottom-color: var(--tw-prose-td-borders);
border-bottom-width: 1px
}
.prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)) {
border-bottom-width: 0
}
.prose :where(tbody td):not(:where([class~=not-prose] *)) {
vertical-align: baseline
}
.prose :where(tfoot):not(:where([class~=not-prose] *)) {
border-top-color: var(--tw-prose-th-borders);
border-top-width: 1px
}
.prose :where(tfoot td):not(:where([class~=not-prose] *)) {
vertical-align: top
}
.prose {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;
--tw-prose-hr: #e5e7eb;
--tw-prose-quotes: #111827;
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-body: #d1d5db;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #9ca3af;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #9ca3af;
--tw-prose-invert-bullets: #4b5563;
--tw-prose-invert-hr: #374151;
--tw-prose-invert-quotes: #f3f4f6;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgba(0, 0, 0, .5);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
font-size: 1rem;
line-height: 1.75
}
.prose :where(p):not(:where([class~=not-prose] *)) {
margin-bottom: 1.25em;
margin-top: 1.25em
}
.prose :where(video):not(:where([class~=not-prose] *)) {
margin-bottom: 2em;
margin-top: 2em
}
.prose :where(figure):not(:where([class~=not-prose] *)) {
margin-bottom: 2em;
margin-top: 2em
}
.prose :where(li):not(:where([class~=not-prose] *)) {
margin-bottom: .5em;
margin-top: .5em
}
.prose :where(ol>li):not(:where([class~=not-prose] *)) {
padding-left: .375em
}
.prose :where(ul>li):not(:where([class~=not-prose] *)) {
padding-left: .375em
}
.prose :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
margin-bottom: .75em;
margin-top: .75em
}
.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.25em
}
.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.25em
}
.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=not-prose] *)) {
margin-bottom: .75em;
margin-top: .75em
}
.prose :where(hr+*):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h2+*):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h3+*):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h4+*):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose :where(thead th:first-child):not(:where([class~=not-prose] *)) {
padding-left: 0
}
.prose :where(thead th:last-child):not(:where([class~=not-prose] *)) {
padding-right: 0
}
.prose :where(tbody td, tfoot td):not(:where([class~=not-prose] *)) {
padding: .5714286em
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=not-prose] *)) {
padding-left: 0
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=not-prose] *)) {
padding-right: 0
}
.prose :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 0
}
.prose-sm :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
margin-bottom: .5714286em;
margin-top: .5714286em
}
.prose-sm :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.1428571em
}
.prose-sm :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.1428571em
}
.prose-sm :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.1428571em
}
.prose-sm :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.1428571em
}
.prose-sm :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose-sm :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 0
}
.prose-base :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
margin-bottom: .75em;
margin-top: .75em
}
.prose-base :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.25em
}
.prose-base :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose-base :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.25em
}
.prose-base :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose-base :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose-base :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 0
}
.prose-lg :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
margin-bottom: .8888889em;
margin-top: .8888889em
}
.prose-lg :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.3333333em
}
.prose-lg :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.3333333em
}
.prose-lg :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.3333333em
}
.prose-lg :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.3333333em
}
.prose-lg :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose-lg :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 0
}
.prose-xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
margin-bottom: .8em;
margin-top: .8em
}
.prose-xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.2em
}
.prose-xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.2em
}
.prose-xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.2em
}
.prose-xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.2em
}
.prose-xl :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose-xl :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 0
}
.prose-2xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
margin-bottom: .8333333em;
margin-top: .8333333em
}
.prose-2xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.3333333em
}
.prose-2xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.3333333em
}
.prose-2xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.3333333em
}
.prose-2xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.3333333em
}
.prose-2xl :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose-2xl :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 0
}
.form-input,
.form-multiselect,
.form-select,
.form-textarea {
--tw-shadow: 0 0 transparent;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
border-color: #8e8ea0;
border-radius: 0;
border-width: 1px;
font-size: 1rem;
line-height: 1.5rem;
padding: .5rem .75rem
}
.form-input:focus,
.form-multiselect:focus,
.form-select:focus,
.form-textarea:focus {
--tw-ring-inset: var(--tw-empty,
/*!*/
/*!*/
);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
border-color: #2563eb;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
outline: 2px solid transparent;
outline-offset: 2px
}
.form-input::-webkit-input-placeholder,
.form-textarea::-webkit-input-placeholder {
color: #8e8ea0;
opacity: 1
}
.form-input::placeholder,
.form-textarea::placeholder {
color: #8e8ea0;
opacity: 1
}
.form-input::-webkit-datetime-edit-fields-wrapper {
padding: 0
}
.form-input::-webkit-date-and-time-value {
min-height: 1.5em
}
.form-input::-webkit-datetime-edit,
.form-input::-webkit-datetime-edit-day-field,
.form-input::-webkit-datetime-edit-hour-field,
.form-input::-webkit-datetime-edit-meridiem-field,
.form-input::-webkit-datetime-edit-millisecond-field,
.form-input::-webkit-datetime-edit-minute-field,
.form-input::-webkit-datetime-edit-month-field,
.form-input::-webkit-datetime-edit-second-field,
.form-input::-webkit-datetime-edit-year-field {
padding-bottom: 0;
padding-top: 0
}
.btn {
align-items: center;
border-color: transparent;
border-radius: .25rem;
border-width: 1px;
display: inline-flex;
font-size: .875rem;
line-height: 1.25rem;
padding: .5rem .75rem;
pointer-events: auto
}
.btn:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.btn:disabled {
cursor: not-allowed;
opacity: .5
}
.btn-primary {
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(16, 163, 127, var(--tw-bg-opacity));
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.btn-primary:hover {
--tw-bg-opacity: 1;
background-color: rgba(26, 127, 100, var(--tw-bg-opacity))
}
.btn-primary:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-offset-width: 2px;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.btn-primary.focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(25, 195, 125, var(--tw-ring-opacity))
}
.btn-primary:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(25, 195, 125, var(--tw-ring-opacity))
}
.btn-primary:disabled:hover {
--tw-bg-opacity: 1;
background-color: rgba(16, 163, 127, var(--tw-bg-opacity))
}
.btn-secondary {
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(224, 231, 255, var(--tw-bg-opacity));
color: rgba(67, 56, 202, var(--tw-text-opacity));
font-size: .875rem;
line-height: 1.25rem
}
.btn-secondary:hover {
--tw-bg-opacity: 1;
background-color: rgba(199, 210, 254, var(--tw-bg-opacity))
}
.btn-secondary:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-offset-width: 2px;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.btn-secondary.focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity))
}
.btn-secondary:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity))
}
.btn-neutral {
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
border-color: rgba(0, 0, 0, .1);
border-width: 1px;
color: rgba(64, 65, 79, var(--tw-text-opacity));
font-size: .875rem;
line-height: 1.25rem
}
.btn-neutral:hover {
--tw-bg-opacity: 1;
background-color: rgba(236, 236, 241, var(--tw-bg-opacity))
}
.btn-neutral:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-offset-width: 2px;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.btn-neutral.focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity))
}
.btn-neutral:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity))
}
.dark .btn-neutral {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
border-color: rgba(86, 88, 105, var(--tw-border-opacity));
color: rgba(217, 217, 227, var(--tw-text-opacity))
}
.dark .btn-neutral:hover {
--tw-bg-opacity: 1;
background-color: rgba(64, 65, 79, var(--tw-bg-opacity))
}
.btn-dark {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
border-color: rgba(86, 88, 105, var(--tw-border-opacity));
border-width: 1px;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.btn-dark:hover {
--tw-bg-opacity: 1;
background-color: rgba(64, 65, 79, var(--tw-bg-opacity))
}
.btn-small {
padding: .25rem .5rem
}
.sr-only {
clip: rect(0, 0, 0, 0);
border-width: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px
}
.pointer-events-none {
pointer-events: none
}
.pointer-events-auto {
pointer-events: auto
}
.visible {
visibility: visible
}
.invisible {
visibility: hidden
}
.static {
position: static
}
.fixed {
position: fixed
}
.absolute {
position: absolute
}
.relative {
position: relative
}
.sticky {
position: -webkit-sticky;
position: sticky
}
.\!sticky {
position: -webkit-sticky !important;
position: sticky !important
}
.inset-0 {
left: 0;
right: 0
}
.inset-0,
.inset-y-0 {
bottom: 0;
top: 0
}
.top-2 {
top: .5rem
}
.left-4 {
left: 1rem
}
.top-4 {
top: 1rem
}
.right-0 {
right: 0
}
.top-1\/2 {
top: 50%
}
.top-\[20px\] {
top: 20px
}
.top-0 {
top: 0
}
.bottom-0 {
bottom: 0
}
.left-0 {
left: 0
}
.right-4 {
right: 1rem
}
.right-1 {
right: .25rem
}
.left-1\/2 {
left: 50%
}
.bottom-1\.5 {
bottom: .375rem
}
.bottom-1 {
bottom: .25rem
}
.top-6 {
top: 1.5rem
}
.left-2 {
left: .5rem
}
.top-8 {
top: 2rem
}
.left-full {
left: 100%
}
.right-6 {
right: 1.5rem
}
.bottom-\[124px\] {
bottom: 124px
}
.top-1\.5 {
top: .375rem
}
.top-1 {
top: .25rem
}
.-bottom-1\.5 {
bottom: -.375rem
}
.-bottom-1 {
bottom: -.25rem
}
.z-10 {
z-index: 10
}
.z-50 {
z-index: 50
}
.z-40 {
z-index: 40
}
.z-20 {
z-index: 20
}
.-z-10 {
z-index: -10
}
.z-0 {
z-index: 0
}
.z-\[2\] {
z-index: 2
}
.z-\[60\] {
z-index: 60
}
.order-1 {
order: 1
}
.order-2 {
order: 2
}
.col-span-1 {
grid-column: span 1/span 1
}
.col-span-3 {
grid-column: span 3/span 3
}
.float-left {
float: left
}
.m-6 {
margin: 1.5rem
}
.m-auto {
margin: auto
}
.m-0 {
margin: 0
}
.m-1 {
margin: .25rem
}
.m-2 {
margin: .5rem
}
.mx-auto {
margin-left: auto;
margin-right: auto
}
.mx-1 {
margin-left: .25rem;
margin-right: .25rem
}
.\!my-0 {
margin-bottom: 0 !important;
margin-top: 0 !important
}
.mx-2 {
margin-left: .5rem;
margin-right: .5rem
}
.my-4 {
margin-bottom: 1rem;
margin-top: 1rem
}
.my-2 {
margin-bottom: .5rem;
margin-top: .5rem
}
.my-1 {
margin-bottom: .25rem;
margin-top: .25rem
}
.mx-3 {
margin-left: .75rem;
margin-right: .75rem
}
.mr-2 {
margin-right: .5rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-2 {
margin-bottom: .5rem
}
.mb-5 {
margin-bottom: 1.25rem
}
.mb-4 {
margin-bottom: 1rem
}
.-mr-2 {
margin-right: -.5rem
}
.mt-1 {
margin-top: .25rem
}
.ml-4 {
margin-left: 1rem
}
.-ml-4 {
margin-left: -1rem
}
.mt-2 {
margin-top: .5rem
}
.ml-auto {
margin-left: auto
}
.mr-0 {
margin-right: 0
}
.mt-3 {
margin-top: .75rem
}
.mr-4 {
margin-right: 1rem
}
.mt-5 {
margin-top: 1.25rem
}
.-mr-12 {
margin-right: -3rem
}
.ml-1 {
margin-left: .25rem
}
.-ml-0\.5 {
margin-left: -.125rem
}
.-mt-0\.5 {
margin-top: -.125rem
}
.-ml-0 {
margin-left: 0
}
.-mt-0 {
margin-top: 0
}
.ml-3 {
margin-left: .75rem
}
.mb-3 {
margin-bottom: .75rem
}
.ml-2 {
margin-left: .5rem
}
.mr-1 {
margin-right: .25rem
}
.mt-1\.5 {
margin-top: .375rem
}
.-ml-\[1px\] {
margin-left: -1px
}
.ml-6 {
margin-left: 1.5rem
}
.mt-4 {
margin-top: 1rem
}
.mb-1 {
margin-bottom: .25rem
}
.mr-auto {
margin-right: auto
}
.mb-10 {
margin-bottom: 2.5rem
}
.-ml-px {
margin-left: -1px
}
.ml-12 {
margin-left: 3rem
}
.\!mt-4 {
margin-top: 1rem !important
}
.\!mb-2 {
margin-bottom: .5rem !important
}
.mt-6 {
margin-top: 1.5rem
}
.mb-8 {
margin-bottom: 2rem
}
.block {
display: block
}
.inline-block {
display: inline-block
}
.inline {
display: inline
}
.flex {
display: flex
}
.inline-flex {
display: inline-flex
}
.table {
display: table
}
.grid {
display: grid
}
.contents {
display: contents
}
.hidden {
display: none
}
.h-full {
height: 100%
}
.h-screen {
height: 100vh
}
.h-\[30px\] {
height: 30px
}
.h-4 {
height: 1rem
}
.h-8 {
height: 2rem
}
.h-10 {
height: 2.5rem
}
.h-3 {
height: .75rem
}
.h-6 {
height: 1.5rem
}
.h-12 {
height: 3rem
}
.h-1 {
height: .25rem
}
.h-\[42px\] {
height: 42px
}
.h-5 {
height: 1.25rem
}
.h-7 {
height: 1.75rem
}
.h-32 {
height: 8rem
}
.h-2 {
height: .5rem
}
.h-\[1px\] {
height: 1px
}
.h-2\.5 {
height: .625rem
}
.h-24 {
height: 6rem
}
.\!h-24 {
height: 6rem !important
}
.h-\[37px\] {
height: 37px
}
.max-h-5 {
max-height: 1.25rem
}
.max-h-60 {
max-height: 15rem
}
.max-h-64 {
max-height: 16rem
}
.max-h-\[80vh\] {
max-height: 80vh
}
.min-h-screen {
min-height: 100vh
}
.min-h-\[20px\] {
min-height: 20px
}
.min-h-full {
min-height: 100%
}
.min-h-0 {
min-height: 0
}
.min-h-\[24px\] {
min-height: 24px
}
.min-h-\[71px\] {
min-height: 71px
}
.min-h-\[32px\] {
min-height: 32px
}
.w-full {
width: 100%
}
.w-\[30px\] {
width: 30px
}
.w-4 {
width: 1rem
}
.w-8 {
width: 2rem
}
.w-10 {
width: 2.5rem
}
.w-\[calc\(100\%-34px\)\] {
width: calc(100% - 34px)
}
.w-\[calc\(100\%-50px\)\] {
width: calc(100% - 50px)
}
.w-3 {
width: .75rem
}
.w-6 {
width: 1.5rem
}
.w-12 {
width: 3rem
}
.w-14 {
width: 3.5rem
}
.w-screen {
width: 100vw
}
.w-5 {
width: 1.25rem
}
.w-11 {
width: 2.75rem
}
.w-2 {
width: .5rem
}
.w-96 {
width: 24rem
}
.w-2\.5 {
width: .625rem
}
.\!w-24 {
width: 6rem !important
}
.max-w-lg {
max-width: 32rem
}
.max-w-md {
max-width: 28rem
}
.max-w-sm {
max-width: 24rem
}
.max-w-xl {
max-width: 36rem
}
.max-w-2xl {
max-width: 42rem
}
.max-w-xs {
max-width: 20rem
}
.max-w-7xl {
max-width: 80rem
}
.max-w-full {
max-width: 100%
}
.max-w-\[560px\] {
max-width: 560px
}
.max-w-prose {
max-width: 65ch
}
.max-w-5xl {
max-width: 64rem
}
.flex-1 {
flex: 1 1 0%
}
.flex-shrink-0 {
flex-shrink: 0
}
.flex-shrink {
flex-shrink: 1
}
.shrink-0 {
flex-shrink: 0
}
.shrink {
flex-shrink: 1
}
.flex-grow {
flex-grow: 1
}
.flex-grow-0 {
flex-grow: 0
}
.grow {
flex-grow: 1
}
.-translate-y-1\/2 {
--tw-translate-y: -50%
}
.-translate-y-1\/2,
.translate-y-\[calc\(100\%-71px\)\] {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-\[calc\(100\%-71px\)\] {
--tw-translate-y: calc(100% - 71px)
}
.-translate-x-full {
--tw-translate-x: -100%
}
.-translate-x-full,
.translate-y-4 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-4 {
--tw-translate-y: 1rem
}
.translate-y-0 {
--tw-translate-y: 0px
}
.translate-x-0,
.translate-y-0 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-0 {
--tw-translate-x: 0px
}
.translate-y-1 {
--tw-translate-y: 0.25rem
}
.-translate-x-1\/2,
.translate-y-1 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-x-1\/2 {
--tw-translate-x: -50%
}
.translate-x-1 {
--tw-translate-x: 0.25rem
}
.-translate-y-full,
.translate-x-1 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-y-full {
--tw-translate-y: -100%
}
.translate-x-full {
--tw-translate-x: 100%
}
.translate-x-5,
.translate-x-full {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-5 {
--tw-translate-x: 1.25rem
}
.translate-x-4 {
--tw-translate-x: 1rem
}
.rotate-180,
.translate-x-4 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-180 {
--tw-rotate: 180deg
}
.-rotate-180 {
--tw-rotate: -180deg
}
.-rotate-180,
.transform {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
.animate-spin {
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite
}
@-webkit-keyframes pulse {
50% {
opacity: .5
}
}
@keyframes pulse {
50% {
opacity: .5
}
}
.animate-pulse {
-webkit-animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}
.cursor-not-allowed {
cursor: not-allowed
}
.cursor-pointer {
cursor: pointer
}
.cursor-default {
cursor: default
}
.select-none {
-webkit-user-select: none;
user-select: none
}
.resize-none {
resize: none
}
.resize {
resize: both
}
.appearance-none {
-webkit-appearance: none;
appearance: none
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.flex-row {
flex-direction: row
}
.flex-col {
flex-direction: column
}
.flex-col-reverse {
flex-direction: column-reverse
}
.items-start {
align-items: flex-start
}
.items-end {
align-items: flex-end
}
.items-center {
align-items: center
}
.items-stretch {
align-items: stretch
}
.justify-start {
justify-content: flex-start
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.gap-3 {
gap: .75rem
}
.gap-1 {
gap: .25rem
}
.gap-2 {
gap: .5rem
}
.gap-4 {
gap: 1rem
}
.gap-6 {
gap: 1.5rem
}
.gap-0 {
gap: 0
}
.gap-3\.5 {
gap: .875rem
}
.gap-1\.5 {
gap: .375rem
}
.space-x-1\.5>:not([hidden])~:not([hidden]) {
--tw-space-x-reverse: 0;
margin-left: calc(.375rem*(1 - var(--tw-space-x-reverse)));
margin-right: calc(.375rem*var(--tw-space-x-reverse))
}
.space-x-1>:not([hidden])~:not([hidden]) {
--tw-space-x-reverse: 0;
margin-left: calc(.25rem*(1 - var(--tw-space-x-reverse)));
margin-right: calc(.25rem*var(--tw-space-x-reverse))
}
.space-y-1>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-bottom: calc(.25rem*var(--tw-space-y-reverse));
margin-top: calc(.25rem*(1 - var(--tw-space-y-reverse)))
}
.space-y-2>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-bottom: calc(.5rem*var(--tw-space-y-reverse));
margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)))
}
.space-y-3>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-bottom: calc(.75rem*var(--tw-space-y-reverse));
margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse)))
}
.space-x-5>:not([hidden])~:not([hidden]) {
--tw-space-x-reverse: 0;
margin-left: calc(1.25rem*(1 - var(--tw-space-x-reverse)));
margin-right: calc(1.25rem*var(--tw-space-x-reverse))
}
.space-y-12>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-bottom: calc(3rem*var(--tw-space-y-reverse));
margin-top: calc(3rem*(1 - var(--tw-space-y-reverse)))
}
.self-start {
align-self: flex-start
}
.self-end {
align-self: flex-end
}
.self-center {
align-self: center
}
.self-stretch {
align-self: stretch
}
.overflow-auto {
overflow: auto
}
.overflow-hidden {
overflow: hidden
}
.overflow-y-auto {
overflow-y: auto
}
.truncate {
overflow: hidden;
white-space: nowrap
}
.text-ellipsis,
.truncate {
text-overflow: ellipsis
}
.\!whitespace-pre {
white-space: pre !important
}
.whitespace-pre-wrap {
white-space: pre-wrap
}
.break-words {
word-wrap: break-word
}
.break-all {
word-break: break-all
}
.rounded-md {
border-radius: .375rem
}
.rounded-sm {
border-radius: .125rem
}
.rounded-full {
border-radius: 9999px
}
.rounded-none {
border-radius: 0
}
.rounded-lg {
border-radius: .5rem
}
.\!rounded-none {
border-radius: 0 !important
}
.rounded {
border-radius: .25rem
}
.rounded-l-md {
border-bottom-left-radius: .375rem;
border-top-left-radius: .375rem
}
.rounded-r-md {
border-bottom-right-radius: .375rem;
border-top-right-radius: .375rem
}
.rounded-t-xl {
border-top-left-radius: .75rem;
border-top-right-radius: .75rem
}
.border {
border-width: 1px
}
.border-0 {
border-width: 0
}
.border-2 {
border-width: 2px
}
.border-y {
border-top-width: 1px
}
.border-b,
.border-y {
border-bottom-width: 1px
}
.border-l {
border-left-width: 1px
}
.border-t {
border-top-width: 1px
}
.border-l-4 {
border-left-width: 4px
}
.border-r-0 {
border-right-width: 0
}
.border-b-2 {
border-bottom-width: 2px
}
.border-none {
border-style: none
}
.border-white {
--tw-border-opacity: 1;
border-color: rgba(255, 255, 255, var(--tw-border-opacity))
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgba(197, 197, 210, var(--tw-border-opacity))
}
.border-black\/10 {
border-color: rgba(0, 0, 0, .1)
}
.border-white\/20 {
border-color: hsla(0, 0%, 100%, .2)
}
.border-indigo-400 {
--tw-border-opacity: 1;
border-color: rgba(129, 140, 248, var(--tw-border-opacity))
}
.border-gray-100 {
--tw-border-opacity: 1;
border-color: rgba(236, 236, 241, var(--tw-border-opacity))
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgba(217, 217, 227, var(--tw-border-opacity))
}
.border-transparent {
border-color: transparent
}
.border-black\/20 {
border-color: rgba(0, 0, 0, .2)
}
.border-green-500 {
--tw-border-opacity: 1;
border-color: rgba(25, 195, 125, var(--tw-border-opacity))
}
.border-orange-500 {
--tw-border-opacity: 1;
border-color: rgba(224, 108, 43, var(--tw-border-opacity))
}
.border-red-500 {
--tw-border-opacity: 1;
border-color: rgba(239, 68, 68, var(--tw-border-opacity))
}
.border-gray-500 {
--tw-border-opacity: 1;
border-color: rgba(142, 142, 160, var(--tw-border-opacity))
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgba(217, 217, 227, var(--tw-bg-opacity))
}
.bg-orange-500 {
--tw-bg-opacity: 1;
background-color: rgba(224, 108, 43, var(--tw-bg-opacity))
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--tw-bg-opacity))
}
.bg-\[\#5436DA\] {
--tw-bg-opacity: 1;
background-color: rgba(84, 54, 218, var(--tw-bg-opacity))
}
.bg-yellow-200 {
--tw-bg-opacity: 1;
background-color: rgba(250, 230, 158, var(--tw-bg-opacity))
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgba(0, 0, 0, var(--tw-bg-opacity))
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity))
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgba(247, 247, 248, var(--tw-bg-opacity))
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgba(236, 236, 241, var(--tw-bg-opacity))
}
.bg-transparent {
background-color: transparent
}
.bg-gray-500\/90 {
background-color: hsla(240, 9%, 59%, .9)
}
.bg-red-100 {
--tw-bg-opacity: 1;
background-color: rgba(254, 226, 226, var(--tw-bg-opacity))
}
.bg-yellow-100 {
--tw-bg-opacity: 1;
background-color: rgba(254, 249, 195, var(--tw-bg-opacity))
}
.bg-green-100 {
--tw-bg-opacity: 1;
background-color: rgba(210, 244, 211, var(--tw-bg-opacity))
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgba(32, 33, 35, var(--tw-bg-opacity))
}
.bg-gray-600 {
--tw-bg-opacity: 1;
background-color: rgba(86, 88, 105, var(--tw-bg-opacity))
}
.bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgba(142, 142, 160, var(--tw-bg-opacity))
}
.\!bg-white {
--tw-bg-opacity: 1 !important;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important
}
.bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgba(254, 202, 202, var(--tw-bg-opacity))
}
.\!bg-indigo-600 {
--tw-bg-opacity: 1 !important;
background-color: rgba(79, 70, 229, var(--tw-bg-opacity)) !important
}
.\!bg-gray-200 {
--tw-bg-opacity: 1 !important;
background-color: rgba(217, 217, 227, var(--tw-bg-opacity)) !important
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgba(25, 195, 125, var(--tw-bg-opacity))
}
.bg-orange-500\/10 {
background-color: rgba(224, 108, 43, .1)
}
.bg-red-500\/10 {
background-color: rgba(239, 68, 68, .1)
}
.bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgba(197, 197, 210, var(--tw-bg-opacity))
}
.bg-gray-400 {
--tw-bg-opacity: 1;
background-color: rgba(172, 172, 190, var(--tw-bg-opacity))
}
.bg-green-600 {
--tw-bg-opacity: 1;
background-color: rgba(16, 163, 127, var(--tw-bg-opacity))
}
.bg-green-700 {
--tw-bg-opacity: 1;
background-color: rgba(26, 127, 100, var(--tw-bg-opacity))
}
.bg-green-200 {
--tw-bg-opacity: 1;
background-color: rgba(185, 238, 188, var(--tw-bg-opacity))
}
.bg-opacity-75 {
--tw-bg-opacity: 0.75
}
.bg-gradient-to-l {
background-image: linear-gradient(to left, var(--tw-gradient-stops))
}
.from-gray-800 {
--tw-gradient-from: #343541;
--tw-gradient-to: rgba(52, 53, 65, 0);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-gray-900 {
--tw-gradient-from: #202123;
--tw-gradient-to: rgba(32, 33, 35, 0);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.bg-contain {
background-size: contain
}
.bg-center {
background-position: 50%
}
.bg-no-repeat {
background-repeat: no-repeat
}
.p-1 {
padding: .25rem
}
.p-6 {
padding: 1.5rem
}
.p-4 {
padding: 1rem
}
.p-2 {
padding: .5rem
}
.p-3 {
padding: .75rem
}
.p-0 {
padding: 0
}
.\!p-0 {
padding: 0 !important
}
.p-px {
padding: 1px
}
.px-2 {
padding-left: .5rem;
padding-right: .5rem
}
.py-1 {
padding-bottom: .25rem;
padding-top: .25rem
}
.py-0\.5 {
padding-bottom: .125rem;
padding-top: .125rem
}
.px-1\.5 {
padding-left: .375rem;
padding-right: .375rem
}
.py-0 {
padding-bottom: 0;
padding-top: 0
}
.px-1 {
padding-left: .25rem;
padding-right: .25rem
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.py-2 {
padding-bottom: .5rem;
padding-top: .5rem
}
.py-4 {
padding-bottom: 1rem;
padding-top: 1rem
}
.py-3 {
padding-bottom: .75rem;
padding-top: .75rem
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem
}
.\!py-0 {
padding-bottom: 0 !important;
padding-top: 0 !important
}
.py-8 {
padding-bottom: 2rem;
padding-top: 2rem
}
.py-10 {
padding-bottom: 2.5rem;
padding-top: 2.5rem
}
.py-2\.5 {
padding-bottom: .625rem;
padding-top: .625rem
}
.pt-24 {
padding-top: 6rem
}
.pb-8 {
padding-bottom: 2rem
}
.pt-20 {
padding-top: 5rem
}
.pt-2 {
padding-top: .5rem
}
.pr-14 {
padding-right: 3.5rem
}
.pr-6 {
padding-right: 1.5rem
}
.pt-5 {
padding-top: 1.25rem
}
.pb-4 {
padding-bottom: 1rem
}
.pl-1 {
padding-left: .25rem
}
.pt-1 {
padding-top: .25rem
}
.pb-1 {
padding-bottom: .25rem
}
.pl-2 {
padding-left: .5rem
}
.pr-7 {
padding-right: 1.75rem
}
.pl-3 {
padding-left: .75rem
}
.pr-10 {
padding-right: 2.5rem
}
.pr-2 {
padding-right: .5rem
}
.pr-9 {
padding-right: 2.25rem
}
.pr-4 {
padding-right: 1rem
}
.pl-10 {
padding-left: 2.5rem
}
.pb-3 {
padding-bottom: .75rem
}
.pr-5 {
padding-right: 1.25rem
}
.pr-1 {
padding-right: .25rem
}
.pb-6 {
padding-bottom: 1.5rem
}
.pt-3 {
padding-top: .75rem
}
.pb-2 {
padding-bottom: .5rem
}
.pt-4 {
padding-top: 1rem
}
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-right {
text-align: right
}
.align-top {
vertical-align: top
}
.font-sans {
font-family: Söhne, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}
.font-mono {
font-family: Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace
}
.text-lg {
font-size: 1.125rem
}
.text-lg,
.text-xl {
line-height: 1.75rem
}
.text-xl {
font-size: 1.25rem
}
.text-xs {
font-size: .75rem;
line-height: 1rem
}
.text-\[10px\] {
font-size: 10px
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem
}
.text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.text-base {
font-size: 1rem;
line-height: 1.5rem
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.font-semibold {
font-weight: 600
}
.font-normal {
font-weight: 400
}
.font-bold {
font-weight: 700
}
.font-medium {
font-weight: 500
}
.uppercase {
text-transform: uppercase
}
.normal-case {
text-transform: none
}
.italic {
font-style: italic
}
.leading-6 {
line-height: 1.5rem
}
.leading-tight {
line-height: 1.25
}
.leading-5 {
line-height: 1.25rem
}
.tracking-widest {
letter-spacing: .1em
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgba(239, 68, 68, var(--tw-text-opacity))
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgba(172, 172, 190, var(--tw-text-opacity))
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgba(142, 142, 160, var(--tw-text-opacity))
}
.text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.text-yellow-900 {
--tw-text-opacity: 1;
color: rgba(146, 114, 1, var(--tw-text-opacity))
}
.text-green-700 {
--tw-text-opacity: 1;
color: rgba(26, 127, 100, var(--tw-text-opacity))
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgba(52, 53, 65, var(--tw-text-opacity))
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgba(64, 65, 79, var(--tw-text-opacity))
}
.text-gray-200 {
--tw-text-opacity: 1;
color: rgba(217, 217, 227, var(--tw-text-opacity))
}
.text-gray-100 {
--tw-text-opacity: 1;
color: rgba(236, 236, 241, var(--tw-text-opacity))
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgba(197, 197, 210, var(--tw-text-opacity))
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgba(32, 33, 35, var(--tw-text-opacity))
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgba(86, 88, 105, var(--tw-text-opacity))
}
.text-red-600 {
--tw-text-opacity: 1;
color: rgba(220, 38, 38, var(--tw-text-opacity))
}
.text-yellow-700 {
--tw-text-opacity: 1;
color: rgba(161, 98, 7, var(--tw-text-opacity))
}
.text-indigo-500 {
--tw-text-opacity: 1;
color: rgba(99, 102, 241, var(--tw-text-opacity))
}
.text-red-800 {
--tw-text-opacity: 1;
color: rgba(153, 27, 27, var(--tw-text-opacity))
}
.text-black\/50 {
color: rgba(0, 0, 0, .5)
}
.text-indigo-600 {
--tw-text-opacity: 1;
color: rgba(79, 70, 229, var(--tw-text-opacity))
}
.text-yellow-400 {
--tw-text-opacity: 1;
color: rgba(255, 198, 87, var(--tw-text-opacity))
}
.text-red-300 {
--tw-text-opacity: 1;
color: rgba(252, 165, 165, var(--tw-text-opacity))
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgba(16, 163, 127, var(--tw-text-opacity))
}
.text-orange-500 {
--tw-text-opacity: 1;
color: rgba(224, 108, 43, var(--tw-text-opacity))
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgba(59, 130, 246, var(--tw-text-opacity))
}
.underline {
text-decoration-line: underline
}
.\!no-underline {
text-decoration-line: none !important
}
.placeholder-gray-500::-webkit-input-placeholder {
--tw-placeholder-opacity: 1;
color: rgba(142, 142, 160, var(--tw-placeholder-opacity))
}
.placeholder-gray-500::placeholder {
--tw-placeholder-opacity: 1;
color: rgba(142, 142, 160, var(--tw-placeholder-opacity))
}
.opacity-50 {
opacity: .5
}
.opacity-0 {
opacity: 0
}
.opacity-100 {
opacity: 1
}
.opacity-20 {
opacity: .2
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color)
}
.shadow-md,
.shadow-sm {
box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow)
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)
}
.shadow,
.shadow-xl {
box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow)
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color)
}
.shadow-\[0_0_10px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
--tw-shadow: 0 0 10px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 0 10px var(--tw-shadow-color)
}
.shadow-\[0_0_10px_rgba\(0\2c 0\2c 0\2c 0\.10\)\],
.shadow-lg {
box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow)
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)
}
.shadow-indigo-400 {
--tw-shadow-color: #818cf8;
--tw-shadow: var(--tw-shadow-colored)
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px
}
.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)
}
.ring-0,
.ring-1 {
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.ring-0 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)
}
.ring-black {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(0, 0, 0, var(--tw-ring-opacity))
}
.ring-opacity-5 {
--tw-ring-opacity: 0.05
}
.filter {
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.filter-none {
-webkit-filter: none;
filter: none
}
.transition-transform {
transition-duration: .15s;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.transition {
transition-duration: .15s;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.transition-opacity {
transition-duration: .15s;
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.transition-all {
transition-duration: .15s;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.transition-colors {
transition-duration: .15s;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.transition-width {
transition-duration: .15s;
transition-property: width;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.duration-200 {
transition-duration: .2s
}
.duration-500 {
transition-duration: .5s
}
.duration-75 {
transition-duration: 75ms
}
.duration-300 {
transition-duration: .3s
}
.duration-150 {
transition-duration: .15s
}
.duration-100 {
transition-duration: .1s
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, .2, 1)
}
.ease-in {
transition-timing-function: cubic-bezier(.4, 0, 1, 1)
}
.ease-linear {
transition-timing-function: linear
}
.ease-in-out {
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
body,
html {
height: 100%
}
.dark body,
.dark html {
--tw-bg-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity))
}
#__next,
#root {
height: 100%
}
.markdown ol {
counter-reset: item
}
.markdown ul li {
display: block;
margin: 0;
position: relative
}
.markdown ul li:before {
content: "•";
font-size: .875rem;
line-height: 1.25rem;
margin-left: -1rem;
position: absolute
}
.markdown {
max-width: none
}
.markdown h1,
.markdown h2 {
font-weight: 600
}
.markdown h2 {
margin-bottom: 1rem;
margin-top: 2rem
}
.markdown h3 {
font-weight: 600
}
.markdown h3,
.markdown h4 {
margin-bottom: .5rem;
margin-top: 1rem
}
.markdown h4 {
font-weight: 400
}
.markdown h5 {
font-weight: 600
}
.markdown blockquote {
--tw-border-opacity: 1;
border-color: rgba(142, 142, 160, var(--tw-border-opacity));
border-left-width: 2px;
line-height: 1rem;
padding-left: 1rem
}
.markdown ol,
.markdown ul {
display: flex;
flex-direction: column;
padding-left: 1rem
}
.markdown ol li,
.markdown ol li>p,
.markdown ol ol,
.markdown ol ul,
.markdown ul li,
.markdown ul li>p,
.markdown ul ol,
.markdown ul ul {
margin: 0
}
.markdown table {
--tw-border-spacing-x: 0px;
--tw-border-spacing-y: 0px;
border-collapse: separate;
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
width: 100%
}
.markdown th {
background-color: rgba(236, 236, 241, .2);
border-bottom-width: 1px;
border-left-width: 1px;
border-top-width: 1px;
padding: .25rem .75rem
}
.markdown th:first-child {
border-top-left-radius: .375rem
}
.markdown th:last-child {
border-right-width: 1px;
border-top-right-radius: .375rem
}
.markdown td {
border-bottom-width: 1px;
border-left-width: 1px;
padding: .25rem .75rem
}
.markdown td:last-child {
border-right-width: 1px
}
.markdown tbody tr:last-child td:first-child {
border-bottom-left-radius: .375rem
}
.markdown tbody tr:last-child td:last-child {
border-bottom-right-radius: .375rem
}
.markdown a {
text-decoration-line: underline;
text-underline-offset: 2px
}
.conversation-item-time:before {
content: attr(data-time)
}
.tooltip-label:before {
content: attr(data-content)
}
button.scroll-convo {
display: none
}
@-webkit-keyframes blink {
to {
visibility: hidden
}
}
@keyframes blink {
to {
visibility: hidden
}
}
.animate-flash {
-webkit-animation: flash 2s steps(60, start);
animation: flash 2s steps(60, start)
}
@-webkit-keyframes flash {
0% {
background-color: hsla(0, 0%, 100%, .4)
}
}
@keyframes flash {
0% {
background-color: hsla(0, 0%, 100%, .4)
}
}
.result-streaming>:not(ol):not(ul):not(pre):last-child:after,
.result-streaming>ol:last-child li:last-child:after,
.result-streaming>pre:last-child code:after,
.result-streaming>ul:last-child li:last-child:after {
-webkit-animation: blink 1s steps(5, start) infinite;
animation: blink 1s steps(5, start) infinite;
content: "▋";
margin-left: .25rem;
vertical-align: baseline
}
@-webkit-keyframes toast-open {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes toast-open {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@-webkit-keyframes toast-close {
0% {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes toast-close {
0% {
opacity: 1
}
to {
opacity: 0
}
}
.toast-root {
align-items: center;
display: flex;
flex-direction: column;
height: 0;
transition: all .24s cubic-bezier(0, 0, .2, 1)
}
.toast-root[data-state=entered],
.toast-root[data-state=entering] {
-webkit-animation: toast-open .24s cubic-bezier(.175, .885, .32, 1.175) both;
animation: toast-open .24s cubic-bezier(.175, .885, .32, 1.175) both
}
.toast-root[data-state=exiting] {
-webkit-animation: toast-close .12s cubic-bezier(.4, 0, 1, 1) both;
animation: toast-close .12s cubic-bezier(.4, 0, 1, 1) both
}
.toast-root .alert-root {
box-shadow: 0 0 1px rgba(67, 90, 111, .3), 0 5px 8px -4px rgba(67, 90, 111, .3);
flex-shrink: 0;
pointer-events: all
}
.before\:visible:before {
content: var(--tw-content);
visibility: visible
}
.before\:absolute:before {
content: var(--tw-content);
position: absolute
}
.before\:-top-7:before {
content: var(--tw-content);
top: -1.75rem
}
.before\:top-0:before {
content: var(--tw-content);
top: 0
}
.before\:h-2:before {
content: var(--tw-content);
height: .5rem
}
.before\:w-2:before {
content: var(--tw-content);
width: .5rem
}
.before\:-translate-y-1\/2:before {
--tw-translate-y: -50%
}
.before\:-translate-x-1\/2:before,
.before\:-translate-y-1\/2:before {
content: var(--tw-content);
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.before\:-translate-x-1\/2:before {
--tw-translate-x: -50%
}
.before\:rotate-45:before {
--tw-rotate: 45deg;
content: var(--tw-content);
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.before\:border-b:before {
border-bottom-width: 1px;
content: var(--tw-content)
}
.before\:border-r:before {
border-right-width: 1px;
content: var(--tw-content)
}
.before\:border-black\/10:before {
border-color: rgba(0, 0, 0, .1);
content: var(--tw-content)
}
.before\:bg-gray-100:before {
--tw-bg-opacity: 1;
background-color: rgba(236, 236, 241, var(--tw-bg-opacity));
content: var(--tw-content)
}
.before\:content-\[\"\"\]:before {
--tw-content: "";
content: var(--tw-content)
}
.before\:content-\[\'\"\'\]:before {
--tw-content: '"';
content: var(--tw-content)
}
.after\:h-\[15px\]:after {
content: var(--tw-content);
height: 15px
}
.after\:w-\[1px\]:after {
content: var(--tw-content);
width: 1px
}
.after\:bg-gray-300:after {
--tw-bg-opacity: 1;
background-color: rgba(197, 197, 210, var(--tw-bg-opacity));
content: var(--tw-content)
}
.after\:content-\[\"\"\]:after {
--tw-content: "";
content: var(--tw-content)
}
.after\:content-\[\'\"\'\]:after {
--tw-content: '"';
content: var(--tw-content)
}
.last\:mb-2:last-child {
margin-bottom: .5rem
}
.last\:border-0:last-child {
border-width: 0
}
.last\:after\:bg-transparent:last-child:after {
background-color: transparent;
content: var(--tw-content)
}
.checked\:border-blue-600:checked {
--tw-border-opacity: 1;
border-color: rgba(37, 99, 235, var(--tw-border-opacity))
}
.checked\:bg-blue-600:checked {
--tw-bg-opacity: 1;
background-color: rgba(37, 99, 235, var(--tw-bg-opacity))
}
.focus-within\:z-10[focus-within] {
z-index: 10
}
.focus-within\:z-10:focus-within {
z-index: 10
}
.focus-within\:border-indigo-600[focus-within] {
--tw-border-opacity: 1;
border-color: rgba(79, 70, 229, var(--tw-border-opacity))
}
.focus-within\:border-indigo-600:focus-within {
--tw-border-opacity: 1;
border-color: rgba(79, 70, 229, var(--tw-border-opacity))
}
.focus-within\:ring-1[focus-within] {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.focus-within\:ring-1:focus-within {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.focus-within\:ring-indigo-600[focus-within] {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(79, 70, 229, var(--tw-ring-opacity))
}
.focus-within\:ring-indigo-600:focus-within {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(79, 70, 229, var(--tw-ring-opacity))
}
.hover\:bg-gray-50:hover {
--tw-bg-opacity: 1;
background-color: rgba(247, 247, 248, var(--tw-bg-opacity))
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgba(236, 236, 241, var(--tw-bg-opacity))
}
.hover\:bg-\[\#2A2B32\]:hover {
--tw-bg-opacity: 1;
background-color: rgba(42, 43, 50, var(--tw-bg-opacity))
}
.hover\:bg-gray-800:hover {
--tw-bg-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity))
}
.hover\:bg-gray-500\/10:hover {
background-color: hsla(240, 9%, 59%, .1)
}
.hover\:bg-white\/20:hover {
background-color: hsla(0, 0%, 100%, .2)
}
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
background-color: rgba(217, 217, 227, var(--tw-bg-opacity))
}
.hover\:bg-gray-300:hover {
--tw-bg-opacity: 1;
background-color: rgba(197, 197, 210, var(--tw-bg-opacity))
}
.hover\:bg-green-700:hover {
--tw-bg-opacity: 1;
background-color: rgba(26, 127, 100, var(--tw-bg-opacity))
}
.hover\:bg-green-900:hover {
--tw-bg-opacity: 1;
background-color: rgba(24, 61, 49, var(--tw-bg-opacity))
}
.hover\:pr-4:hover {
padding-right: 1rem
}
.hover\:pr-14:hover {
padding-right: 3.5rem
}
.hover\:text-gray-500:hover {
--tw-text-opacity: 1;
color: rgba(142, 142, 160, var(--tw-text-opacity))
}
.hover\:text-gray-700:hover {
--tw-text-opacity: 1;
color: rgba(64, 65, 79, var(--tw-text-opacity))
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.hover\:text-gray-900:hover {
--tw-text-opacity: 1;
color: rgba(32, 33, 35, var(--tw-text-opacity))
}
.hover\:opacity-80:hover {
opacity: .8
}
.hover\:opacity-75:hover {
opacity: .75
}
.focus\:z-10:focus {
z-index: 10
}
.focus\:border-green-500:focus {
--tw-border-opacity: 1;
border-color: rgba(25, 195, 125, var(--tw-border-opacity))
}
.focus\:border-indigo-500:focus {
--tw-border-opacity: 1;
border-color: rgba(99, 102, 241, var(--tw-border-opacity))
}
.focus\:border-green-600:focus {
--tw-border-opacity: 1;
border-color: rgba(16, 163, 127, var(--tw-border-opacity))
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.focus\:ring-0:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)
}
.focus\:ring-0:focus,
.focus\:ring-2:focus {
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)
}
.focus\:ring-1:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.focus\:ring-inset:focus {
--tw-ring-inset: inset
}
.focus\:ring-green-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(25, 195, 125, var(--tw-ring-opacity))
}
.focus\:ring-indigo-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity))
}
.focus\:ring-white:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity))
}
.focus\:ring-green-600:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(16, 163, 127, var(--tw-ring-opacity))
}
.focus\:ring-gray-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(142, 142, 160, var(--tw-ring-opacity))
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.focus-visible\:ring-0.focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.focus-visible\:ring-0:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.disabled\:bottom-0\.5:disabled {
bottom: .125rem
}
.disabled\:bottom-0:disabled {
bottom: 0
}
.disabled\:text-gray-300:disabled {
--tw-text-opacity: 1;
color: rgba(197, 197, 210, var(--tw-text-opacity))
}
.disabled\:hover\:bg-transparent:hover:disabled {
background-color: transparent
}
.group:hover .group-hover\:visible {
visibility: visible
}
.group:hover .group-hover\:from-\[\#2A2B32\] {
--tw-gradient-from: #2a2b32;
--tw-gradient-to: rgba(42, 43, 50, 0);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.group:hover .group-hover\:text-gray-500 {
--tw-text-opacity: 1;
color: rgba(142, 142, 160, var(--tw-text-opacity))
}
.group:hover .group-hover\:text-gray-700 {
--tw-text-opacity: 1;
color: rgba(64, 65, 79, var(--tw-text-opacity))
}
.dark .dark\:prose-invert {
--tw-prose-body: var(--tw-prose-invert-body);
--tw-prose-headings: var(--tw-prose-invert-headings);
--tw-prose-lead: var(--tw-prose-invert-lead);
--tw-prose-links: var(--tw-prose-invert-links);
--tw-prose-bold: var(--tw-prose-invert-bold);
--tw-prose-counters: var(--tw-prose-invert-counters);
--tw-prose-bullets: var(--tw-prose-invert-bullets);
--tw-prose-hr: var(--tw-prose-invert-hr);
--tw-prose-quotes: var(--tw-prose-invert-quotes);
--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
--tw-prose-captions: var(--tw-prose-invert-captions);
--tw-prose-code: var(--tw-prose-invert-code);
--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
--tw-prose-td-borders: var(--tw-prose-invert-td-borders)
}
.dark .dark\:border-gray-900\/50 {
border-color: rgba(32, 33, 35, .5)
}
.dark .dark\:border-white\/20 {
border-color: hsla(0, 0%, 100%, .2)
}
.dark .dark\:border-gray-700 {
--tw-border-opacity: 1;
border-color: rgba(64, 65, 79, var(--tw-border-opacity))
}
.dark .dark\:border-white\/10 {
border-color: hsla(0, 0%, 100%, .1)
}
.dark .dark\:border-black\/20 {
border-color: rgba(0, 0, 0, .2)
}
.dark .dark\:bg-\[\#444654\] {
--tw-bg-opacity: 1;
background-color: rgba(68, 70, 84, var(--tw-bg-opacity))
}
.dark .dark\:bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity))
}
.dark .dark\:bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgba(64, 65, 79, var(--tw-bg-opacity))
}
.dark .dark\:bg-gray-800\/90 {
background-color: rgba(52, 53, 65, .9)
}
.dark .dark\:bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgba(32, 33, 35, var(--tw-bg-opacity))
}
.dark .dark\:bg-transparent {
background-color: transparent
}
.dark .dark\:bg-white\/10 {
background-color: hsla(0, 0%, 100%, .1)
}
.dark .dark\:bg-white\/5 {
background-color: hsla(0, 0%, 100%, .05)
}
.dark .dark\:bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgba(142, 142, 160, var(--tw-bg-opacity))
}
.dark .dark\:bg-green-700 {
--tw-bg-opacity: 1;
background-color: rgba(26, 127, 100, var(--tw-bg-opacity))
}
.dark .dark\:text-gray-100 {
--tw-text-opacity: 1;
color: rgba(236, 236, 241, var(--tw-text-opacity))
}
.dark .dark\:text-gray-400 {
--tw-text-opacity: 1;
color: rgba(172, 172, 190, var(--tw-text-opacity))
}
.dark .dark\:text-gray-200 {
--tw-text-opacity: 1;
color: rgba(217, 217, 227, var(--tw-text-opacity))
}
.dark .dark\:text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.dark .dark\:text-gray-500 {
--tw-text-opacity: 1;
color: rgba(142, 142, 160, var(--tw-text-opacity))
}
.dark .dark\:text-white\/50 {
color: hsla(0, 0%, 100%, .5)
}
.dark .dark\:text-gray-600 {
--tw-text-opacity: 1;
color: rgba(86, 88, 105, var(--tw-text-opacity))
}
.dark .dark\:text-gray-300 {
--tw-text-opacity: 1;
color: rgba(197, 197, 210, var(--tw-text-opacity))
}
.dark .dark\:opacity-100 {
opacity: 1
}
.dark .dark\:shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
--tw-shadow: 0 0 15px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow)
}
.dark .dark\:ring-white\/20 {
--tw-ring-color: hsla(0, 0%, 100%, .2)
}
.dark .dark\:ring-gray-600 {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(86, 88, 105, var(--tw-ring-opacity))
}
.dark .dark\:last\:border-0:last-child {
border-width: 0
}
.dark .dark\:hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgba(64, 65, 79, var(--tw-bg-opacity))
}
.dark .dark\:hover\:bg-gray-900:hover {
--tw-bg-opacity: 1;
background-color: rgba(32, 33, 35, var(--tw-bg-opacity))
}
.dark .dark\:hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgba(236, 236, 241, var(--tw-bg-opacity))
}
.dark .dark\:hover\:bg-gray-500\/10:hover {
background-color: hsla(240, 9%, 59%, .1)
}
.dark .dark\:hover\:text-gray-200:hover {
--tw-text-opacity: 1;
color: rgba(217, 217, 227, var(--tw-text-opacity))
}
.dark .dark\:hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.dark .dark\:hover\:text-gray-400:hover {
--tw-text-opacity: 1;
color: rgba(172, 172, 190, var(--tw-text-opacity))
}
.dark .dark\:focus\:border-white:focus {
--tw-border-opacity: 1;
border-color: rgba(255, 255, 255, var(--tw-border-opacity))
}
.dark .dark\:focus\:ring-white:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity))
}
.dark .dark\:disabled\:text-gray-400:disabled {
--tw-text-opacity: 1;
color: rgba(172, 172, 190, var(--tw-text-opacity))
}
.dark .dark\:disabled\:hover\:bg-transparent:hover:disabled {
background-color: transparent
}
.dark .disabled\:dark\:hover\:text-gray-400:hover:disabled {
--tw-text-opacity: 1;
color: rgba(172, 172, 190, var(--tw-text-opacity))
}
@media (min-width:640px) {
.sm\:absolute {
position: absolute
}
.sm\:order-2 {
order: 2
}
.sm\:order-1 {
order: 1
}
.sm\:col-start-2 {
grid-column-start: 2
}
.sm\:my-8 {
margin-bottom: 2rem;
margin-top: 2rem
}
.sm\:mt-0 {
margin-top: 0
}
.sm\:mt-4 {
margin-top: 1rem
}
.sm\:mb-16 {
margin-bottom: 4rem
}
.sm\:mt-\[20vh\] {
margin-top: 20vh
}
.sm\:mt-6 {
margin-top: 1.5rem
}
.sm\:flex {
display: flex
}
.sm\:h-10 {
height: 2.5rem
}
.sm\:w-auto {
width: auto
}
.sm\:w-full {
width: 100%
}
.sm\:w-10 {
width: 2.5rem
}
.sm\:max-w-sm {
max-width: 24rem
}
.sm\:max-w-lg {
max-width: 32rem
}
.sm\:max-w-xl {
max-width: 36rem
}
.sm\:max-w-2xl {
max-width: 42rem
}
.sm\:max-w-md {
max-width: 28rem
}
.sm\:translate-y-0 {
--tw-translate-y: 0px
}
.sm\:scale-95,
.sm\:translate-y-0 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.sm\:scale-95 {
--tw-scale-x: .95;
--tw-scale-y: .95
}
.sm\:scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.sm\:flex-row-reverse {
flex-direction: row-reverse
}
.sm\:items-center {
align-items: center
}
.sm\:gap-4 {
gap: 1rem
}
.sm\:gap-12 {
gap: 3rem
}
.sm\:border-t-0 {
border-top-width: 0
}
.sm\:border-r {
border-right-width: 1px
}
.sm\:p-0 {
padding: 0
}
.sm\:p-6 {
padding: 1.5rem
}
.sm\:p-4 {
padding: 1rem
}
.sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.sm\:px-0 {
padding-left: 0;
padding-right: 0
}
.sm\:pl-3 {
padding-left: .75rem
}
.sm\:pb-1 {
padding-bottom: .25rem
}
.sm\:pb-2 {
padding-bottom: .5rem
}
.sm\:text-left {
text-align: left
}
.sm\:text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.sm\:text-xs {
font-size: .75rem;
line-height: 1rem
}
.sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
.sm\:text-\[40px\] {
font-size: 40px
}
.sm\:duration-300 {
transition-duration: .3s
}
.sm\:duration-500 {
transition-duration: .5s
}
}
@media (min-width:768px) {
.md\:invisible {
visibility: hidden
}
.md\:fixed {
position: fixed
}
.md\:inset-y-0 {
bottom: 0;
top: 0
}
.md\:bottom-2\.5 {
bottom: .625rem
}
.md\:right-2 {
right: .5rem
}
.md\:bottom-2 {
bottom: .5rem
}
.md\:bottom-\[120px\] {
bottom: 120px
}
.md\:m-auto {
margin: auto
}
.md\:mb-auto {
margin-bottom: auto
}
.md\:mb-2 {
margin-bottom: .5rem
}
.md\:mt-3 {
margin-top: .75rem
}
.md\:flex {
display: flex
}
.md\:hidden {
display: none
}
.md\:h-48 {
height: 12rem
}
.md\:h-full {
height: 100%
}
.md\:min-h-\[34px\] {
min-height: 34px
}
.md\:w-\[260px\] {
width: 260px
}
.md\:w-full {
width: 100%
}
.md\:w-1\/2 {
width: 50%
}
.md\:w-\[100\%\] {
width: 100%
}
.md\:w-auto {
width: auto
}
.md\:max-w-2xl {
max-width: 42rem
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.md\:flex-col {
flex-direction: column
}
.md\:gap-3 {
gap: .75rem
}
.md\:gap-6 {
gap: 1.5rem
}
.md\:gap-4 {
gap: 1rem
}
.md\:gap-2 {
gap: .5rem
}
.md\:border {
border-width: 1px
}
.md\:border-t-0 {
border-top-width: 0
}
.md\:border-transparent {
border-color: transparent
}
.md\:\!bg-transparent {
background-color: transparent !important
}
.md\:bg-vert-light-gradient {
background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 13.94%, #fff 54.73%)
}
.md\:py-6 {
padding-bottom: 1.5rem;
padding-top: 1.5rem
}
.md\:py-3 {
padding-bottom: .75rem;
padding-top: .75rem
}
.md\:px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.md\:py-4 {
padding-bottom: 1rem;
padding-top: 1rem
}
.md\:pl-0 {
padding-left: 0
}
.md\:pl-4 {
padding-left: 1rem
}
.md\:pl-\[260px\] {
padding-left: 260px
}
.md\:pt-3 {
padding-top: .75rem
}
.md\:pb-6 {
padding-bottom: 1.5rem
}
.md\:pb-5 {
padding-bottom: 1.25rem
}
.md\:text-justify {
text-align: justify
}
.md\:text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.md\:last\:mb-6:last-child {
margin-bottom: 1.5rem
}
.md\:disabled\:bottom-1:disabled {
bottom: .25rem
}
.group:hover .md\:group-hover\:visible {
visibility: visible
}
.dark .md\:dark\:border-transparent {
border-color: transparent
}
.dark .dark\:md\:bg-vert-dark-gradient {
background-image: linear-gradient(180deg, rgba(53, 55, 64, 0), #353740 58.85%)
}
}
@media (min-width:1024px) {
.lg\:absolute {
position: absolute
}
.lg\:relative {
position: relative
}
.lg\:top-0 {
top: 0
}
.lg\:right-0 {
right: 0
}
.lg\:mx-auto {
margin-left: auto;
margin-right: auto
}
.lg\:mt-0 {
margin-top: 0
}
.lg\:w-3\/5 {
width: 60%
}
.lg\:w-auto {
width: auto
}
.lg\:w-1\/2 {
width: 50%
}
.lg\:w-2\/3 {
width: 66.666667%
}
.lg\:w-\[calc\(100\%-20px\)\] {
width: calc(100% - 20px)
}
.lg\:w-\[calc\(100\%-115px\)\] {
width: calc(100% - 115px)
}
.lg\:w-1\/3 {
width: 33.333333%
}
.lg\:max-w-sm {
max-width: 24rem
}
.lg\:max-w-none {
max-width: none
}
.lg\:max-w-2xl {
max-width: 42rem
}
.lg\:max-w-3xl {
max-width: 48rem
}
.lg\:translate-y-0 {
--tw-translate-y: 0px
}
.lg\:translate-x-full,
.lg\:translate-y-0 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.lg\:translate-x-full {
--tw-translate-x: 100%
}
.lg\:gap-1 {
gap: .25rem
}
.lg\:self-center {
align-self: center
}
.lg\:rounded-lg {
border-radius: .5rem
}
.lg\:rounded-none {
border-radius: 0
}
.lg\:border {
border-width: 1px
}
.lg\:border-0 {
border-width: 0
}
.lg\:p-6 {
padding: 1.5rem
}
.lg\:p-0 {
padding: 0
}
.lg\:px-14 {
padding-left: 3.5rem;
padding-right: 3.5rem
}
.lg\:px-0 {
padding-left: 0;
padding-right: 0
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.lg\:pt-32 {
padding-top: 8rem
}
.lg\:pl-2 {
padding-left: .5rem
}
.lg\:pt-6 {
padding-top: 1.5rem
}
.lg\:text-left {
text-align: left
}
}
@media (min-width:1280px) {
.xl\:w-1\/4 {
width: 25%
}
.xl\:max-w-3xl {
max-width: 48rem
}
}
code,
pre {
font-family: Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace !important
}
code[class=language-plaintext] {
white-space: pre-line
}
code.hljs,
code[class*=language-],
pre[class*=language-] {
word-wrap: normal;
background: none;
color: #fff;
-webkit-hyphens: none;
hyphens: none;
line-height: 1.5;
tab-size: 4;
text-align: left;
white-space: pre;
word-break: normal;
word-spacing: normal
}
pre[class*=language-] {
border-radius: .3em;
overflow: auto
}
:not(pre)>code.hljs,
:not(pre)>code[class*=language-] {
border-radius: .3em;
padding: .1em;
white-space: normal
}
.hljs-comment {
color: hsla(0, 0%, 100%, .5)
}
.hljs-meta {
color: hsla(0, 0%, 100%, .6)
}
.hljs-built_in,
.hljs-class .hljs-title {
color: #e9950c
}
.hljs-doctag,
.hljs-formula,
.hljs-keyword,
.hljs-literal {
color: #2e95d3
}
.hljs-addition,
.hljs-attribute,
.hljs-meta-string,
.hljs-regexp,
.hljs-string {
color: #00a67d
}
.hljs-attr,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable {
color: #df3079
}
.hljs-bullet,
.hljs-link,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
color: #f22c3d
}
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: #a9aec1
}
.token.punctuation {
color: #fefefe
}
.token.constant,
.token.deleted,
.token.property,
.token.symbol,
.token.tag {
color: #ffa07a
}
.token.boolean,
.token.number {
color: #00e0e0
}
.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
color: #abe338
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url,
.token.variable {
color: #00e0e0
}
.token.atrule,
.token.attr-value,
.token.function {
color: gold
}
.token.keyword {
color: #00e0e0
}
.token.important,
.token.regex {
color: gold
}
.token.bold,
.token.important {
font-weight: 700
}
.token.italic {
font-style: italic
}
.token.entity {
cursor: help
}
@media screen and (-ms-high-contrast:active) {
code[class*=language-],
pre[class*=language-] {
background: window;
color: windowText
}
:not(pre)>code[class*=language-],
pre[class*=language-] {
background: window
}
.token.important {
background: highlight;
color: window;
font-weight: 400
}
.token.atrule,
.token.attr-value,
.token.function,
.token.keyword,
.token.operator,
.token.selector {
font-weight: 700
}
.token.attr-value,
.token.comment,
.token.doctype,
.token.function,
.token.keyword,
.token.operator,
.token.property,
.token.string {
color: highlight
}
.token.attr-value,
.token.url {
font-weight: 400
}
}
@font-face {
font-family: KaTeX_AMS;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_AMS-Regular.1608a09b.woff) format("woff")
}
@font-face {
font-family: KaTeX_Caligraphic;
font-style: normal;
font-weight: 700;
src: url(/_next/static/media/KaTeX_Caligraphic-Bold.b6770918.woff) format("woff")
}
@font-face {
font-family: KaTeX_Caligraphic;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Caligraphic-Regular.dad44a7f.woff) format("woff")
}
@font-face {
font-family: KaTeX_Fraktur;
font-style: normal;
font-weight: 700;
src: url(/_next/static/media/KaTeX_Fraktur-Bold.9f256b85.woff) format("woff")
}
@font-face {
font-family: KaTeX_Fraktur;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Fraktur-Regular.7c187121.woff) format("woff")
}
@font-face {
font-family: KaTeX_Main;
font-style: normal;
font-weight: 700;
src: url(/_next/static/media/KaTeX_Main-Bold.d181c465.woff) format("woff")
}
@font-face {
font-family: KaTeX_Main;
font-style: italic;
font-weight: 700;
src: url(/_next/static/media/KaTeX_Main-BoldItalic.e3f82f9d.woff) format("woff")
}
@font-face {
font-family: KaTeX_Main;
font-style: italic;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Main-Italic.9024d815.woff) format("woff")
}
@font-face {
font-family: KaTeX_Main;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Main-Regular.7f51fe03.woff) format("woff")
}
@font-face {
font-family: KaTeX_Math;
font-style: italic;
font-weight: 700;
src: url(/_next/static/media/KaTeX_Math-BoldItalic.f1035d8d.woff) format("woff")
}
@font-face {
font-family: KaTeX_Math;
font-style: italic;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Math-Italic.5295ba48.woff) format("woff")
}
@font-face {
font-family: "KaTeX_SansSerif";
font-style: normal;
font-weight: 700;
src: url(/_next/static/media/KaTeX_SansSerif-Bold.bf59d231.woff) format("woff")
}
@font-face {
font-family: "KaTeX_SansSerif";
font-style: italic;
font-weight: 400;
src: url(/_next/static/media/KaTeX_SansSerif-Italic.7c9bc82b.woff) format("woff")
}
@font-face {
font-family: "KaTeX_SansSerif";
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_SansSerif-Regular.74048478.woff) format("woff")
}
@font-face {
font-family: KaTeX_Script;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Script-Regular.07505710.woff) format("woff")
}
@font-face {
font-family: KaTeX_Size1;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Size1-Regular.e1e279cb.woff) format("woff")
}
@font-face {
font-family: KaTeX_Size2;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Size2-Regular.57727022.woff) format("woff")
}
@font-face {
font-family: KaTeX_Size3;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Size3-Regular.9acaf01c.woff) format("woff")
}
@font-face {
font-family: KaTeX_Size4;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Size4-Regular.7a996c9d.woff) format("woff")
}
@font-face {
font-family: KaTeX_Typewriter;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Typewriter-Regular.6258592b.woff) format("woff")
}
.katex {
font: normal 1.21em KaTeX_Main, Times New Roman, serif;
line-height: 1.2;
text-indent: 0;
text-rendering: auto
}
.katex * {
-ms-high-contrast-adjust: none !important;
border-color: currentcolor
}
.katex .katex-version:after {
content: "0.16.0"
}
.katex .katex-mathml {
clip: rect(1px, 1px, 1px, 1px);
border: 0;
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.katex .katex-html>.newline {
display: block
}
.katex .base {
position: relative;
white-space: nowrap;
width: -webkit-min-content;
width: min-content
}
.katex .base,
.katex .strut {
display: inline-block
}
.katex .textbf {
font-weight: 700
}
.katex .textit {
font-style: italic
}
.katex .textrm {
font-family: KaTeX_Main
}
.katex .textsf {
font-family: "KaTeX_SansSerif"
}
.katex .texttt {
font-family: KaTeX_Typewriter
}
.katex .mathnormal {
font-family: KaTeX_Math;
font-style: italic
}
.katex .mathit {
font-family: KaTeX_Main;
font-style: italic
}
.katex .mathrm {
font-style: normal
}
.katex .mathbf {
font-family: KaTeX_Main;
font-weight: 700
}
.katex .boldsymbol {
font-family: KaTeX_Math;
font-style: italic;
font-weight: 700
}
.katex .amsrm,
.katex .mathbb,
.katex .textbb {
font-family: KaTeX_AMS
}
.katex .mathcal {
font-family: KaTeX_Caligraphic
}
.katex .mathfrak,
.katex .textfrak {
font-family: KaTeX_Fraktur
}
.katex .mathtt {
font-family: KaTeX_Typewriter
}
.katex .mathscr,
.katex .textscr {
font-family: KaTeX_Script
}
.katex .mathsf,
.katex .textsf {
font-family: "KaTeX_SansSerif"
}
.katex .mathboldsf,
.katex .textboldsf {
font-family: "KaTeX_SansSerif";
font-weight: 700
}
.katex .mathitsf,
.katex .textitsf {
font-family: "KaTeX_SansSerif";
font-style: italic
}
.katex .mainrm {
font-family: KaTeX_Main;
font-style: normal
}
.katex .vlist-t {
border-collapse: collapse;
display: inline-table;
table-layout: fixed
}
.katex .vlist-r {
display: table-row
}
.katex .vlist {
display: table-cell;
position: relative;
vertical-align: bottom
}
.katex .vlist>span {
display: block;
height: 0;
position: relative
}
.katex .vlist>span>span {
display: inline-block
}
.katex .vlist>span>.pstrut {
overflow: hidden;
width: 0
}
.katex .vlist-t2 {
margin-right: -2px
}
.katex .vlist-s {
display: table-cell;
font-size: 1px;
min-width: 2px;
vertical-align: bottom;
width: 2px
}
.katex .vbox {
align-items: baseline;
display: inline-flex;
flex-direction: column
}
.katex .hbox {
width: 100%
}
.katex .hbox,
.katex .thinbox {
display: inline-flex;
flex-direction: row
}
.katex .thinbox {
max-width: 0;
width: 0
}
.katex .msupsub {
text-align: left
}
.katex .mfrac>span>span {
text-align: center
}
.katex .mfrac .frac-line {
border-bottom-style: solid;
display: inline-block;
width: 100%
}
.katex .hdashline,
.katex .hline,
.katex .mfrac .frac-line,
.katex .overline .overline-line,
.katex .rule,
.katex .underline .underline-line {
min-height: 1px
}
.katex .mspace {
display: inline-block
}
.katex .clap,
.katex .llap,
.katex .rlap {
position: relative;
width: 0
}
.katex .clap>.inner,
.katex .llap>.inner,
.katex .rlap>.inner {
position: absolute
}
.katex .clap>.fix,
.katex .llap>.fix,
.katex .rlap>.fix {
display: inline-block
}
.katex .llap>.inner {
right: 0
}
.katex .clap>.inner,
.katex .rlap>.inner {
left: 0
}
.katex .clap>.inner>span {
margin-left: -50%;
margin-right: 50%
}
.katex .rule {
border: 0 solid;
display: inline-block;
position: relative
}
.katex .hline,
.katex .overline .overline-line,
.katex .underline .underline-line {
border-bottom-style: solid;
display: inline-block;
width: 100%
}
.katex .hdashline {
border-bottom-style: dashed;
display: inline-block;
width: 100%
}
.katex .sqrt>.root {
margin-left: .27777778em;
margin-right: -.55555556em
}
.katex .fontsize-ensurer.reset-size1.size1,
.katex .sizing.reset-size1.size1 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size1.size2,
.katex .sizing.reset-size1.size2 {
font-size: 1.2em
}
.katex .fontsize-ensurer.reset-size1.size3,
.katex .sizing.reset-size1.size3 {
font-size: 1.4em
}
.katex .fontsize-ensurer.reset-size1.size4,
.katex .sizing.reset-size1.size4 {
font-size: 1.6em
}
.katex .fontsize-ensurer.reset-size1.size5,
.katex .sizing.reset-size1.size5 {
font-size: 1.8em
}
.katex .fontsize-ensurer.reset-size1.size6,
.katex .sizing.reset-size1.size6 {
font-size: 2em
}
.katex .fontsize-ensurer.reset-size1.size7,
.katex .sizing.reset-size1.size7 {
font-size: 2.4em
}
.katex .fontsize-ensurer.reset-size1.size8,
.katex .sizing.reset-size1.size8 {
font-size: 2.88em
}
.katex .fontsize-ensurer.reset-size1.size9,
.katex .sizing.reset-size1.size9 {
font-size: 3.456em
}
.katex .fontsize-ensurer.reset-size1.size10,
.katex .sizing.reset-size1.size10 {
font-size: 4.148em
}
.katex .fontsize-ensurer.reset-size1.size11,
.katex .sizing.reset-size1.size11 {
font-size: 4.976em
}
.katex .fontsize-ensurer.reset-size2.size1,
.katex .sizing.reset-size2.size1 {
font-size: .83333333em
}
.katex .fontsize-ensurer.reset-size2.size2,
.katex .sizing.reset-size2.size2 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size2.size3,
.katex .sizing.reset-size2.size3 {
font-size: 1.16666667em
}
.katex .fontsize-ensurer.reset-size2.size4,
.katex .sizing.reset-size2.size4 {
font-size: 1.33333333em
}
.katex .fontsize-ensurer.reset-size2.size5,
.katex .sizing.reset-size2.size5 {
font-size: 1.5em
}
.katex .fontsize-ensurer.reset-size2.size6,
.katex .sizing.reset-size2.size6 {
font-size: 1.66666667em
}
.katex .fontsize-ensurer.reset-size2.size7,
.katex .sizing.reset-size2.size7 {
font-size: 2em
}
.katex .fontsize-ensurer.reset-size2.size8,
.katex .sizing.reset-size2.size8 {
font-size: 2.4em
}
.katex .fontsize-ensurer.reset-size2.size9,
.katex .sizing.reset-size2.size9 {
font-size: 2.88em
}
.katex .fontsize-ensurer.reset-size2.size10,
.katex .sizing.reset-size2.size10 {
font-size: 3.45666667em
}
.katex .fontsize-ensurer.reset-size2.size11,
.katex .sizing.reset-size2.size11 {
font-size: 4.14666667em
}
.katex .fontsize-ensurer.reset-size3.size1,
.katex .sizing.reset-size3.size1 {
font-size: .71428571em
}
.katex .fontsize-ensurer.reset-size3.size2,
.katex .sizing.reset-size3.size2 {
font-size: .85714286em
}
.katex .fontsize-ensurer.reset-size3.size3,
.katex .sizing.reset-size3.size3 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size3.size4,
.katex .sizing.reset-size3.size4 {
font-size: 1.14285714em
}
.katex .fontsize-ensurer.reset-size3.size5,
.katex .sizing.reset-size3.size5 {
font-size: 1.28571429em
}
.katex .fontsize-ensurer.reset-size3.size6,
.katex .sizing.reset-size3.size6 {
font-size: 1.42857143em
}
.katex .fontsize-ensurer.reset-size3.size7,
.katex .sizing.reset-size3.size7 {
font-size: 1.71428571em
}
.katex .fontsize-ensurer.reset-size3.size8,
.katex .sizing.reset-size3.size8 {
font-size: 2.05714286em
}
.katex .fontsize-ensurer.reset-size3.size9,
.katex .sizing.reset-size3.size9 {
font-size: 2.46857143em
}
.katex .fontsize-ensurer.reset-size3.size10,
.katex .sizing.reset-size3.size10 {
font-size: 2.96285714em
}
.katex .fontsize-ensurer.reset-size3.size11,
.katex .sizing.reset-size3.size11 {
font-size: 3.55428571em
}
.katex .fontsize-ensurer.reset-size4.size1,
.katex .sizing.reset-size4.size1 {
font-size: .625em
}
.katex .fontsize-ensurer.reset-size4.size2,
.katex .sizing.reset-size4.size2 {
font-size: .75em
}
.katex .fontsize-ensurer.reset-size4.size3,
.katex .sizing.reset-size4.size3 {
font-size: .875em
}
.katex .fontsize-ensurer.reset-size4.size4,
.katex .sizing.reset-size4.size4 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size4.size5,
.katex .sizing.reset-size4.size5 {
font-size: 1.125em
}
.katex .fontsize-ensurer.reset-size4.size6,
.katex .sizing.reset-size4.size6 {
font-size: 1.25em
}
.katex .fontsize-ensurer.reset-size4.size7,
.katex .sizing.reset-size4.size7 {
font-size: 1.5em
}
.katex .fontsize-ensurer.reset-size4.size8,
.katex .sizing.reset-size4.size8 {
font-size: 1.8em
}
.katex .fontsize-ensurer.reset-size4.size9,
.katex .sizing.reset-size4.size9 {
font-size: 2.16em
}
.katex .fontsize-ensurer.reset-size4.size10,
.katex .sizing.reset-size4.size10 {
font-size: 2.5925em
}
.katex .fontsize-ensurer.reset-size4.size11,
.katex .sizing.reset-size4.size11 {
font-size: 3.11em
}
.katex .fontsize-ensurer.reset-size5.size1,
.katex .sizing.reset-size5.size1 {
font-size: .55555556em
}
.katex .fontsize-ensurer.reset-size5.size2,
.katex .sizing.reset-size5.size2 {
font-size: .66666667em
}
.katex .fontsize-ensurer.reset-size5.size3,
.katex .sizing.reset-size5.size3 {
font-size: .77777778em
}
.katex .fontsize-ensurer.reset-size5.size4,
.katex .sizing.reset-size5.size4 {
font-size: .88888889em
}
.katex .fontsize-ensurer.reset-size5.size5,
.katex .sizing.reset-size5.size5 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size5.size6,
.katex .sizing.reset-size5.size6 {
font-size: 1.11111111em
}
.katex .fontsize-ensurer.reset-size5.size7,
.katex .sizing.reset-size5.size7 {
font-size: 1.33333333em
}
.katex .fontsize-ensurer.reset-size5.size8,
.katex .sizing.reset-size5.size8 {
font-size: 1.6em
}
.katex .fontsize-ensurer.reset-size5.size9,
.katex .sizing.reset-size5.size9 {
font-size: 1.92em
}
.katex .fontsize-ensurer.reset-size5.size10,
.katex .sizing.reset-size5.size10 {
font-size: 2.30444444em
}
.katex .fontsize-ensurer.reset-size5.size11,
.katex .sizing.reset-size5.size11 {
font-size: 2.76444444em
}
.katex .fontsize-ensurer.reset-size6.size1,
.katex .sizing.reset-size6.size1 {
font-size: .5em
}
.katex .fontsize-ensurer.reset-size6.size2,
.katex .sizing.reset-size6.size2 {
font-size: .6em
}
.katex .fontsize-ensurer.reset-size6.size3,
.katex .sizing.reset-size6.size3 {
font-size: .7em
}
.katex .fontsize-ensurer.reset-size6.size4,
.katex .sizing.reset-size6.size4 {
font-size: .8em
}
.katex .fontsize-ensurer.reset-size6.size5,
.katex .sizing.reset-size6.size5 {
font-size: .9em
}
.katex .fontsize-ensurer.reset-size6.size6,
.katex .sizing.reset-size6.size6 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size6.size7,
.katex .sizing.reset-size6.size7 {
font-size: 1.2em
}
.katex .fontsize-ensurer.reset-size6.size8,
.katex .sizing.reset-size6.size8 {
font-size: 1.44em
}
.katex .fontsize-ensurer.reset-size6.size9,
.katex .sizing.reset-size6.size9 {
font-size: 1.728em
}
.katex .fontsize-ensurer.reset-size6.size10,
.katex .sizing.reset-size6.size10 {
font-size: 2.074em
}
.katex .fontsize-ensurer.reset-size6.size11,
.katex .sizing.reset-size6.size11 {
font-size: 2.488em
}
.katex .fontsize-ensurer.reset-size7.size1,
.katex .sizing.reset-size7.size1 {
font-size: .41666667em
}
.katex .fontsize-ensurer.reset-size7.size2,
.katex .sizing.reset-size7.size2 {
font-size: .5em
}
.katex .fontsize-ensurer.reset-size7.size3,
.katex .sizing.reset-size7.size3 {
font-size: .58333333em
}
.katex .fontsize-ensurer.reset-size7.size4,
.katex .sizing.reset-size7.size4 {
font-size: .66666667em
}
.katex .fontsize-ensurer.reset-size7.size5,
.katex .sizing.reset-size7.size5 {
font-size: .75em
}
.katex .fontsize-ensurer.reset-size7.size6,
.katex .sizing.reset-size7.size6 {
font-size: .83333333em
}
.katex .fontsize-ensurer.reset-size7.size7,
.katex .sizing.reset-size7.size7 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size7.size8,
.katex .sizing.reset-size7.size8 {
font-size: 1.2em
}
.katex .fontsize-ensurer.reset-size7.size9,
.katex .sizing.reset-size7.size9 {
font-size: 1.44em
}
.katex .fontsize-ensurer.reset-size7.size10,
.katex .sizing.reset-size7.size10 {
font-size: 1.72833333em
}
.katex .fontsize-ensurer.reset-size7.size11,
.katex .sizing.reset-size7.size11 {
font-size: 2.07333333em
}
.katex .fontsize-ensurer.reset-size8.size1,
.katex .sizing.reset-size8.size1 {
font-size: .34722222em
}
.katex .fontsize-ensurer.reset-size8.size2,
.katex .sizing.reset-size8.size2 {
font-size: .41666667em
}
.katex .fontsize-ensurer.reset-size8.size3,
.katex .sizing.reset-size8.size3 {
font-size: .48611111em
}
.katex .fontsize-ensurer.reset-size8.size4,
.katex .sizing.reset-size8.size4 {
font-size: .55555556em
}
.katex .fontsize-ensurer.reset-size8.size5,
.katex .sizing.reset-size8.size5 {
font-size: .625em
}
.katex .fontsize-ensurer.reset-size8.size6,
.katex .sizing.reset-size8.size6 {
font-size: .69444444em
}
.katex .fontsize-ensurer.reset-size8.size7,
.katex .sizing.reset-size8.size7 {
font-size: .83333333em
}
.katex .fontsize-ensurer.reset-size8.size8,
.katex .sizing.reset-size8.size8 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size8.size9,
.katex .sizing.reset-size8.size9 {
font-size: 1.2em
}
.katex .fontsize-ensurer.reset-size8.size10,
.katex .sizing.reset-size8.size10 {
font-size: 1.44027778em
}
.katex .fontsize-ensurer.reset-size8.size11,
.katex .sizing.reset-size8.size11 {
font-size: 1.72777778em
}
.katex .fontsize-ensurer.reset-size9.size1,
.katex .sizing.reset-size9.size1 {
font-size: .28935185em
}
.katex .fontsize-ensurer.reset-size9.size2,
.katex .sizing.reset-size9.size2 {
font-size: .34722222em
}
.katex .fontsize-ensurer.reset-size9.size3,
.katex .sizing.reset-size9.size3 {
font-size: .40509259em
}
.katex .fontsize-ensurer.reset-size9.size4,
.katex .sizing.reset-size9.size4 {
font-size: .46296296em
}
.katex .fontsize-ensurer.reset-size9.size5,
.katex .sizing.reset-size9.size5 {
font-size: .52083333em
}
.katex .fontsize-ensurer.reset-size9.size6,
.katex .sizing.reset-size9.size6 {
font-size: .5787037em
}
.katex .fontsize-ensurer.reset-size9.size7,
.katex .sizing.reset-size9.size7 {
font-size: .69444444em
}
.katex .fontsize-ensurer.reset-size9.size8,
.katex .sizing.reset-size9.size8 {
font-size: .83333333em
}
.katex .fontsize-ensurer.reset-size9.size9,
.katex .sizing.reset-size9.size9 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size9.size10,
.katex .sizing.reset-size9.size10 {
font-size: 1.20023148em
}
.katex .fontsize-ensurer.reset-size9.size11,
.katex .sizing.reset-size9.size11 {
font-size: 1.43981481em
}
.katex .fontsize-ensurer.reset-size10.size1,
.katex .sizing.reset-size10.size1 {
font-size: .24108004em
}
.katex .fontsize-ensurer.reset-size10.size2,
.katex .sizing.reset-size10.size2 {
font-size: .28929605em
}
.katex .fontsize-ensurer.reset-size10.size3,
.katex .sizing.reset-size10.size3 {
font-size: .33751205em
}
.katex .fontsize-ensurer.reset-size10.size4,
.katex .sizing.reset-size10.size4 {
font-size: .38572806em
}
.katex .fontsize-ensurer.reset-size10.size5,
.katex .sizing.reset-size10.size5 {
font-size: .43394407em
}
.katex .fontsize-ensurer.reset-size10.size6,
.katex .sizing.reset-size10.size6 {
font-size: .48216008em
}
.katex .fontsize-ensurer.reset-size10.size7,
.katex .sizing.reset-size10.size7 {
font-size: .57859209em
}
.katex .fontsize-ensurer.reset-size10.size8,
.katex .sizing.reset-size10.size8 {
font-size: .69431051em
}
.katex .fontsize-ensurer.reset-size10.size9,
.katex .sizing.reset-size10.size9 {
font-size: .83317261em
}
.katex .fontsize-ensurer.reset-size10.size10,
.katex .sizing.reset-size10.size10 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size10.size11,
.katex .sizing.reset-size10.size11 {
font-size: 1.19961427em
}
.katex .fontsize-ensurer.reset-size11.size1,
.katex .sizing.reset-size11.size1 {
font-size: .20096463em
}
.katex .fontsize-ensurer.reset-size11.size2,
.katex .sizing.reset-size11.size2 {
font-size: .24115756em
}
.katex .fontsize-ensurer.reset-size11.size3,
.katex .sizing.reset-size11.size3 {
font-size: .28135048em
}
.katex .fontsize-ensurer.reset-size11.size4,
.katex .sizing.reset-size11.size4 {
font-size: .32154341em
}
.katex .fontsize-ensurer.reset-size11.size5,
.katex .sizing.reset-size11.size5 {
font-size: .36173633em
}
.katex .fontsize-ensurer.reset-size11.size6,
.katex .sizing.reset-size11.size6 {
font-size: .40192926em
}
.katex .fontsize-ensurer.reset-size11.size7,
.katex .sizing.reset-size11.size7 {
font-size: .48231511em
}
.katex .fontsize-ensurer.reset-size11.size8,
.katex .sizing.reset-size11.size8 {
font-size: .57877814em
}
.katex .fontsize-ensurer.reset-size11.size9,
.katex .sizing.reset-size11.size9 {
font-size: .69453376em
}
.katex .fontsize-ensurer.reset-size11.size10,
.katex .sizing.reset-size11.size10 {
font-size: .83360129em
}
.katex .fontsize-ensurer.reset-size11.size11,
.katex .sizing.reset-size11.size11 {
font-size: 1em
}
.katex .delimsizing.size1 {
font-family: KaTeX_Size1
}
.katex .delimsizing.size2 {
font-family: KaTeX_Size2
}
.katex .delimsizing.size3 {
font-family: KaTeX_Size3
}
.katex .delimsizing.size4 {
font-family: KaTeX_Size4
}
.katex .delimsizing.mult .delim-size1>span {
font-family: KaTeX_Size1
}
.katex .delimsizing.mult .delim-size4>span {
font-family: KaTeX_Size4
}
.katex .nulldelimiter {
display: inline-block;
width: .12em
}
.katex .delimcenter,
.katex .op-symbol {
position: relative
}
.katex .op-symbol.small-op {
font-family: KaTeX_Size1
}
.katex .op-symbol.large-op {
font-family: KaTeX_Size2
}
.katex .accent>.vlist-t,
.katex .op-limits>.vlist-t {
text-align: center
}
.katex .accent .accent-body {
position: relative
}
.katex .accent .accent-body:not(.accent-full) {
width: 0
}
.katex .overlay {
display: block
}
.katex .mtable .vertical-separator {
display: inline-block;
min-width: 1px
}
.katex .mtable .arraycolsep {
display: inline-block
}
.katex .mtable .col-align-c>.vlist-t {
text-align: center
}
.katex .mtable .col-align-l>.vlist-t {
text-align: left
}
.katex .mtable .col-align-r>.vlist-t {
text-align: right
}
.katex .svg-align {
text-align: left
}
.katex svg {
fill: currentcolor;
stroke: currentcolor;
fill-rule: nonzero;
fill-opacity: 1;
stroke-width: 1;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
display: block;
height: inherit;
position: absolute;
width: 100%
}
.katex svg path {
stroke: none
}
.katex img {
border-style: none;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0
}
.katex .stretchy {
display: block;
overflow: hidden;
position: relative;
width: 100%
}
.katex .stretchy:after,
.katex .stretchy:before {
content: ""
}
.katex .hide-tail {
overflow: hidden;
position: relative;
width: 100%
}
.katex .halfarrow-left {
left: 0;
overflow: hidden;
position: absolute;
width: 50.2%
}
.katex .halfarrow-right {
overflow: hidden;
position: absolute;
right: 0;
width: 50.2%
}
.katex .brace-left {
left: 0;
overflow: hidden;
position: absolute;
width: 25.1%
}
.katex .brace-center {
left: 25%;
overflow: hidden;
position: absolute;
width: 50%
}
.katex .brace-right {
overflow: hidden;
position: absolute;
right: 0;
width: 25.1%
}
.katex .x-arrow-pad {
padding: 0 .5em
}
.katex .cd-arrow-pad {
padding: 0 .55556em 0 .27778em
}
.katex .mover,
.katex .munder,
.katex .x-arrow {
text-align: center
}
.katex .boxpad {
padding: 0 .3em
}
.katex .fbox,
.katex .fcolorbox {
border: .04em solid;
box-sizing: border-box
}
.katex .cancel-pad {
padding: 0 .2em
}
.katex .cancel-lap {
margin-left: -.2em;
margin-right: -.2em
}
.katex .sout {
border-bottom-style: solid;
border-bottom-width: .08em
}
.katex .angl {
border-right: .049em solid;
border-top: .049em solid;
box-sizing: border-box;
margin-right: .03889em
}
.katex .anglpad {
padding: 0 .03889em
}
.katex .eqn-num:before {
content: "(" counter(katexEqnNo) ")";
counter-increment: katexEqnNo
}
.katex .mml-eqn-num:before {
content: "(" counter(mmlEqnNo) ")";
counter-increment: mmlEqnNo
}
.katex .mtr-glue {
width: 50%
}
.katex .cd-vert-arrow {
display: inline-block;
position: relative
}
.katex .cd-label-left {
display: inline-block;
position: absolute;
right: calc(50% + .3em);
text-align: left
}
.katex .cd-label-right {
display: inline-block;
left: calc(50% + .3em);
position: absolute;
text-align: right
}
.katex-display {
display: block;
margin: 1em 0;
text-align: center
}
.katex-display>.katex {
display: block;
text-align: center;
white-space: nowrap
}
.katex-display>.katex>.katex-html {
display: block;
position: relative
}
.katex-display>.katex>.katex-html>.tag {
position: absolute;
right: 0
}
.katex-display.leqno>.katex>.katex-html>.tag {
left: 0;
right: auto
}
.katex-display.fleqn>.katex {
padding-left: 2em;
text-align: left
}
body {
counter-reset: katexEqnNo mmlEqnNo
}
</style>
<div class="flex flex-grow flex-col gap-3"><div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap"><div class="markdown prose w-full break-words dark:prose-invert light"><p><b>Introduction:</b></p><p>Data synchronization is the process of maintaining consistent and accurate data across multiple systems or devices. In modern software systems, data synchronization has become increasingly important due to the proliferation of data and the need to ensure that information is accurate and up-to-date. In today's world, businesses and organizations rely heavily on data to make informed decisions, and any inaccuracies or inconsistencies in that data can lead to serious consequences.<br /><br /><a href="https://github.com/salah306/utilities/blob/main/DataSyncService.cs" target="_blank"> Code Example </a></p><p>Importance of Data Synchronization:</p><p>Data synchronization is critical in modern software systems for several reasons:</p><ol><li><p>Data Consistency: In any system where data is used across multiple devices or platforms, ensuring data consistency is essential. Data synchronization ensures that any changes made to the data in one system are automatically reflected in all other systems, ensuring that all users have access to the most up-to-date and accurate information.</p></li><li><p>Improved Productivity: When data is synchronized across all systems, it reduces the need for manual data entry, which can be time-consuming and prone to errors. This can improve overall productivity by freeing up time for employees to focus on other tasks.</p></li><li><p>Enhanced Collaboration: Data synchronization allows for improved collaboration between team members, regardless of their location. With synchronized data, team members can work together in real-time, sharing information and making decisions based on the most up-to-date information available.</p></li><li><p>Disaster Recovery: In the event of a system failure or data loss, data synchronization can be used to quickly restore data from a backup, reducing the impact of any downtime and minimizing the risk of data loss.</p></li></ol><p>In conclusion, data synchronization is a crucial component of modern software systems. It ensures data consistency, improves productivity, enhances collaboration, and enables efficient disaster recovery. As businesses and organizations continue to rely on data to make informed decisions, data synchronization will become increasingly important in ensuring that that data is accurate, up-to-date, and readily available.</p></div></div></div><div class="flex flex-grow flex-col gap-3"><div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap"><div class="markdown prose w-full break-words dark:prose-invert light"><p>Data synchronization is the process of ensuring that data is consistent and up-to-date across multiple systems or databases. In many software applications, data is stored in multiple databases, and it is essential to ensure that changes made to the data in one database are propagated to all the other databases in a timely and accurate manner. This is where the dataSync service comes in handy.</p><p>The dataSync service uses a combination of SQL queries and bulk copy operations to synchronize data between the two databases. It first retrieves the data from the source database using a SELECT statement and applies any filters and sorting rules specified by the user. The service then compares the data with the destination database to identify any changes or additions. It filters out any data that already exists in the destination database and applies any updates or additions to the destination database using bulk copy operations.</p><p>Overall, the dataSync service offers a reliable and efficient way to synchronize data between two databases in limited scenarios. It helps to ensure that data is consistent and up-to-date across multiple systems, which is essential for modern software applications.</p></div></div></div>
<div class="flex flex-grow flex-col gap-3"><div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap"><div class="markdown prose w-full break-words dark:prose-invert light"><p><br /><a href="https://github.com/salah306/utilities/blob/main/DataSyncService.cs" target="_blank">Code Example</a> <br /> SyncTable method:</p><ol><li>The method is declared with several input parameters that define the source and destination databases, table, and other settings.</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-csharp"><span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">async</span> Task <span class="hljs-title">SyncTable</span>(<span class="hljs-params"><span class="hljs-built_in">string</span> connectionString, <span class="hljs-built_in">string</span> destinationConnectionString, <span class="hljs-built_in">string</span> tableName, <span class="hljs-built_in">string</span> schema, Func<<span class="hljs-built_in">dynamic</span>, <span class="hljs-built_in">bool</span>> filterExpression = <span class="hljs-literal">null</span>, List<<span class="hljs-built_in">string</span>> columns = <span class="hljs-literal">null</span>, <span class="hljs-built_in">bool</span> bulkInsert = <span class="hljs-literal">true</span> , <span class="hljs-built_in">string</span> whereClause = <span class="hljs-literal">null</span>, <span class="hljs-built_in">string</span> orderByClause = <span class="hljs-literal">null</span>, <span class="hljs-built_in">int</span>? top = <span class="hljs-literal">null</span></span>)
</span></code></div></div></pre><ol start="2"><li>Inside the method, two SqlConnection objects are created for the source and destination databases.</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-java">using <span class="hljs-type">SqlConnection</span> <span class="hljs-variable">sourceConnection</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">SqlConnection</span>(connectionString);
using <span class="hljs-type">SqlConnection</span> <span class="hljs-variable">destinationConnection</span> <span class="hljs-operator">=</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">SqlConnection</span>(destinationConnectionString);
</code></div></div></pre><ol start="3"><li>The next step is to get the matched columns from the source and destination databases, as well as the primary key columns for the destination table.</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-scss">string<span class="hljs-selector-attr">[]</span> sourceColumns = await <span class="hljs-built_in">GetMatchedColumns</span>(sourceConnection, null, tableName, schema) ?? Array<span class="hljs-selector-class">.Empty</span><string>();
string<span class="hljs-selector-attr">[]</span> destinationColumns = await <span class="hljs-built_in">GetMatchedColumns</span>(destinationConnection, sourceColumns, tableName, schema) ?? Array<span class="hljs-selector-class">.Empty</span><string>();
IEnumerable<string> primaryKeyColumns = <span class="hljs-attribute">columns</span> ?? await <span class="hljs-built_in">GetPrimaryKeyColumns</span>(destinationConnection, tableName, schema);
</code></div></div></pre><ol start="4"><li>A SELECT statement is built using the source table and columns, as well as any additional filter expressions, sorting, or limit settings specified in the input parameters.</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-css"><span class="hljs-selector-tag">var</span> selectCommand = BuildSelectCommand(sourceColumns, tableName, schema , whereClause , orderByClause , <span class="hljs-attribute">top</span> , primaryKeyColumns);
</code></div></div></pre><ol start="5"><li>If a filter expression is provided, it is appended to the SELECT statement.</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-csharp"><span class="hljs-keyword">if</span> (filterExpression != <span class="hljs-literal">null</span>)
{
selectCommand += <span class="hljs-string">$" WHERE <span class="hljs-subst">{filterExpression.Method.Name}</span>()"</span>;
}
</code></div></div></pre><ol start="6"><li>The SELECT statement is executed against the source database, and the resulting entities are stored in a List.</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-swift"><span class="hljs-type">List</span><<span class="hljs-keyword">dynamic</span>> sourceEntities <span class="hljs-operator">=</span> (<span class="hljs-keyword">await</span> sourceConnection.<span class="hljs-type">QueryAsync</span><<span class="hljs-keyword">dynamic</span>>(selectCommand)).<span class="hljs-type">ToList</span>();
</code></div></div></pre><ol start="7"><li>If there are no entities returned from the SELECT statement, the method returns without further action.</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-kotlin"><span class="hljs-keyword">if</span> (!(sourceEntities?.Any() ?? <span class="hljs-literal">false</span>))
{
<span class="hljs-keyword">return</span>;
}
</code></div></div></pre><ol start="8"><li>The existing primary key values for the destination table are retrieved and stored in a List.</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-csharp"><span class="hljs-keyword">var</span> existingDestinationIds = <span class="hljs-keyword">await</span> destinationConnection.QueryAsync<<span class="hljs-built_in">dynamic</span>>(<span class="hljs-string">$"SELECT <span class="hljs-subst">{<span class="hljs-built_in">string</span>.Join(<span class="hljs-string">", "</span>, primaryKeyColumns)}</span> FROM <span class="hljs-subst">{schema}</span>.<span class="hljs-subst">{tableName}</span>"</span>);
<span class="hljs-keyword">var</span> existingDestinationKeys = existingDestinationIds.ToList();
</code></div></div></pre><ol start="9"><li>The source entities are filtered to remove any that already exist in the destination table, based on matching primary key values.</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-typescript"><span class="hljs-keyword">var</span> filteredSourceEntities = sourceEntities.<span class="hljs-title class_">Where</span>(<span class="hljs-function"><span class="hljs-params">x</span> =></span>
{
<span class="hljs-keyword">var</span> xDict = x <span class="hljs-keyword">as</span> <span class="hljs-title class_">IDictionary</span><<span class="hljs-built_in">string</span>, <span class="hljs-built_in">object</span>>;
<span class="hljs-keyword">return</span> xDict != <span class="hljs-literal">null</span> && !existingDestinationKeys.<span class="hljs-title class_">Any</span>(<span class="hljs-function"><span class="hljs-params">y</span> =></span>
{
<span class="hljs-keyword">var</span> yDict = y <span class="hljs-keyword">as</span> <span class="hljs-title class_">IDictionary</span><<span class="hljs-built_in">string</span>, <span class="hljs-built_in">object</span>>;
<span class="hljs-keyword">return</span> yDict != <span class="hljs-literal">null</span> && primaryKeyColumns.<span class="hljs-title class_">All</span>(<span class="hljs-function"><span class="hljs-params">k</span> =></span> xDict[k].<span class="hljs-title class_">Equals</span>(yDict[k]));
});
}).<span class="hljs-title class_">ToList</span>();
</code></div></div></pre><ol start="10"><li>If there are any filtered source entities remaining, they are either bulk copied to the destination table using SqlBulkCopy, or inserted one at a time, depending on the input parameter settings.</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-scss">if (filteredSourceEntities?.Any() ?? false)
{
if (bulkInsert)
{
SqlBulkCopy sqlBulkCopy = await <span class="hljs-built_in">BulkCopyAsync</span>(tableName, schema, destinationConnectionString, destinationConnection, sourceColumns, destinationColumns, filteredSourceEntities);
}
else
{
await <span class="hljs-built_in">CopyOneByOneAsync</span>(tableName, schema, destinationConnection, destinationColumns, filteredSourceEntities);
}
}</code></div></div></pre></div></div></div>
<div class="flex flex-grow flex-col gap-3"><div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap"><div class="markdown prose w-full break-words dark:prose-invert light"><p>It's important to note that the code snippet provided is just an example of how data synchronization can be achieved using Dapper and bulk insert. Depending on your specific use case, there may be other ways to achieve data synchronization, such as using SQL's MERGE statement to update or insert records.</p><p>There are also other useful tools and references available for data synchronization, such as Microsoft's Sync Framework and third-party tools like SymmetricDS and Flyway. These tools offer additional functionality and can be used to synchronize data across multiple databases, servers, and platforms.</p><p>In conclusion, data synchronization is an essential component of modern software systems, and using a service like dataSync can help ensure smooth and error-free data transfer between databases. By understanding the key concepts and best practices of data synchronization, developers can build robust and reliable applications that meet the needs of their users.<br /><a href="https://github.com/salah306/utilities/blob/main/DataSyncService.cs" target="_blank">Code Example</a></p></div></div></div>Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-9894682574116127902023-02-18T23:27:00.002-08:002023-02-24T01:00:09.729-08:0010 Tips for debugging .NET applications with SQL Server<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7133854016810018"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-7133854016810018"
data-ad-slot="5700254903"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<p><span style="background-color: white;"> </span></p><ol style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #374151; counter-reset: item 0; display: flex; flex-direction: column; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; list-style-image: initial; list-style-position: initial; margin: 1.25em 0px; padding: 0px 0px 0px 1rem; white-space: pre-wrap;"><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px;"><span style="background-color: white;">Understand the application flow: Before you start debugging, make sure you understand the flow of the application and how it interacts with the SQL Server database. This will help you identify the parts of the code that might be causing issues.
</span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px;"><span style="background-color: white;">Check the SQL Server error log: If you're experiencing database-related issues, check the SQL Server error log for any error messages or warnings that might give you clues about what's going wrong.</span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px;"><span style="background-color: white;">Use SQL Server Profiler: SQL Server Profiler is a powerful tool that can help you capture and analyze the activity between your .NET application and the SQL Server database. Use it to identify queries that are taking a long time to execute, or to see what data is being returned by the database.</span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px;"><span style="background-color: white;">Monitor SQL Server performance counters: SQL Server provides a wide range of performance counters that can help you monitor the health of your database server. Use them to identify performance bottlenecks or to track changes in resource usage over time.</span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px;"><span style="background-color: white;">Use SQL Server Management Studio: SQL Server Management Studio is a powerful tool that can help you manage your SQL Server instances and databases. Use it to run queries, view server logs, and analyze performance data.</span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px;"><span style="background-color: white;">Use the Visual Studio debugger: The Visual Studio debugger is an essential tool for debugging .NET applications. Use it to step through your code and identify where things might be going wrong.</span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px;"><span style="background-color: white;">Enable tracing in your .NET application: You can enable tracing in your .NET application to capture detailed information about what's happening at runtime. This can help you identify issues that might not be apparent from the code alone.</span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px;"><span style="background-color: white;">Check for exceptions: Make sure you're handling exceptions correctly in your .NET application. Unhandled exceptions can cause your application to crash, and they can also lead to issues with your SQL Server database.</span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px;"><span style="background-color: white;">Use the SQL Server Management Objects (SMO) API: The SMO API provides a way to programmatically manage SQL Server instances and databases. Use it to automate tasks, such as creating backups or managing users and permissions.</span></p></li><li style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px; padding-left: 0.375em;"><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; margin: 0px;"><span style="background-color: white;">Use a third-party tool: There are many third-party tools available that can help you debug .NET applications with SQL Server. These tools often provide additional functionality, such as performance profiling or advanced query analysis.</span></p></li></ol><p style="--tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-ring-color: rgba(59,130,246,0.5); --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-offset-width: 0px; --tw-ring-shadow: 0 0 transparent; --tw-rotate: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-skew-x: 0; --tw-skew-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; border: 0px solid rgb(217, 217, 227); box-sizing: border-box; color: #374151; font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; margin: 1.25em 0px 0px; white-space: pre-wrap;"><span style="background-color: white;">Remember that debugging can be a time-consuming and complex process. Be patient, take your time, and don't be afraid to ask for help if you're stuck.</span></p>Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-70214999185537095472023-02-18T22:47:00.004-08:002023-02-24T01:00:29.425-08:00A Beginner's Guide to Building RESTful APIs with .NET Core and SQL Server<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7133854016810018"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-7133854016810018"
data-ad-slot="5700254903"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<style>
hr {
border-top-width: 1px;
color: inherit;
height: 0
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit
}
a {
color: inherit;
text-decoration: inherit
}
b,
strong {
font-weight: bolder
}
code,
kbd,
pre,
samp {
font-family: Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -.25em
}
sup {
top: -.5em
}
table {
border-collapse: collapse;
border-color: inherit;
text-indent: 0
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font-family: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
margin: 0;
padding: 0
}
button,
select {
text-transform: none
}
[type=button],
[type=reset],
[type=submit],
button {
-webkit-appearance: button;
background-color: transparent;
background-image: none
}
:-moz-focusring {
outline: auto
}
:-moz-ui-invalid {
box-shadow: none
}
progress {
vertical-align: baseline
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
summary {
display: list-item
}
blockquote,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
margin: 0
}
fieldset,
legend {
padding: 0
}
menu,
ol,
ul {
list-style: none;
margin: 0;
padding: 0
}
textarea {
resize: vertical
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #acacbe
}
input::placeholder,
textarea::placeholder {
color: #acacbe
}
[role=button],
button {
cursor: pointer
}
:disabled {
cursor: default
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
display: block;
vertical-align: middle
}
img,
video {
height: auto;
max-width: 100%
}
[multiple],
[type=date],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
select,
textarea {
--tw-shadow: 0 0 transparent;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
border-color: #8e8ea0;
border-radius: 0;
border-width: 1px;
font-size: 1rem;
line-height: 1.5rem;
padding: .5rem .75rem
}
[multiple]:focus,
[type=date]:focus,
[type=datetime-local]:focus,
[type=email]:focus,
[type=month]:focus,
[type=number]:focus,
[type=password]:focus,
[type=search]:focus,
[type=tel]:focus,
[type=text]:focus,
[type=time]:focus,
[type=url]:focus,
[type=week]:focus,
select:focus,
textarea:focus {
--tw-ring-inset: var(--tw-empty,
/*!*/
/*!*/
);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
border-color: #2563eb;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
outline: 2px solid transparent;
outline-offset: 2px
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #8e8ea0;
opacity: 1
}
input::placeholder,
textarea::placeholder {
color: #8e8ea0;
opacity: 1
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0
}
::-webkit-date-and-time-value {
min-height: 1.5em
}
::-webkit-datetime-edit,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-meridiem-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-year-field {
padding-bottom: 0;
padding-top: 0
}
[multiple] {
background-image: none;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
background-size: initial;
padding-right: .75rem;
-webkit-print-color-adjust: inherit;
print-color-adjust: inherit
}
[type=checkbox],
[type=radio] {
--tw-shadow: 0 0 transparent;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-origin: border-box;
border-color: #8e8ea0;
border-width: 1px;
color: #2563eb;
display: inline-block;
flex-shrink: 0;
height: 1rem;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
-webkit-user-select: none;
user-select: none;
vertical-align: middle;
width: 1rem
}
[type=checkbox] {
border-radius: 0
}
[type=radio] {
border-radius: 100%
}
[type=checkbox]:focus,
[type=radio]:focus {
--tw-ring-inset: var(--tw-empty,
/*!*/
/*!*/
);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
outline: 2px solid transparent;
outline-offset: 2px
}
[type=checkbox]:checked,
[type=radio]:checked {
background-color: currentColor;
background-position: 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent
}
[type=checkbox]:checked {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E")
}
[type=radio]:checked {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")
}
[type=checkbox]:checked:focus,
[type=checkbox]:checked:hover,
[type=radio]:checked:focus,
[type=radio]:checked:hover {
background-color: currentColor;
border-color: transparent
}
[type=checkbox]:indeterminate {
background-color: currentColor;
background-position: 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent
}
[type=checkbox]:indeterminate:focus,
[type=checkbox]:indeterminate:hover {
background-color: currentColor;
border-color: transparent
}
[type=file] {
background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
background: initial;
border-color: inherit;
border-radius: 0;
border-width: 0;
font-size: inherit;
line-height: inherit;
padding: 0
}
[type=file]:focus {
outline: 1px solid ButtonText;
outline: 1px auto -webkit-focus-ring-color
}
h1 {
font-size: 1.875rem;
line-height: 2.25rem
}
h1,
h2,
h3 {
font-weight: 600
}
h2,
h3 {
font-size: 1.5rem;
line-height: 2rem
}
*,
:after,
:before {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, .5);
--tw-ring-offset-shadow: 0 0 transparent;
--tw-ring-shadow: 0 0 transparent;
--tw-shadow: 0 0 transparent;
--tw-shadow-colored: 0 0 transparent;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia:
}
::-webkit-backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, .5);
--tw-ring-offset-shadow: 0 0 transparent;
--tw-ring-shadow: 0 0 transparent;
--tw-shadow: 0 0 transparent;
--tw-shadow-colored: 0 0 transparent;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia:
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, .5);
--tw-ring-offset-shadow: 0 0 transparent;
--tw-ring-shadow: 0 0 transparent;
--tw-shadow: 0 0 transparent;
--tw-shadow-colored: 0 0 transparent;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia:
}
.prose {
color: var(--tw-prose-body);
max-width: 65ch
}
.prose :where([class~=lead]):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-bottom: 1.2em;
margin-top: 1.2em
}
.prose :where(a):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-links);
font-weight: 500;
text-decoration: underline
}
.prose :where(strong):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-bold);
font-weight: 600
}
.prose :where(a strong):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(blockquote strong):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(thead th strong):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(ol):not(:where([class~=not-prose] *)) {
list-style-type: decimal;
margin-bottom: 1.25em;
margin-top: 1.25em;
padding-left: 1.625em
}
.prose :where(ol[type=A]):not(:where([class~=not-prose] *)) {
list-style-type: upper-alpha
}
.prose :where(ol[type=a]):not(:where([class~=not-prose] *)) {
list-style-type: lower-alpha
}
.prose :where(ol[type=A s]):not(:where([class~=not-prose] *)) {
list-style-type: upper-alpha
}
.prose :where(ol[type=a s]):not(:where([class~=not-prose] *)) {
list-style-type: lower-alpha
}
.prose :where(ol[type=I]):not(:where([class~=not-prose] *)) {
list-style-type: upper-roman
}
.prose :where(ol[type=i]):not(:where([class~=not-prose] *)) {
list-style-type: lower-roman
}
.prose :where(ol[type=I s]):not(:where([class~=not-prose] *)) {
list-style-type: upper-roman
}
.prose :where(ol[type=i s]):not(:where([class~=not-prose] *)) {
list-style-type: lower-roman
}
.prose :where(ol[type="1"]):not(:where([class~=not-prose] *)) {
list-style-type: decimal
}
.prose :where(ul):not(:where([class~=not-prose] *)) {
list-style-type: disc;
margin-bottom: 1.25em;
margin-top: 1.25em;
padding-left: 1.625em
}
.prose :where(ol>li):not(:where([class~=not-prose] *))::marker {
color: var(--tw-prose-counters);
font-weight: 400
}
.prose :where(ul>li):not(:where([class~=not-prose] *))::marker {
color: var(--tw-prose-bullets)
}
.prose :where(hr):not(:where([class~=not-prose] *)) {
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-bottom: 3em;
margin-top: 3em
}
.prose :where(blockquote):not(:where([class~=not-prose] *)) {
border-left-color: var(--tw-prose-quote-borders);
border-left-width: .25rem;
color: var(--tw-prose-quotes);
font-style: italic;
font-style: normal;
font-weight: 500;
margin-bottom: 1.6em;
margin-top: 1.6em;
padding-left: 1em;
quotes: "\201C" "\201D" "\2018" "\2019"
}
.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose] *)):before {
content: open-quote
}
.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose] *)):after {
content: close-quote
}
.prose :where(h1):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-size: 2.25em;
font-weight: 800;
line-height: 1.1111111;
margin-bottom: .8888889em;
margin-top: 0
}
.prose :where(h1 strong):not(:where([class~=not-prose] *)) {
color: inherit;
font-weight: 900
}
.prose :where(h2):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-size: 1.5em;
font-weight: 700;
line-height: 1.3333333;
margin-bottom: 1em;
margin-top: 2em
}
.prose :where(h2 strong):not(:where([class~=not-prose] *)) {
color: inherit;
font-weight: 800
}
.prose :where(h3):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-size: 1.25em;
font-weight: 600;
line-height: 1.6;
margin-bottom: .6em;
margin-top: 1.6em
}
.prose :where(h3 strong):not(:where([class~=not-prose] *)) {
color: inherit;
font-weight: 700
}
.prose :where(h4):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
line-height: 1.5;
margin-bottom: .5em;
margin-top: 1.5em
}
.prose :where(h4 strong):not(:where([class~=not-prose] *)) {
color: inherit;
font-weight: 700
}
.prose :where(img):not(:where([class~=not-prose] *)) {
margin-bottom: 2em;
margin-top: 2em
}
.prose :where(figure>*):not(:where([class~=not-prose] *)) {
margin-bottom: 0;
margin-top: 0
}
.prose :where(figcaption):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-captions);
font-size: .875em;
line-height: 1.4285714;
margin-top: .8571429em
}
.prose :where(code):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-code);
font-size: .875em;
font-weight: 600
}
.prose :where(code):not(:where([class~=not-prose] *)):before {
content: "`"
}
.prose :where(code):not(:where([class~=not-prose] *)):after {
content: "`"
}
.prose :where(a code):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(h1 code):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(h2 code):not(:where([class~=not-prose] *)) {
color: inherit;
font-size: .875em
}
.prose :where(h3 code):not(:where([class~=not-prose] *)) {
color: inherit;
font-size: .9em
}
.prose :where(h4 code):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(blockquote code):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(thead th code):not(:where([class~=not-prose] *)) {
color: inherit
}
.prose :where(pre):not(:where([class~=not-prose] *)) {
background-color: transparent;
border-radius: .375rem;
color: currentColor;
font-size: .875em;
font-weight: 400;
line-height: 1.7142857;
margin: 0;
overflow-x: auto;
padding: 0
}
.prose :where(pre code):not(:where([class~=not-prose] *)) {
background-color: transparent;
border-radius: 0;
border-width: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
padding: 0
}
.prose :where(pre code):not(:where([class~=not-prose] *)):before {
content: none
}
.prose :where(pre code):not(:where([class~=not-prose] *)):after {
content: none
}
.prose :where(table):not(:where([class~=not-prose] *)) {
font-size: .875em;
line-height: 1.7142857;
margin-bottom: 2em;
margin-top: 2em;
table-layout: auto;
text-align: left;
width: 100%
}
.prose :where(thead):not(:where([class~=not-prose] *)) {
border-bottom-color: var(--tw-prose-th-borders);
border-bottom-width: 1px
}
.prose :where(thead th):not(:where([class~=not-prose] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
padding-bottom: .5714286em;
padding-left: .5714286em;
padding-right: .5714286em;
vertical-align: bottom
}
.prose :where(tbody tr):not(:where([class~=not-prose] *)) {
border-bottom-color: var(--tw-prose-td-borders);
border-bottom-width: 1px
}
.prose :where(tbody tr:last-child):not(:where([class~=not-prose] *)) {
border-bottom-width: 0
}
.prose :where(tbody td):not(:where([class~=not-prose] *)) {
vertical-align: baseline
}
.prose :where(tfoot):not(:where([class~=not-prose] *)) {
border-top-color: var(--tw-prose-th-borders);
border-top-width: 1px
}
.prose :where(tfoot td):not(:where([class~=not-prose] *)) {
vertical-align: top
}
.prose {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;
--tw-prose-hr: #e5e7eb;
--tw-prose-quotes: #111827;
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-body: #d1d5db;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #9ca3af;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #9ca3af;
--tw-prose-invert-bullets: #4b5563;
--tw-prose-invert-hr: #374151;
--tw-prose-invert-quotes: #f3f4f6;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgba(0, 0, 0, .5);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
font-size: 1rem;
line-height: 1.75
}
.prose :where(p):not(:where([class~=not-prose] *)) {
margin-bottom: 1.25em;
margin-top: 1.25em
}
.prose :where(video):not(:where([class~=not-prose] *)) {
margin-bottom: 2em;
margin-top: 2em
}
.prose :where(figure):not(:where([class~=not-prose] *)) {
margin-bottom: 2em;
margin-top: 2em
}
.prose :where(li):not(:where([class~=not-prose] *)) {
margin-bottom: .5em;
margin-top: .5em
}
.prose :where(ol>li):not(:where([class~=not-prose] *)) {
padding-left: .375em
}
.prose :where(ul>li):not(:where([class~=not-prose] *)) {
padding-left: .375em
}
.prose :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
margin-bottom: .75em;
margin-top: .75em
}
.prose :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.25em
}
.prose :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.25em
}
.prose :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=not-prose] *)) {
margin-bottom: .75em;
margin-top: .75em
}
.prose :where(hr+*):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h2+*):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h3+*):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose :where(h4+*):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose :where(thead th:first-child):not(:where([class~=not-prose] *)) {
padding-left: 0
}
.prose :where(thead th:last-child):not(:where([class~=not-prose] *)) {
padding-right: 0
}
.prose :where(tbody td, tfoot td):not(:where([class~=not-prose] *)) {
padding: .5714286em
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~=not-prose] *)) {
padding-left: 0
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~=not-prose] *)) {
padding-right: 0
}
.prose :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 0
}
.prose-sm :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
margin-bottom: .5714286em;
margin-top: .5714286em
}
.prose-sm :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.1428571em
}
.prose-sm :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.1428571em
}
.prose-sm :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.1428571em
}
.prose-sm :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.1428571em
}
.prose-sm :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose-sm :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 0
}
.prose-base :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
margin-bottom: .75em;
margin-top: .75em
}
.prose-base :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.25em
}
.prose-base :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose-base :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.25em
}
.prose-base :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.25em
}
.prose-base :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose-base :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 0
}
.prose-lg :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
margin-bottom: .8888889em;
margin-top: .8888889em
}
.prose-lg :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.3333333em
}
.prose-lg :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.3333333em
}
.prose-lg :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.3333333em
}
.prose-lg :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.3333333em
}
.prose-lg :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose-lg :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 0
}
.prose-xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
margin-bottom: .8em;
margin-top: .8em
}
.prose-xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.2em
}
.prose-xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.2em
}
.prose-xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.2em
}
.prose-xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.2em
}
.prose-xl :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose-xl :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 0
}
.prose-2xl :where(.prose>ul>li p):not(:where([class~=not-prose] *)) {
margin-bottom: .8333333em;
margin-top: .8333333em
}
.prose-2xl :where(.prose>ul>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.3333333em
}
.prose-2xl :where(.prose>ul>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.3333333em
}
.prose-2xl :where(.prose>ol>li>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 1.3333333em
}
.prose-2xl :where(.prose>ol>li>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 1.3333333em
}
.prose-2xl :where(.prose>:first-child):not(:where([class~=not-prose] *)) {
margin-top: 0
}
.prose-2xl :where(.prose>:last-child):not(:where([class~=not-prose] *)) {
margin-bottom: 0
}
.form-input,
.form-multiselect,
.form-select,
.form-textarea {
--tw-shadow: 0 0 transparent;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
border-color: #8e8ea0;
border-radius: 0;
border-width: 1px;
font-size: 1rem;
line-height: 1.5rem;
padding: .5rem .75rem
}
.form-input:focus,
.form-multiselect:focus,
.form-select:focus,
.form-textarea:focus {
--tw-ring-inset: var(--tw-empty,
/*!*/
/*!*/
);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
border-color: #2563eb;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
outline: 2px solid transparent;
outline-offset: 2px
}
.form-input::-webkit-input-placeholder,
.form-textarea::-webkit-input-placeholder {
color: #8e8ea0;
opacity: 1
}
.form-input::placeholder,
.form-textarea::placeholder {
color: #8e8ea0;
opacity: 1
}
.form-input::-webkit-datetime-edit-fields-wrapper {
padding: 0
}
.form-input::-webkit-date-and-time-value {
min-height: 1.5em
}
.form-input::-webkit-datetime-edit,
.form-input::-webkit-datetime-edit-day-field,
.form-input::-webkit-datetime-edit-hour-field,
.form-input::-webkit-datetime-edit-meridiem-field,
.form-input::-webkit-datetime-edit-millisecond-field,
.form-input::-webkit-datetime-edit-minute-field,
.form-input::-webkit-datetime-edit-month-field,
.form-input::-webkit-datetime-edit-second-field,
.form-input::-webkit-datetime-edit-year-field {
padding-bottom: 0;
padding-top: 0
}
.btn {
align-items: center;
border-color: transparent;
border-radius: .25rem;
border-width: 1px;
display: inline-flex;
font-size: .875rem;
line-height: 1.25rem;
padding: .5rem .75rem;
pointer-events: auto
}
.btn:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.btn:disabled {
cursor: not-allowed;
opacity: .5
}
.btn-primary {
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(16, 163, 127, var(--tw-bg-opacity));
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.btn-primary:hover {
--tw-bg-opacity: 1;
background-color: rgba(26, 127, 100, var(--tw-bg-opacity))
}
.btn-primary:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-offset-width: 2px;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.btn-primary.focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(25, 195, 125, var(--tw-ring-opacity))
}
.btn-primary:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(25, 195, 125, var(--tw-ring-opacity))
}
.btn-primary:disabled:hover {
--tw-bg-opacity: 1;
background-color: rgba(16, 163, 127, var(--tw-bg-opacity))
}
.btn-secondary {
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(224, 231, 255, var(--tw-bg-opacity));
color: rgba(67, 56, 202, var(--tw-text-opacity));
font-size: .875rem;
line-height: 1.25rem
}
.btn-secondary:hover {
--tw-bg-opacity: 1;
background-color: rgba(199, 210, 254, var(--tw-bg-opacity))
}
.btn-secondary:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-offset-width: 2px;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.btn-secondary.focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity))
}
.btn-secondary:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity))
}
.btn-neutral {
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
border-color: rgba(0, 0, 0, .1);
border-width: 1px;
color: rgba(64, 65, 79, var(--tw-text-opacity));
font-size: .875rem;
line-height: 1.25rem
}
.btn-neutral:hover {
--tw-bg-opacity: 1;
background-color: rgba(236, 236, 241, var(--tw-bg-opacity))
}
.btn-neutral:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-offset-width: 2px;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.btn-neutral.focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity))
}
.btn-neutral:focus-visible {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity))
}
.dark .btn-neutral {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
border-color: rgba(86, 88, 105, var(--tw-border-opacity));
color: rgba(217, 217, 227, var(--tw-text-opacity))
}
.dark .btn-neutral:hover {
--tw-bg-opacity: 1;
background-color: rgba(64, 65, 79, var(--tw-bg-opacity))
}
.btn-dark {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity));
border-color: rgba(86, 88, 105, var(--tw-border-opacity));
border-width: 1px;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.btn-dark:hover {
--tw-bg-opacity: 1;
background-color: rgba(64, 65, 79, var(--tw-bg-opacity))
}
.btn-small {
padding: .25rem .5rem
}
.sr-only {
clip: rect(0, 0, 0, 0);
border-width: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px
}
.pointer-events-none {
pointer-events: none
}
.pointer-events-auto {
pointer-events: auto
}
.visible {
visibility: visible
}
.invisible {
visibility: hidden
}
.static {
position: static
}
.fixed {
position: fixed
}
.absolute {
position: absolute
}
.relative {
position: relative
}
.sticky {
position: -webkit-sticky;
position: sticky
}
.\!sticky {
position: -webkit-sticky !important;
position: sticky !important
}
.inset-0 {
left: 0;
right: 0
}
.inset-0,
.inset-y-0 {
bottom: 0;
top: 0
}
.top-2 {
top: .5rem
}
.left-4 {
left: 1rem
}
.top-4 {
top: 1rem
}
.right-0 {
right: 0
}
.top-1\/2 {
top: 50%
}
.top-\[20px\] {
top: 20px
}
.top-0 {
top: 0
}
.bottom-0 {
bottom: 0
}
.left-0 {
left: 0
}
.right-4 {
right: 1rem
}
.right-1 {
right: .25rem
}
.left-1\/2 {
left: 50%
}
.bottom-1\.5 {
bottom: .375rem
}
.bottom-1 {
bottom: .25rem
}
.top-6 {
top: 1.5rem
}
.left-2 {
left: .5rem
}
.top-8 {
top: 2rem
}
.left-full {
left: 100%
}
.right-6 {
right: 1.5rem
}
.bottom-\[124px\] {
bottom: 124px
}
.top-1\.5 {
top: .375rem
}
.top-1 {
top: .25rem
}
.-bottom-1\.5 {
bottom: -.375rem
}
.-bottom-1 {
bottom: -.25rem
}
.z-10 {
z-index: 10
}
.z-50 {
z-index: 50
}
.z-40 {
z-index: 40
}
.z-20 {
z-index: 20
}
.-z-10 {
z-index: -10
}
.z-0 {
z-index: 0
}
.z-\[2\] {
z-index: 2
}
.z-\[60\] {
z-index: 60
}
.order-1 {
order: 1
}
.order-2 {
order: 2
}
.col-span-1 {
grid-column: span 1/span 1
}
.col-span-3 {
grid-column: span 3/span 3
}
.float-left {
float: left
}
.m-6 {
margin: 1.5rem
}
.m-auto {
margin: auto
}
.m-0 {
margin: 0
}
.m-1 {
margin: .25rem
}
.m-2 {
margin: .5rem
}
.mx-auto {
margin-left: auto;
margin-right: auto
}
.mx-1 {
margin-left: .25rem;
margin-right: .25rem
}
.\!my-0 {
margin-bottom: 0 !important;
margin-top: 0 !important
}
.mx-2 {
margin-left: .5rem;
margin-right: .5rem
}
.my-4 {
margin-bottom: 1rem;
margin-top: 1rem
}
.my-2 {
margin-bottom: .5rem;
margin-top: .5rem
}
.my-1 {
margin-bottom: .25rem;
margin-top: .25rem
}
.mx-3 {
margin-left: .75rem;
margin-right: .75rem
}
.mr-2 {
margin-right: .5rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-2 {
margin-bottom: .5rem
}
.mb-5 {
margin-bottom: 1.25rem
}
.mb-4 {
margin-bottom: 1rem
}
.-mr-2 {
margin-right: -.5rem
}
.mt-1 {
margin-top: .25rem
}
.ml-4 {
margin-left: 1rem
}
.-ml-4 {
margin-left: -1rem
}
.mt-2 {
margin-top: .5rem
}
.ml-auto {
margin-left: auto
}
.mr-0 {
margin-right: 0
}
.mt-3 {
margin-top: .75rem
}
.mr-4 {
margin-right: 1rem
}
.mt-5 {
margin-top: 1.25rem
}
.-mr-12 {
margin-right: -3rem
}
.ml-1 {
margin-left: .25rem
}
.-ml-0\.5 {
margin-left: -.125rem
}
.-mt-0\.5 {
margin-top: -.125rem
}
.-ml-0 {
margin-left: 0
}
.-mt-0 {
margin-top: 0
}
.ml-3 {
margin-left: .75rem
}
.mb-3 {
margin-bottom: .75rem
}
.ml-2 {
margin-left: .5rem
}
.mr-1 {
margin-right: .25rem
}
.mt-1\.5 {
margin-top: .375rem
}
.-ml-\[1px\] {
margin-left: -1px
}
.ml-6 {
margin-left: 1.5rem
}
.mt-4 {
margin-top: 1rem
}
.mb-1 {
margin-bottom: .25rem
}
.mr-auto {
margin-right: auto
}
.mb-10 {
margin-bottom: 2.5rem
}
.-ml-px {
margin-left: -1px
}
.ml-12 {
margin-left: 3rem
}
.\!mt-4 {
margin-top: 1rem !important
}
.\!mb-2 {
margin-bottom: .5rem !important
}
.mt-6 {
margin-top: 1.5rem
}
.mb-8 {
margin-bottom: 2rem
}
.block {
display: block
}
.inline-block {
display: inline-block
}
.inline {
display: inline
}
.flex {
display: flex
}
.inline-flex {
display: inline-flex
}
.table {
display: table
}
.grid {
display: grid
}
.contents {
display: contents
}
.hidden {
display: none
}
.h-full {
height: 100%
}
.h-screen {
height: 100vh
}
.h-\[30px\] {
height: 30px
}
.h-4 {
height: 1rem
}
.h-8 {
height: 2rem
}
.h-10 {
height: 2.5rem
}
.h-3 {
height: .75rem
}
.h-6 {
height: 1.5rem
}
.h-12 {
height: 3rem
}
.h-1 {
height: .25rem
}
.h-\[42px\] {
height: 42px
}
.h-5 {
height: 1.25rem
}
.h-7 {
height: 1.75rem
}
.h-32 {
height: 8rem
}
.h-2 {
height: .5rem
}
.h-\[1px\] {
height: 1px
}
.h-2\.5 {
height: .625rem
}
.h-24 {
height: 6rem
}
.\!h-24 {
height: 6rem !important
}
.h-\[37px\] {
height: 37px
}
.max-h-5 {
max-height: 1.25rem
}
.max-h-60 {
max-height: 15rem
}
.max-h-64 {
max-height: 16rem
}
.max-h-\[80vh\] {
max-height: 80vh
}
.min-h-screen {
min-height: 100vh
}
.min-h-\[20px\] {
min-height: 20px
}
.min-h-full {
min-height: 100%
}
.min-h-0 {
min-height: 0
}
.min-h-\[24px\] {
min-height: 24px
}
.min-h-\[71px\] {
min-height: 71px
}
.min-h-\[32px\] {
min-height: 32px
}
.w-full {
width: 100%
}
.w-\[30px\] {
width: 30px
}
.w-4 {
width: 1rem
}
.w-8 {
width: 2rem
}
.w-10 {
width: 2.5rem
}
.w-\[calc\(100\%-34px\)\] {
width: calc(100% - 34px)
}
.w-\[calc\(100\%-50px\)\] {
width: calc(100% - 50px)
}
.w-3 {
width: .75rem
}
.w-6 {
width: 1.5rem
}
.w-12 {
width: 3rem
}
.w-14 {
width: 3.5rem
}
.w-screen {
width: 100vw
}
.w-5 {
width: 1.25rem
}
.w-11 {
width: 2.75rem
}
.w-2 {
width: .5rem
}
.w-96 {
width: 24rem
}
.w-2\.5 {
width: .625rem
}
.\!w-24 {
width: 6rem !important
}
.max-w-lg {
max-width: 32rem
}
.max-w-md {
max-width: 28rem
}
.max-w-sm {
max-width: 24rem
}
.max-w-xl {
max-width: 36rem
}
.max-w-2xl {
max-width: 42rem
}
.max-w-xs {
max-width: 20rem
}
.max-w-7xl {
max-width: 80rem
}
.max-w-full {
max-width: 100%
}
.max-w-\[560px\] {
max-width: 560px
}
.max-w-prose {
max-width: 65ch
}
.max-w-5xl {
max-width: 64rem
}
.flex-1 {
flex: 1 1 0%
}
.flex-shrink-0 {
flex-shrink: 0
}
.flex-shrink {
flex-shrink: 1
}
.shrink-0 {
flex-shrink: 0
}
.shrink {
flex-shrink: 1
}
.flex-grow {
flex-grow: 1
}
.flex-grow-0 {
flex-grow: 0
}
.grow {
flex-grow: 1
}
.-translate-y-1\/2 {
--tw-translate-y: -50%
}
.-translate-y-1\/2,
.translate-y-\[calc\(100\%-71px\)\] {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-\[calc\(100\%-71px\)\] {
--tw-translate-y: calc(100% - 71px)
}
.-translate-x-full {
--tw-translate-x: -100%
}
.-translate-x-full,
.translate-y-4 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-y-4 {
--tw-translate-y: 1rem
}
.translate-y-0 {
--tw-translate-y: 0px
}
.translate-x-0,
.translate-y-0 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-0 {
--tw-translate-x: 0px
}
.translate-y-1 {
--tw-translate-y: 0.25rem
}
.-translate-x-1\/2,
.translate-y-1 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-x-1\/2 {
--tw-translate-x: -50%
}
.translate-x-1 {
--tw-translate-x: 0.25rem
}
.-translate-y-full,
.translate-x-1 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.-translate-y-full {
--tw-translate-y: -100%
}
.translate-x-full {
--tw-translate-x: 100%
}
.translate-x-5,
.translate-x-full {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.translate-x-5 {
--tw-translate-x: 1.25rem
}
.translate-x-4 {
--tw-translate-x: 1rem
}
.rotate-180,
.translate-x-4 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-180 {
--tw-rotate: 180deg
}
.-rotate-180 {
--tw-rotate: -180deg
}
.-rotate-180,
.transform {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
.animate-spin {
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite
}
@-webkit-keyframes pulse {
50% {
opacity: .5
}
}
@keyframes pulse {
50% {
opacity: .5
}
}
.animate-pulse {
-webkit-animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}
.cursor-not-allowed {
cursor: not-allowed
}
.cursor-pointer {
cursor: pointer
}
.cursor-default {
cursor: default
}
.select-none {
-webkit-user-select: none;
user-select: none
}
.resize-none {
resize: none
}
.resize {
resize: both
}
.appearance-none {
-webkit-appearance: none;
appearance: none
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.flex-row {
flex-direction: row
}
.flex-col {
flex-direction: column
}
.flex-col-reverse {
flex-direction: column-reverse
}
.items-start {
align-items: flex-start
}
.items-end {
align-items: flex-end
}
.items-center {
align-items: center
}
.items-stretch {
align-items: stretch
}
.justify-start {
justify-content: flex-start
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.gap-3 {
gap: .75rem
}
.gap-1 {
gap: .25rem
}
.gap-2 {
gap: .5rem
}
.gap-4 {
gap: 1rem
}
.gap-6 {
gap: 1.5rem
}
.gap-0 {
gap: 0
}
.gap-3\.5 {
gap: .875rem
}
.gap-1\.5 {
gap: .375rem
}
.space-x-1\.5>:not([hidden])~:not([hidden]) {
--tw-space-x-reverse: 0;
margin-left: calc(.375rem*(1 - var(--tw-space-x-reverse)));
margin-right: calc(.375rem*var(--tw-space-x-reverse))
}
.space-x-1>:not([hidden])~:not([hidden]) {
--tw-space-x-reverse: 0;
margin-left: calc(.25rem*(1 - var(--tw-space-x-reverse)));
margin-right: calc(.25rem*var(--tw-space-x-reverse))
}
.space-y-1>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-bottom: calc(.25rem*var(--tw-space-y-reverse));
margin-top: calc(.25rem*(1 - var(--tw-space-y-reverse)))
}
.space-y-2>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-bottom: calc(.5rem*var(--tw-space-y-reverse));
margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)))
}
.space-y-3>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-bottom: calc(.75rem*var(--tw-space-y-reverse));
margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse)))
}
.space-x-5>:not([hidden])~:not([hidden]) {
--tw-space-x-reverse: 0;
margin-left: calc(1.25rem*(1 - var(--tw-space-x-reverse)));
margin-right: calc(1.25rem*var(--tw-space-x-reverse))
}
.space-y-12>:not([hidden])~:not([hidden]) {
--tw-space-y-reverse: 0;
margin-bottom: calc(3rem*var(--tw-space-y-reverse));
margin-top: calc(3rem*(1 - var(--tw-space-y-reverse)))
}
.self-start {
align-self: flex-start
}
.self-end {
align-self: flex-end
}
.self-center {
align-self: center
}
.self-stretch {
align-self: stretch
}
.overflow-auto {
overflow: auto
}
.overflow-hidden {
overflow: hidden
}
.overflow-y-auto {
overflow-y: auto
}
.truncate {
overflow: hidden;
white-space: nowrap
}
.text-ellipsis,
.truncate {
text-overflow: ellipsis
}
.\!whitespace-pre {
white-space: pre !important
}
.whitespace-pre-wrap {
white-space: pre-wrap
}
.break-words {
word-wrap: break-word
}
.break-all {
word-break: break-all
}
.rounded-md {
border-radius: .375rem
}
.rounded-sm {
border-radius: .125rem
}
.rounded-full {
border-radius: 9999px
}
.rounded-none {
border-radius: 0
}
.rounded-lg {
border-radius: .5rem
}
.\!rounded-none {
border-radius: 0 !important
}
.rounded {
border-radius: .25rem
}
.rounded-l-md {
border-bottom-left-radius: .375rem;
border-top-left-radius: .375rem
}
.rounded-r-md {
border-bottom-right-radius: .375rem;
border-top-right-radius: .375rem
}
.rounded-t-xl {
border-top-left-radius: .75rem;
border-top-right-radius: .75rem
}
.border {
border-width: 1px
}
.border-0 {
border-width: 0
}
.border-2 {
border-width: 2px
}
.border-y {
border-top-width: 1px
}
.border-b,
.border-y {
border-bottom-width: 1px
}
.border-l {
border-left-width: 1px
}
.border-t {
border-top-width: 1px
}
.border-l-4 {
border-left-width: 4px
}
.border-r-0 {
border-right-width: 0
}
.border-b-2 {
border-bottom-width: 2px
}
.border-none {
border-style: none
}
.border-white {
--tw-border-opacity: 1;
border-color: rgba(255, 255, 255, var(--tw-border-opacity))
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgba(197, 197, 210, var(--tw-border-opacity))
}
.border-black\/10 {
border-color: rgba(0, 0, 0, .1)
}
.border-white\/20 {
border-color: hsla(0, 0%, 100%, .2)
}
.border-indigo-400 {
--tw-border-opacity: 1;
border-color: rgba(129, 140, 248, var(--tw-border-opacity))
}
.border-gray-100 {
--tw-border-opacity: 1;
border-color: rgba(236, 236, 241, var(--tw-border-opacity))
}
.border-gray-200 {
--tw-border-opacity: 1;
border-color: rgba(217, 217, 227, var(--tw-border-opacity))
}
.border-transparent {
border-color: transparent
}
.border-black\/20 {
border-color: rgba(0, 0, 0, .2)
}
.border-green-500 {
--tw-border-opacity: 1;
border-color: rgba(25, 195, 125, var(--tw-border-opacity))
}
.border-orange-500 {
--tw-border-opacity: 1;
border-color: rgba(224, 108, 43, var(--tw-border-opacity))
}
.border-red-500 {
--tw-border-opacity: 1;
border-color: rgba(239, 68, 68, var(--tw-border-opacity))
}
.border-gray-500 {
--tw-border-opacity: 1;
border-color: rgba(142, 142, 160, var(--tw-border-opacity))
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgba(217, 217, 227, var(--tw-bg-opacity))
}
.bg-orange-500 {
--tw-bg-opacity: 1;
background-color: rgba(224, 108, 43, var(--tw-bg-opacity))
}
.bg-red-500 {
--tw-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--tw-bg-opacity))
}
.bg-\[\#5436DA\] {
--tw-bg-opacity: 1;
background-color: rgba(84, 54, 218, var(--tw-bg-opacity))
}
.bg-yellow-200 {
--tw-bg-opacity: 1;
background-color: rgba(250, 230, 158, var(--tw-bg-opacity))
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgba(0, 0, 0, var(--tw-bg-opacity))
}
.bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity))
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgba(247, 247, 248, var(--tw-bg-opacity))
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgba(236, 236, 241, var(--tw-bg-opacity))
}
.bg-transparent {
background-color: transparent
}
.bg-gray-500\/90 {
background-color: hsla(240, 9%, 59%, .9)
}
.bg-red-100 {
--tw-bg-opacity: 1;
background-color: rgba(254, 226, 226, var(--tw-bg-opacity))
}
.bg-yellow-100 {
--tw-bg-opacity: 1;
background-color: rgba(254, 249, 195, var(--tw-bg-opacity))
}
.bg-green-100 {
--tw-bg-opacity: 1;
background-color: rgba(210, 244, 211, var(--tw-bg-opacity))
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgba(32, 33, 35, var(--tw-bg-opacity))
}
.bg-gray-600 {
--tw-bg-opacity: 1;
background-color: rgba(86, 88, 105, var(--tw-bg-opacity))
}
.bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgba(142, 142, 160, var(--tw-bg-opacity))
}
.\!bg-white {
--tw-bg-opacity: 1 !important;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important
}
.bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgba(254, 202, 202, var(--tw-bg-opacity))
}
.\!bg-indigo-600 {
--tw-bg-opacity: 1 !important;
background-color: rgba(79, 70, 229, var(--tw-bg-opacity)) !important
}
.\!bg-gray-200 {
--tw-bg-opacity: 1 !important;
background-color: rgba(217, 217, 227, var(--tw-bg-opacity)) !important
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgba(25, 195, 125, var(--tw-bg-opacity))
}
.bg-orange-500\/10 {
background-color: rgba(224, 108, 43, .1)
}
.bg-red-500\/10 {
background-color: rgba(239, 68, 68, .1)
}
.bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgba(197, 197, 210, var(--tw-bg-opacity))
}
.bg-gray-400 {
--tw-bg-opacity: 1;
background-color: rgba(172, 172, 190, var(--tw-bg-opacity))
}
.bg-green-600 {
--tw-bg-opacity: 1;
background-color: rgba(16, 163, 127, var(--tw-bg-opacity))
}
.bg-green-700 {
--tw-bg-opacity: 1;
background-color: rgba(26, 127, 100, var(--tw-bg-opacity))
}
.bg-green-200 {
--tw-bg-opacity: 1;
background-color: rgba(185, 238, 188, var(--tw-bg-opacity))
}
.bg-opacity-75 {
--tw-bg-opacity: 0.75
}
.bg-gradient-to-l {
background-image: linear-gradient(to left, var(--tw-gradient-stops))
}
.from-gray-800 {
--tw-gradient-from: #343541;
--tw-gradient-to: rgba(52, 53, 65, 0);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.from-gray-900 {
--tw-gradient-from: #202123;
--tw-gradient-to: rgba(32, 33, 35, 0);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.bg-contain {
background-size: contain
}
.bg-center {
background-position: 50%
}
.bg-no-repeat {
background-repeat: no-repeat
}
.p-1 {
padding: .25rem
}
.p-6 {
padding: 1.5rem
}
.p-4 {
padding: 1rem
}
.p-2 {
padding: .5rem
}
.p-3 {
padding: .75rem
}
.p-0 {
padding: 0
}
.\!p-0 {
padding: 0 !important
}
.p-px {
padding: 1px
}
.px-2 {
padding-left: .5rem;
padding-right: .5rem
}
.py-1 {
padding-bottom: .25rem;
padding-top: .25rem
}
.py-0\.5 {
padding-bottom: .125rem;
padding-top: .125rem
}
.px-1\.5 {
padding-left: .375rem;
padding-right: .375rem
}
.py-0 {
padding-bottom: 0;
padding-top: 0
}
.px-1 {
padding-left: .25rem;
padding-right: .25rem
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.py-2 {
padding-bottom: .5rem;
padding-top: .5rem
}
.py-4 {
padding-bottom: 1rem;
padding-top: 1rem
}
.py-3 {
padding-bottom: .75rem;
padding-top: .75rem
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem
}
.\!py-0 {
padding-bottom: 0 !important;
padding-top: 0 !important
}
.py-8 {
padding-bottom: 2rem;
padding-top: 2rem
}
.py-10 {
padding-bottom: 2.5rem;
padding-top: 2.5rem
}
.py-2\.5 {
padding-bottom: .625rem;
padding-top: .625rem
}
.pt-24 {
padding-top: 6rem
}
.pb-8 {
padding-bottom: 2rem
}
.pt-20 {
padding-top: 5rem
}
.pt-2 {
padding-top: .5rem
}
.pr-14 {
padding-right: 3.5rem
}
.pr-6 {
padding-right: 1.5rem
}
.pt-5 {
padding-top: 1.25rem
}
.pb-4 {
padding-bottom: 1rem
}
.pl-1 {
padding-left: .25rem
}
.pt-1 {
padding-top: .25rem
}
.pb-1 {
padding-bottom: .25rem
}
.pl-2 {
padding-left: .5rem
}
.pr-7 {
padding-right: 1.75rem
}
.pl-3 {
padding-left: .75rem
}
.pr-10 {
padding-right: 2.5rem
}
.pr-2 {
padding-right: .5rem
}
.pr-9 {
padding-right: 2.25rem
}
.pr-4 {
padding-right: 1rem
}
.pl-10 {
padding-left: 2.5rem
}
.pb-3 {
padding-bottom: .75rem
}
.pr-5 {
padding-right: 1.25rem
}
.pr-1 {
padding-right: .25rem
}
.pb-6 {
padding-bottom: 1.5rem
}
.pt-3 {
padding-top: .75rem
}
.pb-2 {
padding-bottom: .5rem
}
.pt-4 {
padding-top: 1rem
}
.text-left {
text-align: left
}
.text-center {
text-align: center
}
.text-right {
text-align: right
}
.align-top {
vertical-align: top
}
.font-sans {
font-family: Söhne, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji
}
.font-mono {
font-family: Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace
}
.text-lg {
font-size: 1.125rem
}
.text-lg,
.text-xl {
line-height: 1.75rem
}
.text-xl {
font-size: 1.25rem
}
.text-xs {
font-size: .75rem;
line-height: 1rem
}
.text-\[10px\] {
font-size: 10px
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem
}
.text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.text-base {
font-size: 1rem;
line-height: 1.5rem
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.font-semibold {
font-weight: 600
}
.font-normal {
font-weight: 400
}
.font-bold {
font-weight: 700
}
.font-medium {
font-weight: 500
}
.uppercase {
text-transform: uppercase
}
.normal-case {
text-transform: none
}
.italic {
font-style: italic
}
.leading-6 {
line-height: 1.5rem
}
.leading-tight {
line-height: 1.25
}
.leading-5 {
line-height: 1.25rem
}
.tracking-widest {
letter-spacing: .1em
}
.text-red-500 {
--tw-text-opacity: 1;
color: rgba(239, 68, 68, var(--tw-text-opacity))
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgba(172, 172, 190, var(--tw-text-opacity))
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgba(142, 142, 160, var(--tw-text-opacity))
}
.text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.text-yellow-900 {
--tw-text-opacity: 1;
color: rgba(146, 114, 1, var(--tw-text-opacity))
}
.text-green-700 {
--tw-text-opacity: 1;
color: rgba(26, 127, 100, var(--tw-text-opacity))
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgba(52, 53, 65, var(--tw-text-opacity))
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgba(64, 65, 79, var(--tw-text-opacity))
}
.text-gray-200 {
--tw-text-opacity: 1;
color: rgba(217, 217, 227, var(--tw-text-opacity))
}
.text-gray-100 {
--tw-text-opacity: 1;
color: rgba(236, 236, 241, var(--tw-text-opacity))
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgba(197, 197, 210, var(--tw-text-opacity))
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgba(32, 33, 35, var(--tw-text-opacity))
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgba(86, 88, 105, var(--tw-text-opacity))
}
.text-red-600 {
--tw-text-opacity: 1;
color: rgba(220, 38, 38, var(--tw-text-opacity))
}
.text-yellow-700 {
--tw-text-opacity: 1;
color: rgba(161, 98, 7, var(--tw-text-opacity))
}
.text-indigo-500 {
--tw-text-opacity: 1;
color: rgba(99, 102, 241, var(--tw-text-opacity))
}
.text-red-800 {
--tw-text-opacity: 1;
color: rgba(153, 27, 27, var(--tw-text-opacity))
}
.text-black\/50 {
color: rgba(0, 0, 0, .5)
}
.text-indigo-600 {
--tw-text-opacity: 1;
color: rgba(79, 70, 229, var(--tw-text-opacity))
}
.text-yellow-400 {
--tw-text-opacity: 1;
color: rgba(255, 198, 87, var(--tw-text-opacity))
}
.text-red-300 {
--tw-text-opacity: 1;
color: rgba(252, 165, 165, var(--tw-text-opacity))
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgba(16, 163, 127, var(--tw-text-opacity))
}
.text-orange-500 {
--tw-text-opacity: 1;
color: rgba(224, 108, 43, var(--tw-text-opacity))
}
.text-blue-500 {
--tw-text-opacity: 1;
color: rgba(59, 130, 246, var(--tw-text-opacity))
}
.underline {
text-decoration-line: underline
}
.\!no-underline {
text-decoration-line: none !important
}
.placeholder-gray-500::-webkit-input-placeholder {
--tw-placeholder-opacity: 1;
color: rgba(142, 142, 160, var(--tw-placeholder-opacity))
}
.placeholder-gray-500::placeholder {
--tw-placeholder-opacity: 1;
color: rgba(142, 142, 160, var(--tw-placeholder-opacity))
}
.opacity-50 {
opacity: .5
}
.opacity-0 {
opacity: 0
}
.opacity-100 {
opacity: 1
}
.opacity-20 {
opacity: .2
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color)
}
.shadow-md,
.shadow-sm {
box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow)
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color)
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)
}
.shadow,
.shadow-xl {
box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow)
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color)
}
.shadow-\[0_0_10px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
--tw-shadow: 0 0 10px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 0 10px var(--tw-shadow-color)
}
.shadow-\[0_0_10px_rgba\(0\2c 0\2c 0\2c 0\.10\)\],
.shadow-lg {
box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow)
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color)
}
.shadow-indigo-400 {
--tw-shadow-color: #818cf8;
--tw-shadow: var(--tw-shadow-colored)
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px
}
.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)
}
.ring-0,
.ring-1 {
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.ring-0 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)
}
.ring-black {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(0, 0, 0, var(--tw-ring-opacity))
}
.ring-opacity-5 {
--tw-ring-opacity: 0.05
}
.filter {
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}
.filter-none {
-webkit-filter: none;
filter: none
}
.transition-transform {
transition-duration: .15s;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.transition {
transition-duration: .15s;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.transition-opacity {
transition-duration: .15s;
transition-property: opacity;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.transition-all {
transition-duration: .15s;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.transition-colors {
transition-duration: .15s;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.transition-width {
transition-duration: .15s;
transition-property: width;
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.duration-200 {
transition-duration: .2s
}
.duration-500 {
transition-duration: .5s
}
.duration-75 {
transition-duration: 75ms
}
.duration-300 {
transition-duration: .3s
}
.duration-150 {
transition-duration: .15s
}
.duration-100 {
transition-duration: .1s
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, .2, 1)
}
.ease-in {
transition-timing-function: cubic-bezier(.4, 0, 1, 1)
}
.ease-linear {
transition-timing-function: linear
}
.ease-in-out {
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
body,
html {
height: 100%
}
.dark body,
.dark html {
--tw-bg-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity))
}
#__next,
#root {
height: 100%
}
.markdown ol {
counter-reset: item
}
.markdown ul li {
display: block;
margin: 0;
position: relative
}
.markdown ul li:before {
content: "•";
font-size: .875rem;
line-height: 1.25rem;
margin-left: -1rem;
position: absolute
}
.markdown {
max-width: none
}
.markdown h1,
.markdown h2 {
font-weight: 600
}
.markdown h2 {
margin-bottom: 1rem;
margin-top: 2rem
}
.markdown h3 {
font-weight: 600
}
.markdown h3,
.markdown h4 {
margin-bottom: .5rem;
margin-top: 1rem
}
.markdown h4 {
font-weight: 400
}
.markdown h5 {
font-weight: 600
}
.markdown blockquote {
--tw-border-opacity: 1;
border-color: rgba(142, 142, 160, var(--tw-border-opacity));
border-left-width: 2px;
line-height: 1rem;
padding-left: 1rem
}
.markdown ol,
.markdown ul {
display: flex;
flex-direction: column;
padding-left: 1rem
}
.markdown ol li,
.markdown ol li>p,
.markdown ol ol,
.markdown ol ul,
.markdown ul li,
.markdown ul li>p,
.markdown ul ol,
.markdown ul ul {
margin: 0
}
.markdown table {
--tw-border-spacing-x: 0px;
--tw-border-spacing-y: 0px;
border-collapse: separate;
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
width: 100%
}
.markdown th {
background-color: rgba(236, 236, 241, .2);
border-bottom-width: 1px;
border-left-width: 1px;
border-top-width: 1px;
padding: .25rem .75rem
}
.markdown th:first-child {
border-top-left-radius: .375rem
}
.markdown th:last-child {
border-right-width: 1px;
border-top-right-radius: .375rem
}
.markdown td {
border-bottom-width: 1px;
border-left-width: 1px;
padding: .25rem .75rem
}
.markdown td:last-child {
border-right-width: 1px
}
.markdown tbody tr:last-child td:first-child {
border-bottom-left-radius: .375rem
}
.markdown tbody tr:last-child td:last-child {
border-bottom-right-radius: .375rem
}
.markdown a {
text-decoration-line: underline;
text-underline-offset: 2px
}
.conversation-item-time:before {
content: attr(data-time)
}
.tooltip-label:before {
content: attr(data-content)
}
button.scroll-convo {
display: none
}
@-webkit-keyframes blink {
to {
visibility: hidden
}
}
@keyframes blink {
to {
visibility: hidden
}
}
.animate-flash {
-webkit-animation: flash 2s steps(60, start);
animation: flash 2s steps(60, start)
}
@-webkit-keyframes flash {
0% {
background-color: hsla(0, 0%, 100%, .4)
}
}
@keyframes flash {
0% {
background-color: hsla(0, 0%, 100%, .4)
}
}
.result-streaming>:not(ol):not(ul):not(pre):last-child:after,
.result-streaming>ol:last-child li:last-child:after,
.result-streaming>pre:last-child code:after,
.result-streaming>ul:last-child li:last-child:after {
-webkit-animation: blink 1s steps(5, start) infinite;
animation: blink 1s steps(5, start) infinite;
content: "▋";
margin-left: .25rem;
vertical-align: baseline
}
@-webkit-keyframes toast-open {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes toast-open {
0% {
opacity: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%)
}
to {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@-webkit-keyframes toast-close {
0% {
opacity: 1
}
to {
opacity: 0
}
}
@keyframes toast-close {
0% {
opacity: 1
}
to {
opacity: 0
}
}
.toast-root {
align-items: center;
display: flex;
flex-direction: column;
height: 0;
transition: all .24s cubic-bezier(0, 0, .2, 1)
}
.toast-root[data-state=entered],
.toast-root[data-state=entering] {
-webkit-animation: toast-open .24s cubic-bezier(.175, .885, .32, 1.175) both;
animation: toast-open .24s cubic-bezier(.175, .885, .32, 1.175) both
}
.toast-root[data-state=exiting] {
-webkit-animation: toast-close .12s cubic-bezier(.4, 0, 1, 1) both;
animation: toast-close .12s cubic-bezier(.4, 0, 1, 1) both
}
.toast-root .alert-root {
box-shadow: 0 0 1px rgba(67, 90, 111, .3), 0 5px 8px -4px rgba(67, 90, 111, .3);
flex-shrink: 0;
pointer-events: all
}
.before\:visible:before {
content: var(--tw-content);
visibility: visible
}
.before\:absolute:before {
content: var(--tw-content);
position: absolute
}
.before\:-top-7:before {
content: var(--tw-content);
top: -1.75rem
}
.before\:top-0:before {
content: var(--tw-content);
top: 0
}
.before\:h-2:before {
content: var(--tw-content);
height: .5rem
}
.before\:w-2:before {
content: var(--tw-content);
width: .5rem
}
.before\:-translate-y-1\/2:before {
--tw-translate-y: -50%
}
.before\:-translate-x-1\/2:before,
.before\:-translate-y-1\/2:before {
content: var(--tw-content);
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.before\:-translate-x-1\/2:before {
--tw-translate-x: -50%
}
.before\:rotate-45:before {
--tw-rotate: 45deg;
content: var(--tw-content);
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.before\:border-b:before {
border-bottom-width: 1px;
content: var(--tw-content)
}
.before\:border-r:before {
border-right-width: 1px;
content: var(--tw-content)
}
.before\:border-black\/10:before {
border-color: rgba(0, 0, 0, .1);
content: var(--tw-content)
}
.before\:bg-gray-100:before {
--tw-bg-opacity: 1;
background-color: rgba(236, 236, 241, var(--tw-bg-opacity));
content: var(--tw-content)
}
.before\:content-\[\"\"\]:before {
--tw-content: "";
content: var(--tw-content)
}
.before\:content-\[\'\"\'\]:before {
--tw-content: '"';
content: var(--tw-content)
}
.after\:h-\[15px\]:after {
content: var(--tw-content);
height: 15px
}
.after\:w-\[1px\]:after {
content: var(--tw-content);
width: 1px
}
.after\:bg-gray-300:after {
--tw-bg-opacity: 1;
background-color: rgba(197, 197, 210, var(--tw-bg-opacity));
content: var(--tw-content)
}
.after\:content-\[\"\"\]:after {
--tw-content: "";
content: var(--tw-content)
}
.after\:content-\[\'\"\'\]:after {
--tw-content: '"';
content: var(--tw-content)
}
.last\:mb-2:last-child {
margin-bottom: .5rem
}
.last\:border-0:last-child {
border-width: 0
}
.last\:after\:bg-transparent:last-child:after {
background-color: transparent;
content: var(--tw-content)
}
.checked\:border-blue-600:checked {
--tw-border-opacity: 1;
border-color: rgba(37, 99, 235, var(--tw-border-opacity))
}
.checked\:bg-blue-600:checked {
--tw-bg-opacity: 1;
background-color: rgba(37, 99, 235, var(--tw-bg-opacity))
}
.focus-within\:z-10[focus-within] {
z-index: 10
}
.focus-within\:z-10:focus-within {
z-index: 10
}
.focus-within\:border-indigo-600[focus-within] {
--tw-border-opacity: 1;
border-color: rgba(79, 70, 229, var(--tw-border-opacity))
}
.focus-within\:border-indigo-600:focus-within {
--tw-border-opacity: 1;
border-color: rgba(79, 70, 229, var(--tw-border-opacity))
}
.focus-within\:ring-1[focus-within] {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.focus-within\:ring-1:focus-within {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.focus-within\:ring-indigo-600[focus-within] {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(79, 70, 229, var(--tw-ring-opacity))
}
.focus-within\:ring-indigo-600:focus-within {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(79, 70, 229, var(--tw-ring-opacity))
}
.hover\:bg-gray-50:hover {
--tw-bg-opacity: 1;
background-color: rgba(247, 247, 248, var(--tw-bg-opacity))
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgba(236, 236, 241, var(--tw-bg-opacity))
}
.hover\:bg-\[\#2A2B32\]:hover {
--tw-bg-opacity: 1;
background-color: rgba(42, 43, 50, var(--tw-bg-opacity))
}
.hover\:bg-gray-800:hover {
--tw-bg-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity))
}
.hover\:bg-gray-500\/10:hover {
background-color: hsla(240, 9%, 59%, .1)
}
.hover\:bg-white\/20:hover {
background-color: hsla(0, 0%, 100%, .2)
}
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
background-color: rgba(217, 217, 227, var(--tw-bg-opacity))
}
.hover\:bg-gray-300:hover {
--tw-bg-opacity: 1;
background-color: rgba(197, 197, 210, var(--tw-bg-opacity))
}
.hover\:bg-green-700:hover {
--tw-bg-opacity: 1;
background-color: rgba(26, 127, 100, var(--tw-bg-opacity))
}
.hover\:bg-green-900:hover {
--tw-bg-opacity: 1;
background-color: rgba(24, 61, 49, var(--tw-bg-opacity))
}
.hover\:pr-4:hover {
padding-right: 1rem
}
.hover\:pr-14:hover {
padding-right: 3.5rem
}
.hover\:text-gray-500:hover {
--tw-text-opacity: 1;
color: rgba(142, 142, 160, var(--tw-text-opacity))
}
.hover\:text-gray-700:hover {
--tw-text-opacity: 1;
color: rgba(64, 65, 79, var(--tw-text-opacity))
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.hover\:text-gray-900:hover {
--tw-text-opacity: 1;
color: rgba(32, 33, 35, var(--tw-text-opacity))
}
.hover\:opacity-80:hover {
opacity: .8
}
.hover\:opacity-75:hover {
opacity: .75
}
.focus\:z-10:focus {
z-index: 10
}
.focus\:border-green-500:focus {
--tw-border-opacity: 1;
border-color: rgba(25, 195, 125, var(--tw-border-opacity))
}
.focus\:border-indigo-500:focus {
--tw-border-opacity: 1;
border-color: rgba(99, 102, 241, var(--tw-border-opacity))
}
.focus\:border-green-600:focus {
--tw-border-opacity: 1;
border-color: rgba(16, 163, 127, var(--tw-border-opacity))
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px
}
.focus\:ring-0:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color)
}
.focus\:ring-0:focus,
.focus\:ring-2:focus {
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)
}
.focus\:ring-1:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.focus\:ring-inset:focus {
--tw-ring-inset: inset
}
.focus\:ring-green-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(25, 195, 125, var(--tw-ring-opacity))
}
.focus\:ring-indigo-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity))
}
.focus\:ring-white:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity))
}
.focus\:ring-green-600:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(16, 163, 127, var(--tw-ring-opacity))
}
.focus\:ring-gray-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(142, 142, 160, var(--tw-ring-opacity))
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px
}
.focus-visible\:ring-0.focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.focus-visible\:ring-0:focus-visible {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent;
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent)
}
.disabled\:bottom-0\.5:disabled {
bottom: .125rem
}
.disabled\:bottom-0:disabled {
bottom: 0
}
.disabled\:text-gray-300:disabled {
--tw-text-opacity: 1;
color: rgba(197, 197, 210, var(--tw-text-opacity))
}
.disabled\:hover\:bg-transparent:hover:disabled {
background-color: transparent
}
.group:hover .group-hover\:visible {
visibility: visible
}
.group:hover .group-hover\:from-\[\#2A2B32\] {
--tw-gradient-from: #2a2b32;
--tw-gradient-to: rgba(42, 43, 50, 0);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}
.group:hover .group-hover\:text-gray-500 {
--tw-text-opacity: 1;
color: rgba(142, 142, 160, var(--tw-text-opacity))
}
.group:hover .group-hover\:text-gray-700 {
--tw-text-opacity: 1;
color: rgba(64, 65, 79, var(--tw-text-opacity))
}
.dark .dark\:prose-invert {
--tw-prose-body: var(--tw-prose-invert-body);
--tw-prose-headings: var(--tw-prose-invert-headings);
--tw-prose-lead: var(--tw-prose-invert-lead);
--tw-prose-links: var(--tw-prose-invert-links);
--tw-prose-bold: var(--tw-prose-invert-bold);
--tw-prose-counters: var(--tw-prose-invert-counters);
--tw-prose-bullets: var(--tw-prose-invert-bullets);
--tw-prose-hr: var(--tw-prose-invert-hr);
--tw-prose-quotes: var(--tw-prose-invert-quotes);
--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
--tw-prose-captions: var(--tw-prose-invert-captions);
--tw-prose-code: var(--tw-prose-invert-code);
--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
--tw-prose-td-borders: var(--tw-prose-invert-td-borders)
}
.dark .dark\:border-gray-900\/50 {
border-color: rgba(32, 33, 35, .5)
}
.dark .dark\:border-white\/20 {
border-color: hsla(0, 0%, 100%, .2)
}
.dark .dark\:border-gray-700 {
--tw-border-opacity: 1;
border-color: rgba(64, 65, 79, var(--tw-border-opacity))
}
.dark .dark\:border-white\/10 {
border-color: hsla(0, 0%, 100%, .1)
}
.dark .dark\:border-black\/20 {
border-color: rgba(0, 0, 0, .2)
}
.dark .dark\:bg-\[\#444654\] {
--tw-bg-opacity: 1;
background-color: rgba(68, 70, 84, var(--tw-bg-opacity))
}
.dark .dark\:bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgba(52, 53, 65, var(--tw-bg-opacity))
}
.dark .dark\:bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgba(64, 65, 79, var(--tw-bg-opacity))
}
.dark .dark\:bg-gray-800\/90 {
background-color: rgba(52, 53, 65, .9)
}
.dark .dark\:bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgba(32, 33, 35, var(--tw-bg-opacity))
}
.dark .dark\:bg-transparent {
background-color: transparent
}
.dark .dark\:bg-white\/10 {
background-color: hsla(0, 0%, 100%, .1)
}
.dark .dark\:bg-white\/5 {
background-color: hsla(0, 0%, 100%, .05)
}
.dark .dark\:bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgba(142, 142, 160, var(--tw-bg-opacity))
}
.dark .dark\:bg-green-700 {
--tw-bg-opacity: 1;
background-color: rgba(26, 127, 100, var(--tw-bg-opacity))
}
.dark .dark\:text-gray-100 {
--tw-text-opacity: 1;
color: rgba(236, 236, 241, var(--tw-text-opacity))
}
.dark .dark\:text-gray-400 {
--tw-text-opacity: 1;
color: rgba(172, 172, 190, var(--tw-text-opacity))
}
.dark .dark\:text-gray-200 {
--tw-text-opacity: 1;
color: rgba(217, 217, 227, var(--tw-text-opacity))
}
.dark .dark\:text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.dark .dark\:text-gray-500 {
--tw-text-opacity: 1;
color: rgba(142, 142, 160, var(--tw-text-opacity))
}
.dark .dark\:text-white\/50 {
color: hsla(0, 0%, 100%, .5)
}
.dark .dark\:text-gray-600 {
--tw-text-opacity: 1;
color: rgba(86, 88, 105, var(--tw-text-opacity))
}
.dark .dark\:text-gray-300 {
--tw-text-opacity: 1;
color: rgba(197, 197, 210, var(--tw-text-opacity))
}
.dark .dark\:opacity-100 {
opacity: 1
}
.dark .dark\:shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.10\)\] {
--tw-shadow: 0 0 15px rgba(0, 0, 0, .1);
--tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
box-shadow: 0 0 transparent, 0 0 transparent, var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow)
}
.dark .dark\:ring-white\/20 {
--tw-ring-color: hsla(0, 0%, 100%, .2)
}
.dark .dark\:ring-gray-600 {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(86, 88, 105, var(--tw-ring-opacity))
}
.dark .dark\:last\:border-0:last-child {
border-width: 0
}
.dark .dark\:hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgba(64, 65, 79, var(--tw-bg-opacity))
}
.dark .dark\:hover\:bg-gray-900:hover {
--tw-bg-opacity: 1;
background-color: rgba(32, 33, 35, var(--tw-bg-opacity))
}
.dark .dark\:hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgba(236, 236, 241, var(--tw-bg-opacity))
}
.dark .dark\:hover\:bg-gray-500\/10:hover {
background-color: hsla(240, 9%, 59%, .1)
}
.dark .dark\:hover\:text-gray-200:hover {
--tw-text-opacity: 1;
color: rgba(217, 217, 227, var(--tw-text-opacity))
}
.dark .dark\:hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity))
}
.dark .dark\:hover\:text-gray-400:hover {
--tw-text-opacity: 1;
color: rgba(172, 172, 190, var(--tw-text-opacity))
}
.dark .dark\:focus\:border-white:focus {
--tw-border-opacity: 1;
border-color: rgba(255, 255, 255, var(--tw-border-opacity))
}
.dark .dark\:focus\:ring-white:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity))
}
.dark .dark\:disabled\:text-gray-400:disabled {
--tw-text-opacity: 1;
color: rgba(172, 172, 190, var(--tw-text-opacity))
}
.dark .dark\:disabled\:hover\:bg-transparent:hover:disabled {
background-color: transparent
}
.dark .disabled\:dark\:hover\:text-gray-400:hover:disabled {
--tw-text-opacity: 1;
color: rgba(172, 172, 190, var(--tw-text-opacity))
}
@media (min-width:640px) {
.sm\:absolute {
position: absolute
}
.sm\:order-2 {
order: 2
}
.sm\:order-1 {
order: 1
}
.sm\:col-start-2 {
grid-column-start: 2
}
.sm\:my-8 {
margin-bottom: 2rem;
margin-top: 2rem
}
.sm\:mt-0 {
margin-top: 0
}
.sm\:mt-4 {
margin-top: 1rem
}
.sm\:mb-16 {
margin-bottom: 4rem
}
.sm\:mt-\[20vh\] {
margin-top: 20vh
}
.sm\:mt-6 {
margin-top: 1.5rem
}
.sm\:flex {
display: flex
}
.sm\:h-10 {
height: 2.5rem
}
.sm\:w-auto {
width: auto
}
.sm\:w-full {
width: 100%
}
.sm\:w-10 {
width: 2.5rem
}
.sm\:max-w-sm {
max-width: 24rem
}
.sm\:max-w-lg {
max-width: 32rem
}
.sm\:max-w-xl {
max-width: 36rem
}
.sm\:max-w-2xl {
max-width: 42rem
}
.sm\:max-w-md {
max-width: 28rem
}
.sm\:translate-y-0 {
--tw-translate-y: 0px
}
.sm\:scale-95,
.sm\:translate-y-0 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.sm\:scale-95 {
--tw-scale-x: .95;
--tw-scale-y: .95
}
.sm\:scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.sm\:flex-row-reverse {
flex-direction: row-reverse
}
.sm\:items-center {
align-items: center
}
.sm\:gap-4 {
gap: 1rem
}
.sm\:gap-12 {
gap: 3rem
}
.sm\:border-t-0 {
border-top-width: 0
}
.sm\:border-r {
border-right-width: 1px
}
.sm\:p-0 {
padding: 0
}
.sm\:p-6 {
padding: 1.5rem
}
.sm\:p-4 {
padding: 1rem
}
.sm\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.sm\:px-0 {
padding-left: 0;
padding-right: 0
}
.sm\:pl-3 {
padding-left: .75rem
}
.sm\:pb-1 {
padding-bottom: .25rem
}
.sm\:pb-2 {
padding-bottom: .5rem
}
.sm\:text-left {
text-align: left
}
.sm\:text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.sm\:text-xs {
font-size: .75rem;
line-height: 1rem
}
.sm\:text-base {
font-size: 1rem;
line-height: 1.5rem
}
.sm\:text-\[40px\] {
font-size: 40px
}
.sm\:duration-300 {
transition-duration: .3s
}
.sm\:duration-500 {
transition-duration: .5s
}
}
@media (min-width:768px) {
.md\:invisible {
visibility: hidden
}
.md\:fixed {
position: fixed
}
.md\:inset-y-0 {
bottom: 0;
top: 0
}
.md\:bottom-2\.5 {
bottom: .625rem
}
.md\:right-2 {
right: .5rem
}
.md\:bottom-2 {
bottom: .5rem
}
.md\:bottom-\[120px\] {
bottom: 120px
}
.md\:m-auto {
margin: auto
}
.md\:mb-auto {
margin-bottom: auto
}
.md\:mb-2 {
margin-bottom: .5rem
}
.md\:mt-3 {
margin-top: .75rem
}
.md\:flex {
display: flex
}
.md\:hidden {
display: none
}
.md\:h-48 {
height: 12rem
}
.md\:h-full {
height: 100%
}
.md\:min-h-\[34px\] {
min-height: 34px
}
.md\:w-\[260px\] {
width: 260px
}
.md\:w-full {
width: 100%
}
.md\:w-1\/2 {
width: 50%
}
.md\:w-\[100\%\] {
width: 100%
}
.md\:w-auto {
width: auto
}
.md\:max-w-2xl {
max-width: 42rem
}
.md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.md\:flex-col {
flex-direction: column
}
.md\:gap-3 {
gap: .75rem
}
.md\:gap-6 {
gap: 1.5rem
}
.md\:gap-4 {
gap: 1rem
}
.md\:gap-2 {
gap: .5rem
}
.md\:border {
border-width: 1px
}
.md\:border-t-0 {
border-top-width: 0
}
.md\:border-transparent {
border-color: transparent
}
.md\:\!bg-transparent {
background-color: transparent !important
}
.md\:bg-vert-light-gradient {
background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 13.94%, #fff 54.73%)
}
.md\:py-6 {
padding-bottom: 1.5rem;
padding-top: 1.5rem
}
.md\:py-3 {
padding-bottom: .75rem;
padding-top: .75rem
}
.md\:px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.md\:py-4 {
padding-bottom: 1rem;
padding-top: 1rem
}
.md\:pl-0 {
padding-left: 0
}
.md\:pl-4 {
padding-left: 1rem
}
.md\:pl-\[260px\] {
padding-left: 260px
}
.md\:pt-3 {
padding-top: .75rem
}
.md\:pb-6 {
padding-bottom: 1.5rem
}
.md\:pb-5 {
padding-bottom: 1.25rem
}
.md\:text-justify {
text-align: justify
}
.md\:text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.md\:last\:mb-6:last-child {
margin-bottom: 1.5rem
}
.md\:disabled\:bottom-1:disabled {
bottom: .25rem
}
.group:hover .md\:group-hover\:visible {
visibility: visible
}
.dark .md\:dark\:border-transparent {
border-color: transparent
}
.dark .dark\:md\:bg-vert-dark-gradient {
background-image: linear-gradient(180deg, rgba(53, 55, 64, 0), #353740 58.85%)
}
}
@media (min-width:1024px) {
.lg\:absolute {
position: absolute
}
.lg\:relative {
position: relative
}
.lg\:top-0 {
top: 0
}
.lg\:right-0 {
right: 0
}
.lg\:mx-auto {
margin-left: auto;
margin-right: auto
}
.lg\:mt-0 {
margin-top: 0
}
.lg\:w-3\/5 {
width: 60%
}
.lg\:w-auto {
width: auto
}
.lg\:w-1\/2 {
width: 50%
}
.lg\:w-2\/3 {
width: 66.666667%
}
.lg\:w-\[calc\(100\%-20px\)\] {
width: calc(100% - 20px)
}
.lg\:w-\[calc\(100\%-115px\)\] {
width: calc(100% - 115px)
}
.lg\:w-1\/3 {
width: 33.333333%
}
.lg\:max-w-sm {
max-width: 24rem
}
.lg\:max-w-none {
max-width: none
}
.lg\:max-w-2xl {
max-width: 42rem
}
.lg\:max-w-3xl {
max-width: 48rem
}
.lg\:translate-y-0 {
--tw-translate-y: 0px
}
.lg\:translate-x-full,
.lg\:translate-y-0 {
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.lg\:translate-x-full {
--tw-translate-x: 100%
}
.lg\:gap-1 {
gap: .25rem
}
.lg\:self-center {
align-self: center
}
.lg\:rounded-lg {
border-radius: .5rem
}
.lg\:rounded-none {
border-radius: 0
}
.lg\:border {
border-width: 1px
}
.lg\:border-0 {
border-width: 0
}
.lg\:p-6 {
padding: 1.5rem
}
.lg\:p-0 {
padding: 0
}
.lg\:px-14 {
padding-left: 3.5rem;
padding-right: 3.5rem
}
.lg\:px-0 {
padding-left: 0;
padding-right: 0
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.lg\:pt-32 {
padding-top: 8rem
}
.lg\:pl-2 {
padding-left: .5rem
}
.lg\:pt-6 {
padding-top: 1.5rem
}
.lg\:text-left {
text-align: left
}
}
@media (min-width:1280px) {
.xl\:w-1\/4 {
width: 25%
}
.xl\:max-w-3xl {
max-width: 48rem
}
}
code,
pre {
font-family: Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace !important
}
code[class=language-plaintext] {
white-space: pre-line
}
code.hljs,
code[class*=language-],
pre[class*=language-] {
word-wrap: normal;
background: none;
color: #fff;
-webkit-hyphens: none;
hyphens: none;
line-height: 1.5;
tab-size: 4;
text-align: left;
white-space: pre;
word-break: normal;
word-spacing: normal
}
pre[class*=language-] {
border-radius: .3em;
overflow: auto
}
:not(pre)>code.hljs,
:not(pre)>code[class*=language-] {
border-radius: .3em;
padding: .1em;
white-space: normal
}
.hljs-comment {
color: hsla(0, 0%, 100%, .5)
}
.hljs-meta {
color: hsla(0, 0%, 100%, .6)
}
.hljs-built_in,
.hljs-class .hljs-title {
color: #e9950c
}
.hljs-doctag,
.hljs-formula,
.hljs-keyword,
.hljs-literal {
color: #2e95d3
}
.hljs-addition,
.hljs-attribute,
.hljs-meta-string,
.hljs-regexp,
.hljs-string {
color: #00a67d
}
.hljs-attr,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable {
color: #df3079
}
.hljs-bullet,
.hljs-link,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
color: #f22c3d
}
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: #a9aec1
}
.token.punctuation {
color: #fefefe
}
.token.constant,
.token.deleted,
.token.property,
.token.symbol,
.token.tag {
color: #ffa07a
}
.token.boolean,
.token.number {
color: #00e0e0
}
.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
color: #abe338
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url,
.token.variable {
color: #00e0e0
}
.token.atrule,
.token.attr-value,
.token.function {
color: gold
}
.token.keyword {
color: #00e0e0
}
.token.important,
.token.regex {
color: gold
}
.token.bold,
.token.important {
font-weight: 700
}
.token.italic {
font-style: italic
}
.token.entity {
cursor: help
}
@media screen and (-ms-high-contrast:active) {
code[class*=language-],
pre[class*=language-] {
background: window;
color: windowText
}
:not(pre)>code[class*=language-],
pre[class*=language-] {
background: window
}
.token.important {
background: highlight;
color: window;
font-weight: 400
}
.token.atrule,
.token.attr-value,
.token.function,
.token.keyword,
.token.operator,
.token.selector {
font-weight: 700
}
.token.attr-value,
.token.comment,
.token.doctype,
.token.function,
.token.keyword,
.token.operator,
.token.property,
.token.string {
color: highlight
}
.token.attr-value,
.token.url {
font-weight: 400
}
}
@font-face {
font-family: KaTeX_AMS;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_AMS-Regular.1608a09b.woff) format("woff")
}
@font-face {
font-family: KaTeX_Caligraphic;
font-style: normal;
font-weight: 700;
src: url(/_next/static/media/KaTeX_Caligraphic-Bold.b6770918.woff) format("woff")
}
@font-face {
font-family: KaTeX_Caligraphic;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Caligraphic-Regular.dad44a7f.woff) format("woff")
}
@font-face {
font-family: KaTeX_Fraktur;
font-style: normal;
font-weight: 700;
src: url(/_next/static/media/KaTeX_Fraktur-Bold.9f256b85.woff) format("woff")
}
@font-face {
font-family: KaTeX_Fraktur;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Fraktur-Regular.7c187121.woff) format("woff")
}
@font-face {
font-family: KaTeX_Main;
font-style: normal;
font-weight: 700;
src: url(/_next/static/media/KaTeX_Main-Bold.d181c465.woff) format("woff")
}
@font-face {
font-family: KaTeX_Main;
font-style: italic;
font-weight: 700;
src: url(/_next/static/media/KaTeX_Main-BoldItalic.e3f82f9d.woff) format("woff")
}
@font-face {
font-family: KaTeX_Main;
font-style: italic;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Main-Italic.9024d815.woff) format("woff")
}
@font-face {
font-family: KaTeX_Main;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Main-Regular.7f51fe03.woff) format("woff")
}
@font-face {
font-family: KaTeX_Math;
font-style: italic;
font-weight: 700;
src: url(/_next/static/media/KaTeX_Math-BoldItalic.f1035d8d.woff) format("woff")
}
@font-face {
font-family: KaTeX_Math;
font-style: italic;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Math-Italic.5295ba48.woff) format("woff")
}
@font-face {
font-family: "KaTeX_SansSerif";
font-style: normal;
font-weight: 700;
src: url(/_next/static/media/KaTeX_SansSerif-Bold.bf59d231.woff) format("woff")
}
@font-face {
font-family: "KaTeX_SansSerif";
font-style: italic;
font-weight: 400;
src: url(/_next/static/media/KaTeX_SansSerif-Italic.7c9bc82b.woff) format("woff")
}
@font-face {
font-family: "KaTeX_SansSerif";
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_SansSerif-Regular.74048478.woff) format("woff")
}
@font-face {
font-family: KaTeX_Script;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Script-Regular.07505710.woff) format("woff")
}
@font-face {
font-family: KaTeX_Size1;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Size1-Regular.e1e279cb.woff) format("woff")
}
@font-face {
font-family: KaTeX_Size2;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Size2-Regular.57727022.woff) format("woff")
}
@font-face {
font-family: KaTeX_Size3;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Size3-Regular.9acaf01c.woff) format("woff")
}
@font-face {
font-family: KaTeX_Size4;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Size4-Regular.7a996c9d.woff) format("woff")
}
@font-face {
font-family: KaTeX_Typewriter;
font-style: normal;
font-weight: 400;
src: url(/_next/static/media/KaTeX_Typewriter-Regular.6258592b.woff) format("woff")
}
.katex {
font: normal 1.21em KaTeX_Main, Times New Roman, serif;
line-height: 1.2;
text-indent: 0;
text-rendering: auto
}
.katex * {
-ms-high-contrast-adjust: none !important;
border-color: currentcolor
}
.katex .katex-version:after {
content: "0.16.0"
}
.katex .katex-mathml {
clip: rect(1px, 1px, 1px, 1px);
border: 0;
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.katex .katex-html>.newline {
display: block
}
.katex .base {
position: relative;
white-space: nowrap;
width: -webkit-min-content;
width: min-content
}
.katex .base,
.katex .strut {
display: inline-block
}
.katex .textbf {
font-weight: 700
}
.katex .textit {
font-style: italic
}
.katex .textrm {
font-family: KaTeX_Main
}
.katex .textsf {
font-family: "KaTeX_SansSerif"
}
.katex .texttt {
font-family: KaTeX_Typewriter
}
.katex .mathnormal {
font-family: KaTeX_Math;
font-style: italic
}
.katex .mathit {
font-family: KaTeX_Main;
font-style: italic
}
.katex .mathrm {
font-style: normal
}
.katex .mathbf {
font-family: KaTeX_Main;
font-weight: 700
}
.katex .boldsymbol {
font-family: KaTeX_Math;
font-style: italic;
font-weight: 700
}
.katex .amsrm,
.katex .mathbb,
.katex .textbb {
font-family: KaTeX_AMS
}
.katex .mathcal {
font-family: KaTeX_Caligraphic
}
.katex .mathfrak,
.katex .textfrak {
font-family: KaTeX_Fraktur
}
.katex .mathtt {
font-family: KaTeX_Typewriter
}
.katex .mathscr,
.katex .textscr {
font-family: KaTeX_Script
}
.katex .mathsf,
.katex .textsf {
font-family: "KaTeX_SansSerif"
}
.katex .mathboldsf,
.katex .textboldsf {
font-family: "KaTeX_SansSerif";
font-weight: 700
}
.katex .mathitsf,
.katex .textitsf {
font-family: "KaTeX_SansSerif";
font-style: italic
}
.katex .mainrm {
font-family: KaTeX_Main;
font-style: normal
}
.katex .vlist-t {
border-collapse: collapse;
display: inline-table;
table-layout: fixed
}
.katex .vlist-r {
display: table-row
}
.katex .vlist {
display: table-cell;
position: relative;
vertical-align: bottom
}
.katex .vlist>span {
display: block;
height: 0;
position: relative
}
.katex .vlist>span>span {
display: inline-block
}
.katex .vlist>span>.pstrut {
overflow: hidden;
width: 0
}
.katex .vlist-t2 {
margin-right: -2px
}
.katex .vlist-s {
display: table-cell;
font-size: 1px;
min-width: 2px;
vertical-align: bottom;
width: 2px
}
.katex .vbox {
align-items: baseline;
display: inline-flex;
flex-direction: column
}
.katex .hbox {
width: 100%
}
.katex .hbox,
.katex .thinbox {
display: inline-flex;
flex-direction: row
}
.katex .thinbox {
max-width: 0;
width: 0
}
.katex .msupsub {
text-align: left
}
.katex .mfrac>span>span {
text-align: center
}
.katex .mfrac .frac-line {
border-bottom-style: solid;
display: inline-block;
width: 100%
}
.katex .hdashline,
.katex .hline,
.katex .mfrac .frac-line,
.katex .overline .overline-line,
.katex .rule,
.katex .underline .underline-line {
min-height: 1px
}
.katex .mspace {
display: inline-block
}
.katex .clap,
.katex .llap,
.katex .rlap {
position: relative;
width: 0
}
.katex .clap>.inner,
.katex .llap>.inner,
.katex .rlap>.inner {
position: absolute
}
.katex .clap>.fix,
.katex .llap>.fix,
.katex .rlap>.fix {
display: inline-block
}
.katex .llap>.inner {
right: 0
}
.katex .clap>.inner,
.katex .rlap>.inner {
left: 0
}
.katex .clap>.inner>span {
margin-left: -50%;
margin-right: 50%
}
.katex .rule {
border: 0 solid;
display: inline-block;
position: relative
}
.katex .hline,
.katex .overline .overline-line,
.katex .underline .underline-line {
border-bottom-style: solid;
display: inline-block;
width: 100%
}
.katex .hdashline {
border-bottom-style: dashed;
display: inline-block;
width: 100%
}
.katex .sqrt>.root {
margin-left: .27777778em;
margin-right: -.55555556em
}
.katex .fontsize-ensurer.reset-size1.size1,
.katex .sizing.reset-size1.size1 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size1.size2,
.katex .sizing.reset-size1.size2 {
font-size: 1.2em
}
.katex .fontsize-ensurer.reset-size1.size3,
.katex .sizing.reset-size1.size3 {
font-size: 1.4em
}
.katex .fontsize-ensurer.reset-size1.size4,
.katex .sizing.reset-size1.size4 {
font-size: 1.6em
}
.katex .fontsize-ensurer.reset-size1.size5,
.katex .sizing.reset-size1.size5 {
font-size: 1.8em
}
.katex .fontsize-ensurer.reset-size1.size6,
.katex .sizing.reset-size1.size6 {
font-size: 2em
}
.katex .fontsize-ensurer.reset-size1.size7,
.katex .sizing.reset-size1.size7 {
font-size: 2.4em
}
.katex .fontsize-ensurer.reset-size1.size8,
.katex .sizing.reset-size1.size8 {
font-size: 2.88em
}
.katex .fontsize-ensurer.reset-size1.size9,
.katex .sizing.reset-size1.size9 {
font-size: 3.456em
}
.katex .fontsize-ensurer.reset-size1.size10,
.katex .sizing.reset-size1.size10 {
font-size: 4.148em
}
.katex .fontsize-ensurer.reset-size1.size11,
.katex .sizing.reset-size1.size11 {
font-size: 4.976em
}
.katex .fontsize-ensurer.reset-size2.size1,
.katex .sizing.reset-size2.size1 {
font-size: .83333333em
}
.katex .fontsize-ensurer.reset-size2.size2,
.katex .sizing.reset-size2.size2 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size2.size3,
.katex .sizing.reset-size2.size3 {
font-size: 1.16666667em
}
.katex .fontsize-ensurer.reset-size2.size4,
.katex .sizing.reset-size2.size4 {
font-size: 1.33333333em
}
.katex .fontsize-ensurer.reset-size2.size5,
.katex .sizing.reset-size2.size5 {
font-size: 1.5em
}
.katex .fontsize-ensurer.reset-size2.size6,
.katex .sizing.reset-size2.size6 {
font-size: 1.66666667em
}
.katex .fontsize-ensurer.reset-size2.size7,
.katex .sizing.reset-size2.size7 {
font-size: 2em
}
.katex .fontsize-ensurer.reset-size2.size8,
.katex .sizing.reset-size2.size8 {
font-size: 2.4em
}
.katex .fontsize-ensurer.reset-size2.size9,
.katex .sizing.reset-size2.size9 {
font-size: 2.88em
}
.katex .fontsize-ensurer.reset-size2.size10,
.katex .sizing.reset-size2.size10 {
font-size: 3.45666667em
}
.katex .fontsize-ensurer.reset-size2.size11,
.katex .sizing.reset-size2.size11 {
font-size: 4.14666667em
}
.katex .fontsize-ensurer.reset-size3.size1,
.katex .sizing.reset-size3.size1 {
font-size: .71428571em
}
.katex .fontsize-ensurer.reset-size3.size2,
.katex .sizing.reset-size3.size2 {
font-size: .85714286em
}
.katex .fontsize-ensurer.reset-size3.size3,
.katex .sizing.reset-size3.size3 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size3.size4,
.katex .sizing.reset-size3.size4 {
font-size: 1.14285714em
}
.katex .fontsize-ensurer.reset-size3.size5,
.katex .sizing.reset-size3.size5 {
font-size: 1.28571429em
}
.katex .fontsize-ensurer.reset-size3.size6,
.katex .sizing.reset-size3.size6 {
font-size: 1.42857143em
}
.katex .fontsize-ensurer.reset-size3.size7,
.katex .sizing.reset-size3.size7 {
font-size: 1.71428571em
}
.katex .fontsize-ensurer.reset-size3.size8,
.katex .sizing.reset-size3.size8 {
font-size: 2.05714286em
}
.katex .fontsize-ensurer.reset-size3.size9,
.katex .sizing.reset-size3.size9 {
font-size: 2.46857143em
}
.katex .fontsize-ensurer.reset-size3.size10,
.katex .sizing.reset-size3.size10 {
font-size: 2.96285714em
}
.katex .fontsize-ensurer.reset-size3.size11,
.katex .sizing.reset-size3.size11 {
font-size: 3.55428571em
}
.katex .fontsize-ensurer.reset-size4.size1,
.katex .sizing.reset-size4.size1 {
font-size: .625em
}
.katex .fontsize-ensurer.reset-size4.size2,
.katex .sizing.reset-size4.size2 {
font-size: .75em
}
.katex .fontsize-ensurer.reset-size4.size3,
.katex .sizing.reset-size4.size3 {
font-size: .875em
}
.katex .fontsize-ensurer.reset-size4.size4,
.katex .sizing.reset-size4.size4 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size4.size5,
.katex .sizing.reset-size4.size5 {
font-size: 1.125em
}
.katex .fontsize-ensurer.reset-size4.size6,
.katex .sizing.reset-size4.size6 {
font-size: 1.25em
}
.katex .fontsize-ensurer.reset-size4.size7,
.katex .sizing.reset-size4.size7 {
font-size: 1.5em
}
.katex .fontsize-ensurer.reset-size4.size8,
.katex .sizing.reset-size4.size8 {
font-size: 1.8em
}
.katex .fontsize-ensurer.reset-size4.size9,
.katex .sizing.reset-size4.size9 {
font-size: 2.16em
}
.katex .fontsize-ensurer.reset-size4.size10,
.katex .sizing.reset-size4.size10 {
font-size: 2.5925em
}
.katex .fontsize-ensurer.reset-size4.size11,
.katex .sizing.reset-size4.size11 {
font-size: 3.11em
}
.katex .fontsize-ensurer.reset-size5.size1,
.katex .sizing.reset-size5.size1 {
font-size: .55555556em
}
.katex .fontsize-ensurer.reset-size5.size2,
.katex .sizing.reset-size5.size2 {
font-size: .66666667em
}
.katex .fontsize-ensurer.reset-size5.size3,
.katex .sizing.reset-size5.size3 {
font-size: .77777778em
}
.katex .fontsize-ensurer.reset-size5.size4,
.katex .sizing.reset-size5.size4 {
font-size: .88888889em
}
.katex .fontsize-ensurer.reset-size5.size5,
.katex .sizing.reset-size5.size5 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size5.size6,
.katex .sizing.reset-size5.size6 {
font-size: 1.11111111em
}
.katex .fontsize-ensurer.reset-size5.size7,
.katex .sizing.reset-size5.size7 {
font-size: 1.33333333em
}
.katex .fontsize-ensurer.reset-size5.size8,
.katex .sizing.reset-size5.size8 {
font-size: 1.6em
}
.katex .fontsize-ensurer.reset-size5.size9,
.katex .sizing.reset-size5.size9 {
font-size: 1.92em
}
.katex .fontsize-ensurer.reset-size5.size10,
.katex .sizing.reset-size5.size10 {
font-size: 2.30444444em
}
.katex .fontsize-ensurer.reset-size5.size11,
.katex .sizing.reset-size5.size11 {
font-size: 2.76444444em
}
.katex .fontsize-ensurer.reset-size6.size1,
.katex .sizing.reset-size6.size1 {
font-size: .5em
}
.katex .fontsize-ensurer.reset-size6.size2,
.katex .sizing.reset-size6.size2 {
font-size: .6em
}
.katex .fontsize-ensurer.reset-size6.size3,
.katex .sizing.reset-size6.size3 {
font-size: .7em
}
.katex .fontsize-ensurer.reset-size6.size4,
.katex .sizing.reset-size6.size4 {
font-size: .8em
}
.katex .fontsize-ensurer.reset-size6.size5,
.katex .sizing.reset-size6.size5 {
font-size: .9em
}
.katex .fontsize-ensurer.reset-size6.size6,
.katex .sizing.reset-size6.size6 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size6.size7,
.katex .sizing.reset-size6.size7 {
font-size: 1.2em
}
.katex .fontsize-ensurer.reset-size6.size8,
.katex .sizing.reset-size6.size8 {
font-size: 1.44em
}
.katex .fontsize-ensurer.reset-size6.size9,
.katex .sizing.reset-size6.size9 {
font-size: 1.728em
}
.katex .fontsize-ensurer.reset-size6.size10,
.katex .sizing.reset-size6.size10 {
font-size: 2.074em
}
.katex .fontsize-ensurer.reset-size6.size11,
.katex .sizing.reset-size6.size11 {
font-size: 2.488em
}
.katex .fontsize-ensurer.reset-size7.size1,
.katex .sizing.reset-size7.size1 {
font-size: .41666667em
}
.katex .fontsize-ensurer.reset-size7.size2,
.katex .sizing.reset-size7.size2 {
font-size: .5em
}
.katex .fontsize-ensurer.reset-size7.size3,
.katex .sizing.reset-size7.size3 {
font-size: .58333333em
}
.katex .fontsize-ensurer.reset-size7.size4,
.katex .sizing.reset-size7.size4 {
font-size: .66666667em
}
.katex .fontsize-ensurer.reset-size7.size5,
.katex .sizing.reset-size7.size5 {
font-size: .75em
}
.katex .fontsize-ensurer.reset-size7.size6,
.katex .sizing.reset-size7.size6 {
font-size: .83333333em
}
.katex .fontsize-ensurer.reset-size7.size7,
.katex .sizing.reset-size7.size7 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size7.size8,
.katex .sizing.reset-size7.size8 {
font-size: 1.2em
}
.katex .fontsize-ensurer.reset-size7.size9,
.katex .sizing.reset-size7.size9 {
font-size: 1.44em
}
.katex .fontsize-ensurer.reset-size7.size10,
.katex .sizing.reset-size7.size10 {
font-size: 1.72833333em
}
.katex .fontsize-ensurer.reset-size7.size11,
.katex .sizing.reset-size7.size11 {
font-size: 2.07333333em
}
.katex .fontsize-ensurer.reset-size8.size1,
.katex .sizing.reset-size8.size1 {
font-size: .34722222em
}
.katex .fontsize-ensurer.reset-size8.size2,
.katex .sizing.reset-size8.size2 {
font-size: .41666667em
}
.katex .fontsize-ensurer.reset-size8.size3,
.katex .sizing.reset-size8.size3 {
font-size: .48611111em
}
.katex .fontsize-ensurer.reset-size8.size4,
.katex .sizing.reset-size8.size4 {
font-size: .55555556em
}
.katex .fontsize-ensurer.reset-size8.size5,
.katex .sizing.reset-size8.size5 {
font-size: .625em
}
.katex .fontsize-ensurer.reset-size8.size6,
.katex .sizing.reset-size8.size6 {
font-size: .69444444em
}
.katex .fontsize-ensurer.reset-size8.size7,
.katex .sizing.reset-size8.size7 {
font-size: .83333333em
}
.katex .fontsize-ensurer.reset-size8.size8,
.katex .sizing.reset-size8.size8 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size8.size9,
.katex .sizing.reset-size8.size9 {
font-size: 1.2em
}
.katex .fontsize-ensurer.reset-size8.size10,
.katex .sizing.reset-size8.size10 {
font-size: 1.44027778em
}
.katex .fontsize-ensurer.reset-size8.size11,
.katex .sizing.reset-size8.size11 {
font-size: 1.72777778em
}
.katex .fontsize-ensurer.reset-size9.size1,
.katex .sizing.reset-size9.size1 {
font-size: .28935185em
}
.katex .fontsize-ensurer.reset-size9.size2,
.katex .sizing.reset-size9.size2 {
font-size: .34722222em
}
.katex .fontsize-ensurer.reset-size9.size3,
.katex .sizing.reset-size9.size3 {
font-size: .40509259em
}
.katex .fontsize-ensurer.reset-size9.size4,
.katex .sizing.reset-size9.size4 {
font-size: .46296296em
}
.katex .fontsize-ensurer.reset-size9.size5,
.katex .sizing.reset-size9.size5 {
font-size: .52083333em
}
.katex .fontsize-ensurer.reset-size9.size6,
.katex .sizing.reset-size9.size6 {
font-size: .5787037em
}
.katex .fontsize-ensurer.reset-size9.size7,
.katex .sizing.reset-size9.size7 {
font-size: .69444444em
}
.katex .fontsize-ensurer.reset-size9.size8,
.katex .sizing.reset-size9.size8 {
font-size: .83333333em
}
.katex .fontsize-ensurer.reset-size9.size9,
.katex .sizing.reset-size9.size9 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size9.size10,
.katex .sizing.reset-size9.size10 {
font-size: 1.20023148em
}
.katex .fontsize-ensurer.reset-size9.size11,
.katex .sizing.reset-size9.size11 {
font-size: 1.43981481em
}
.katex .fontsize-ensurer.reset-size10.size1,
.katex .sizing.reset-size10.size1 {
font-size: .24108004em
}
.katex .fontsize-ensurer.reset-size10.size2,
.katex .sizing.reset-size10.size2 {
font-size: .28929605em
}
.katex .fontsize-ensurer.reset-size10.size3,
.katex .sizing.reset-size10.size3 {
font-size: .33751205em
}
.katex .fontsize-ensurer.reset-size10.size4,
.katex .sizing.reset-size10.size4 {
font-size: .38572806em
}
.katex .fontsize-ensurer.reset-size10.size5,
.katex .sizing.reset-size10.size5 {
font-size: .43394407em
}
.katex .fontsize-ensurer.reset-size10.size6,
.katex .sizing.reset-size10.size6 {
font-size: .48216008em
}
.katex .fontsize-ensurer.reset-size10.size7,
.katex .sizing.reset-size10.size7 {
font-size: .57859209em
}
.katex .fontsize-ensurer.reset-size10.size8,
.katex .sizing.reset-size10.size8 {
font-size: .69431051em
}
.katex .fontsize-ensurer.reset-size10.size9,
.katex .sizing.reset-size10.size9 {
font-size: .83317261em
}
.katex .fontsize-ensurer.reset-size10.size10,
.katex .sizing.reset-size10.size10 {
font-size: 1em
}
.katex .fontsize-ensurer.reset-size10.size11,
.katex .sizing.reset-size10.size11 {
font-size: 1.19961427em
}
.katex .fontsize-ensurer.reset-size11.size1,
.katex .sizing.reset-size11.size1 {
font-size: .20096463em
}
.katex .fontsize-ensurer.reset-size11.size2,
.katex .sizing.reset-size11.size2 {
font-size: .24115756em
}
.katex .fontsize-ensurer.reset-size11.size3,
.katex .sizing.reset-size11.size3 {
font-size: .28135048em
}
.katex .fontsize-ensurer.reset-size11.size4,
.katex .sizing.reset-size11.size4 {
font-size: .32154341em
}
.katex .fontsize-ensurer.reset-size11.size5,
.katex .sizing.reset-size11.size5 {
font-size: .36173633em
}
.katex .fontsize-ensurer.reset-size11.size6,
.katex .sizing.reset-size11.size6 {
font-size: .40192926em
}
.katex .fontsize-ensurer.reset-size11.size7,
.katex .sizing.reset-size11.size7 {
font-size: .48231511em
}
.katex .fontsize-ensurer.reset-size11.size8,
.katex .sizing.reset-size11.size8 {
font-size: .57877814em
}
.katex .fontsize-ensurer.reset-size11.size9,
.katex .sizing.reset-size11.size9 {
font-size: .69453376em
}
.katex .fontsize-ensurer.reset-size11.size10,
.katex .sizing.reset-size11.size10 {
font-size: .83360129em
}
.katex .fontsize-ensurer.reset-size11.size11,
.katex .sizing.reset-size11.size11 {
font-size: 1em
}
.katex .delimsizing.size1 {
font-family: KaTeX_Size1
}
.katex .delimsizing.size2 {
font-family: KaTeX_Size2
}
.katex .delimsizing.size3 {
font-family: KaTeX_Size3
}
.katex .delimsizing.size4 {
font-family: KaTeX_Size4
}
.katex .delimsizing.mult .delim-size1>span {
font-family: KaTeX_Size1
}
.katex .delimsizing.mult .delim-size4>span {
font-family: KaTeX_Size4
}
.katex .nulldelimiter {
display: inline-block;
width: .12em
}
.katex .delimcenter,
.katex .op-symbol {
position: relative
}
.katex .op-symbol.small-op {
font-family: KaTeX_Size1
}
.katex .op-symbol.large-op {
font-family: KaTeX_Size2
}
.katex .accent>.vlist-t,
.katex .op-limits>.vlist-t {
text-align: center
}
.katex .accent .accent-body {
position: relative
}
.katex .accent .accent-body:not(.accent-full) {
width: 0
}
.katex .overlay {
display: block
}
.katex .mtable .vertical-separator {
display: inline-block;
min-width: 1px
}
.katex .mtable .arraycolsep {
display: inline-block
}
.katex .mtable .col-align-c>.vlist-t {
text-align: center
}
.katex .mtable .col-align-l>.vlist-t {
text-align: left
}
.katex .mtable .col-align-r>.vlist-t {
text-align: right
}
.katex .svg-align {
text-align: left
}
.katex svg {
fill: currentcolor;
stroke: currentcolor;
fill-rule: nonzero;
fill-opacity: 1;
stroke-width: 1;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-dasharray: none;
stroke-dashoffset: 0;
stroke-opacity: 1;
display: block;
height: inherit;
position: absolute;
width: 100%
}
.katex svg path {
stroke: none
}
.katex img {
border-style: none;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0
}
.katex .stretchy {
display: block;
overflow: hidden;
position: relative;
width: 100%
}
.katex .stretchy:after,
.katex .stretchy:before {
content: ""
}
.katex .hide-tail {
overflow: hidden;
position: relative;
width: 100%
}
.katex .halfarrow-left {
left: 0;
overflow: hidden;
position: absolute;
width: 50.2%
}
.katex .halfarrow-right {
overflow: hidden;
position: absolute;
right: 0;
width: 50.2%
}
.katex .brace-left {
left: 0;
overflow: hidden;
position: absolute;
width: 25.1%
}
.katex .brace-center {
left: 25%;
overflow: hidden;
position: absolute;
width: 50%
}
.katex .brace-right {
overflow: hidden;
position: absolute;
right: 0;
width: 25.1%
}
.katex .x-arrow-pad {
padding: 0 .5em
}
.katex .cd-arrow-pad {
padding: 0 .55556em 0 .27778em
}
.katex .mover,
.katex .munder,
.katex .x-arrow {
text-align: center
}
.katex .boxpad {
padding: 0 .3em
}
.katex .fbox,
.katex .fcolorbox {
border: .04em solid;
box-sizing: border-box
}
.katex .cancel-pad {
padding: 0 .2em
}
.katex .cancel-lap {
margin-left: -.2em;
margin-right: -.2em
}
.katex .sout {
border-bottom-style: solid;
border-bottom-width: .08em
}
.katex .angl {
border-right: .049em solid;
border-top: .049em solid;
box-sizing: border-box;
margin-right: .03889em
}
.katex .anglpad {
padding: 0 .03889em
}
.katex .eqn-num:before {
content: "(" counter(katexEqnNo) ")";
counter-increment: katexEqnNo
}
.katex .mml-eqn-num:before {
content: "(" counter(mmlEqnNo) ")";
counter-increment: mmlEqnNo
}
.katex .mtr-glue {
width: 50%
}
.katex .cd-vert-arrow {
display: inline-block;
position: relative
}
.katex .cd-label-left {
display: inline-block;
position: absolute;
right: calc(50% + .3em);
text-align: left
}
.katex .cd-label-right {
display: inline-block;
left: calc(50% + .3em);
position: absolute;
text-align: right
}
.katex-display {
display: block;
margin: 1em 0;
text-align: center
}
.katex-display>.katex {
display: block;
text-align: center;
white-space: nowrap
}
.katex-display>.katex>.katex-html {
display: block;
position: relative
}
.katex-display>.katex>.katex-html>.tag {
position: absolute;
right: 0
}
.katex-display.leqno>.katex>.katex-html>.tag {
left: 0;
right: auto
}
.katex-display.fleqn>.katex {
padding-left: 2em;
text-align: left
}
body {
counter-reset: katexEqnNo mmlEqnNo
}
</style>
<div class="flex-1 overflow-hidden">
<div class="react-scroll-to-bottom--css-qndao-79elbk h-full dark:bg-gray-800">
<div class="react-scroll-to-bottom--css-qndao-1n7m0yu">
<div class="flex flex-col items-center text-sm dark:bg-gray-800">
<div class="w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800">
<div class="text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0">
<div class="w-[30px] flex flex-col relative items-end">
<div class="relative flex"><span style="background: none; border: 0px; box-sizing: border-box; display: inline-block; height: initial; margin: 0px; max-width: 100%; opacity: 1; overflow: hidden; padding: 0px; position: relative; width: initial;"><span style="background: none; border: 0px; box-sizing: border-box; display: block; height: initial; margin: 0px; max-width: 100%; opacity: 1; padding: 0px; width: initial;"><br /></span></span>
</div>
</div>
</div>
</div>
<div class="w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<div style="text-align: left;">If you're a .NET developer who wants to build web applications or mobile apps that require data access, you'll need to build an API. RESTful APIs have become the de-facto standard for web APIs, as they offer a flexible and standardized way for client applications to interact with server resources.<br /><br />In this beginner's guide, we'll walk you through the process of building a RESTful API with .NET Core and SQL Server. We'll cover the basic concepts of RESTful APIs, as well as the tools and techniques you'll need to get started. By the end of this article, you'll have a solid understanding of how to design and build RESTful APIs with .NET Core and SQL Server, and you'll be ready to start building your own APIs.<br /><br /> Let's get started!</div></div></div></div></div></div></div><div class="w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]"><div class="text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0"><div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]"><div class="flex flex-grow flex-col gap-3"><div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap"><div class="markdown prose w-full break-words dark:prose-invert light"><ol><li><b>Understanding RESTful APIs: <br /></b><br />RESTful APIs are a popular way to create web services that can be accessed by other applications. REST, which stands for Representational State Transfer, is a set of architectural principles that guide the design of web applications. RESTful APIs are built using these principles and are typically based on HTTP. In order to build a RESTful API, it's important to understand the basic principles of RESTful design. <br /><br />Some key concepts include: Resources: RESTful APIs are built around resources, which are typically identified by URLs. Each resource should have a unique URL, and it should be possible to interact with that resource using standard HTTP methods. HTTP Methods: RESTful APIs use HTTP methods to indicate what action should be taken on a resource. <br /><br />Some common HTTP methods include GET (for retrieving data), POST (for creating new resources), PUT (for updating existing resources), and DELETE (for deleting resources). Status Codes: RESTful APIs use HTTP status codes to indicate the outcome of a request. For example, a 200 status code indicates that a request was successful, while a 404 status code indicates that the requested resource was not found. By understanding these basic principles of RESTful API design, you'll be able to create a web service that is easy to use and understand, and that can be accessed by a wide range of applications.<br /><br /><br />
</li><li><b>Setting up the Development Environment:</b><br /><br />Before you can start building a RESTful API with .NET Core and SQL Server, you'll need to set up your development environment. <br /><br />Here are the steps you'll need to follow:<br /><br />Install .NET Core SDK: The .NET Core SDK is a set of tools and libraries that you'll need in order to build .NET Core applications. You can download the SDK from the official .NET website (https://dotnet.microsoft.com/download). <br /><br />Install Visual Studio or Visual Studio Code: Visual Studio is a popular IDE for .NET development, while Visual Studio Code is a lightweight code editor that is also a good option for .NET development. <br />You can download Visual Studio from the official Microsoft website (https://visualstudio.microsoft.com/downloads/), or Visual Studio Code from the official website (https://code.visualstudio.com/download). <br /><br />Create a new .NET Core Web API project: Once you have your development environment set up, you can create a new .NET Core Web API project. <br />This can be done using either Visual Studio or Visual Studio Code. When creating the project, make sure to select the "Web API" template. <br />Add necessary NuGet packages to the project: In order to work with SQL Server in your .NET Core Web API project, you'll need to add some NuGet packages. <br /><br />These packages provide the necessary libraries and tools for working with SQL Server. <br />Some common packages include Microsoft.EntityFrameworkCore.SqlServer, Microsoft.AspNetCore.Mvc.NewtonsoftJson, and Microsoft.AspNetCore.Authentication.JwtBearer.<br /><br /><br /></li><li><p><b>Designing the API: </b><br /><br />Once you have your development environment set up, the next step is to design your API. <br />This involves defining the resources and endpoints of the API, as well as creating data models and configuring data access with Entity Framework Core. <br /><br />Here are some examples of what you might do: <br /><br />Define the resources and endpoints of the API:<br />Let's say you're building an e-commerce application. <br />Some of the resources you might define include customers, orders, and products. <br />For each resource, you'll need to decide what endpoints will be available. <br />For example, for the customers resource, you might have endpoints for getting a list of customers, creating a new customer, updating an existing customer, and deleting a customer. <br /><br />Create data models: <br />Continuing with the e-commerce example, you'll need to create data models that represent the data you'll be working with. <br />For the customers resource, you might have a Customer class that has properties such as Id, FirstName, LastName, and EmailAddress. <br /><br />Similarly, for the orders resource, you might have an Order class that has properties such as Id, CustomerId, OrderDate, and TotalAmount. <br /><br />Configure data access with Entity Framework Core: <br />In order to access the data in your database, you'll need to configure Entity Framework Core. This involves creating a database context, which is a class that represents the database and provides access to the data. For example, you might create a class called MyDbContext that derives from DbContext and has properties for each of your data models (e.g., DbSet<Customer>, DbSet<Order>). <br /><br />You'll also need to configure the database connection string, which tells Entity Framework Core where to find the database. By following these examples, you'll have a better understanding of how to design your RESTful API with .NET Core and SQL Server.<br /><br /><br />An example implementation of a CRUD (Create, Read, Update, Delete) operation for a Customer resource using .NET Core and SQL Server:</p></li></ol></div></div></div></div></div></div>
<div class="w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<ol>
<li>
<p>Define the Customer data model:</p>
<pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-csharp"><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title">Customer</span>
{
<span class="hljs-keyword">public</span> <span class="hljs-built_in">int</span> Id { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; }
<span class="hljs-keyword">public</span> <span class="hljs-built_in">string</span> FirstName { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; }
<span class="hljs-keyword">public</span> <span class="hljs-built_in">string</span> LastName { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; }
<span class="hljs-keyword">public</span> <span class="hljs-built_in">string</span> EmailAddress { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; }
}
</code></div></div></pre>
</li>
<li>
<p>Create a database context:</p>
<pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-csharp"><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title">MyDbContext</span> : <span class="hljs-title">DbContext</span>
{
<span class="hljs-keyword">public</span> DbSet<Customer> Customers { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; }
<span class="hljs-function"><span class="hljs-keyword">protected</span> <span class="hljs-keyword">override</span> <span class="hljs-keyword">void</span> <span class="hljs-title">OnConfiguring</span>(<span class="hljs-params">DbContextOptionsBuilder optionsBuilder</span>)</span>
{
optionsBuilder.UseSqlServer(<span class="hljs-string">"connection_string_here"</span>);
}
}
</code></div></div></pre>
</li>
<li>
<p>Create a Customer controller:</p>
<pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-csharp">[<span class="hljs-meta">ApiController</span>]
[<span class="hljs-meta">Route(<span class="hljs-string">"[controller]"</span>)</span>]
<span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title">CustomersController</span> : <span class="hljs-title">ControllerBase</span>
{
<span class="hljs-keyword">private</span> <span class="hljs-keyword">readonly</span> MyDbContext _context;
<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-title">CustomersController</span>(<span class="hljs-params">MyDbContext context</span>)</span>
{
_context = context;
}
[<span class="hljs-meta">HttpGet</span>]
<span class="hljs-function"><span class="hljs-keyword">public</span> IEnumerable<Customer> <span class="hljs-title">Get</span>()</span>
{
<span class="hljs-keyword">return</span> _context.Customers.ToList();
}
[<span class="hljs-meta">HttpGet(<span class="hljs-string">"{id}"</span>)</span>]
<span class="hljs-function"><span class="hljs-keyword">public</span> Customer <span class="hljs-title">Get</span>(<span class="hljs-params"><span class="hljs-built_in">int</span> id</span>)</span>
{
<span class="hljs-keyword">return</span> _context.Customers.Find(id);
}
[<span class="hljs-meta">HttpPost</span>]
<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">Post</span>(<span class="hljs-params">Customer customer</span>)</span>
{
_context.Customers.Add(customer);
_context.SaveChanges();
}
[<span class="hljs-meta">HttpPut(<span class="hljs-string">"{id}"</span>)</span>]
<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">Put</span>(<span class="hljs-params"><span class="hljs-built_in">int</span> id, Customer customer</span>)</span>
{
<span class="hljs-keyword">var</span> existingCustomer = _context.Customers.Find(id);
existingCustomer.FirstName = customer.FirstName;
existingCustomer.LastName = customer.LastName;
existingCustomer.EmailAddress = customer.EmailAddress;
_context.SaveChanges();
}
[<span class="hljs-meta">HttpDelete(<span class="hljs-string">"{id}"</span>)</span>]
<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">Delete</span>(<span class="hljs-params"><span class="hljs-built_in">int</span> id</span>)</span>
{
<span class="hljs-keyword">var</span> customer = _context.Customers.Find(id);
_context.Customers.Remove(customer);
_context.SaveChanges();
}
}
</code></div></div></pre>
<p>This controller defines endpoints for each of the CRUD operations on the Customer resource. The [HttpGet] attribute is used for the Get method, which returns a list of all customers.<br /><br />The [HttpGet("{id}")] attribute is used for the Get(int id) method, which returns a single customer with the specified ID. <br /><br />The [HttpPost] attribute is used for the Post method, which adds a new customer to the database.<br /><br />The [HttpPut("{id}")] attribute is used for the Put(int id, Customer customer) method, which updates an existing customer. <br /><br />The [HttpDelete("{id}")] attribute is used for the Delete(int id) method, which deletes a customer with the specified ID.</p></li></ol><div><div class="w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800"><div class="text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0"><div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]"><div class="flex flex-grow flex-col gap-3"><div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap"><b>4. Implementing Authentication and Authorization:<br /></b><br />Secure the API endpoints with authentication and authorization. Use JSON Web Tokens (JWT) for authentication and role-based access control for authorization.<br /><br /><br /></div></div></div></div></div><div><div class="text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0"><div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]"><div class="flex flex-grow flex-col gap-3"><div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap"><div class="markdown prose w-full break-words dark:prose-invert light"><ol><li><p>Install the necessary NuGet packages for authentication and authorization. You can use packages such as Microsoft.AspNetCore.Authentication.JwtBearer and Microsoft.AspNetCore.Authorization.</p></li><li><p>Configure authentication and authorization in your project's startup file. You'll need to set up the authentication scheme, define the authorization policies, and add the necessary middleware.</p></li><li><p>Create a login endpoint where users can authenticate and receive a JWT. This involves validating the user's credentials and generating a token with a secret key.</p></li><li><p>Set up role-based access control by defining roles and policies in your project's authorization configuration. You can then use the [Authorize] attribute on your API endpoints to restrict access based on these roles.</p></li><li><p>Test your authentication and authorization by making requests to your API endpoints with a valid JWT and testing both authorized and unauthorized scenarios.<br /><br />An example implementation of a login endpoint for a .NET Core Web API with JWT authentication:</p></li></ol></div></div></div></div></div></div><div class="w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]"><div class="text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0"><div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]"><div class="flex flex-grow flex-col gap-3"><div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap"><div class="markdown prose w-full break-words dark:prose-invert light"><ul></ul><ol start="1"><li><div>First, add the necessary NuGet packages to the project:</div> - Microsoft.AspNetCore.Authentication.JwtBearer<br /> - Microsoft.IdentityModel.Tokens</li><li>Define a user model to represent users in the system, for example:</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-csharp"><span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title">User</span>
{
<span class="hljs-keyword">public</span> <span class="hljs-built_in">int</span> Id { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; }
<span class="hljs-keyword">public</span> <span class="hljs-built_in">string</span> Username { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; }
<span class="hljs-keyword">public</span> <span class="hljs-built_in">string</span> Password { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; }
<span class="hljs-keyword">public</span> <span class="hljs-built_in">string</span> Role { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; }
}
</code></div></div></pre><ol start="3"><li>Configure authentication in the Startup.cs file by adding the following code in the ConfigureServices method:</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-csharp">services.AddAuthentication(options =>
{
options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(options =>
{
options.TokenValidationParameters = <span class="hljs-keyword">new</span> TokenValidationParameters
{
ValidateIssuer = <span class="hljs-literal">true</span>,
ValidateAudience = <span class="hljs-literal">true</span>,
ValidateLifetime = <span class="hljs-literal">true</span>,
ValidateIssuerSigningKey = <span class="hljs-literal">true</span>,
ValidIssuer = Configuration[<span class="hljs-string">"Jwt:Issuer"</span>],
ValidAudience = Configuration[<span class="hljs-string">"Jwt:Issuer"</span>],
IssuerSigningKey = <span class="hljs-keyword">new</span> SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration[<span class="hljs-string">"Jwt:Key"</span>]))
};
});
</code></div></div></pre><p>Make sure to add the JWT settings to your appsettings.json file.</p><ol start="4"><li>Create a TokenController to handle authentication requests and generate JWT tokens:</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-csharp">[<span class="hljs-meta">Route(<span class="hljs-string">"api/[controller]"</span>)</span>]
[<span class="hljs-meta">ApiController</span>]
<span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title">TokenController</span> : <span class="hljs-title">ControllerBase</span>
{
<span class="hljs-keyword">private</span> <span class="hljs-keyword">readonly</span> IConfiguration _configuration;
<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-title">TokenController</span>(<span class="hljs-params">IConfiguration configuration</span>)</span>
{
_configuration = configuration;
}
[<span class="hljs-meta">AllowAnonymous</span>]
[<span class="hljs-meta">HttpPost</span>]
<span class="hljs-function"><span class="hljs-keyword">public</span> IActionResult <span class="hljs-title">GenerateToken</span>(<span class="hljs-params">[FromBody] UserDto userDto</span>)</span>
{
<span class="hljs-comment">// Authenticate user</span>
<span class="hljs-keyword">var</span> user = AuthenticateUser(userDto.Username, userDto.Password);
<span class="hljs-keyword">if</span> (user == <span class="hljs-literal">null</span>)
{
<span class="hljs-keyword">return</span> Unauthorized();
}
<span class="hljs-comment">// Generate token</span>
<span class="hljs-keyword">var</span> tokenHandler = <span class="hljs-keyword">new</span> JwtSecurityTokenHandler();
<span class="hljs-keyword">var</span> key = Encoding.UTF8.GetBytes(_configuration[<span class="hljs-string">"Jwt:Key"</span>]);
<span class="hljs-keyword">var</span> tokenDescriptor = <span class="hljs-keyword">new</span> SecurityTokenDescriptor
{
Subject = <span class="hljs-keyword">new</span> ClaimsIdentity(<span class="hljs-keyword">new</span> Claim[]
{
<span class="hljs-keyword">new</span> Claim(ClaimTypes.Name, user.Id.ToString()),
<span class="hljs-keyword">new</span> Claim(ClaimTypes.Role, user.Role)
}),
Expires = DateTime.UtcNow.AddDays(<span class="hljs-number">7</span>),
SigningCredentials = <span class="hljs-keyword">new</span> SigningCredentials(<span class="hljs-keyword">new</span> SymmetricSecurityKey(key), SecurityAlgorithms.HmacSha256Signature)
};
<span class="hljs-keyword">var</span> token = tokenHandler.CreateToken(tokenDescriptor);
<span class="hljs-keyword">return</span> Ok(<span class="hljs-keyword">new</span> { token = tokenHandler.WriteToken(token) });
}
<span class="hljs-function"><span class="hljs-keyword">private</span> User <span class="hljs-title">AuthenticateUser</span>(<span class="hljs-params"><span class="hljs-built_in">string</span> username, <span class="hljs-built_in">string</span> password</span>)</span>
{
<span class="hljs-comment">// <span class="hljs-doctag">TODO:</span> Authenticate user from database or other data source</span>
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> User { Id = <span class="hljs-number">1</span>, Username = <span class="hljs-string">"test"</span>, Password = <span class="hljs-string">"test"</span>, Role = <span class="hljs-string">"admin"</span> };
}
}
<span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title">UserDto</span>
{
<span class="hljs-keyword">public</span> <span class="hljs-built_in">string</span> Username { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; }
<span class="hljs-keyword">public</span> <span class="hljs-built_in">string</span> Password { <span class="hljs-keyword">get</span>; <span class="hljs-keyword">set</span>; }
}
</code></div></div></pre><ol start="5"><li>Protect the endpoints that require authentication by adding the [Authorize] attribute to the controller or action:</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-csharp">[<span class="hljs-meta">Authorize(Roles = <span class="hljs-string">"admin"</span>)</span>]
[<span class="hljs-meta">HttpGet</span>]
<span class="hljs-function"><span class="hljs-keyword">public</span> IActionResult <span class="hljs-title">Get</span>()</span>
{
<span class="hljs-comment">// <span class="hljs-doctag">TODO:</span> Return data from database or other data source</span>
<span class="hljs-keyword">return</span> Ok(<span class="hljs-keyword">new</span> List<<span class="hljs-built_in">string</span>> { <span class="hljs-string">"value1"</span>, <span class="hljs-string">"value2"</span> });
}
</code></div></div></pre><p>Make sure to properly secure your system and use best practices for authentication and authorization in production environments.<br /><b> </b><br /><b> 5. Testing the API:<br /><br /></b>Once you have implemented your API, it is important to test it thoroughly to ensure it works as expected. You can write unit tests and integration tests for the API using a testing framework such as NUnit or xUnit.</p></div></div></div></div></div></div><div class="w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]"><div class="text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0"><div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]"><div class="flex flex-grow flex-col gap-3"><div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap"><div class="markdown prose w-full break-words dark:prose-invert light"><p>Unit tests allow you to test individual components of the API in isolation, while integration tests test how these components work together. By writing tests for your API, you can catch bugs and issues early in the development process.</p><p>You can also use tools like Postman to test the API endpoints manually. Postman allows you to send requests to your API and inspect the responses. This can be useful for testing specific scenarios or edge cases that may not be covered by your automated tests.</p><p>By testing your API thoroughly, you can ensure that it is reliable and performs well in a production environment.</p></div></div></div></div></div></div><div class="w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]"><div class="text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0"><div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]"><div class="flex flex-grow flex-col gap-3"><div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap"><div class="markdown prose w-full break-words dark:prose-invert light"><p>An example of how you can write unit tests and integration tests for your .NET Core Web API:</p><ol><li>Unit Tests:<br />Let's say you have a UserController in your API that handles CRUD operations for users. You can write unit tests to test the methods in this controller.</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-csharp">[<span class="hljs-meta">TestFixture</span>]
<span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title">UserControllerTests</span>
{
<span class="hljs-keyword">private</span> UserController _controller;
[<span class="hljs-meta">SetUp</span>]
<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">Setup</span>()</span>
{
<span class="hljs-comment">// Arrange</span>
<span class="hljs-keyword">var</span> mockRepository = <span class="hljs-keyword">new</span> Mock<IUserRepository>();
_controller = <span class="hljs-keyword">new</span> UserController(mockRepository.Object);
}
[<span class="hljs-meta">Test</span>]
<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">GetUsers_ReturnsListOfUsers</span>()</span>
{
<span class="hljs-comment">// Act</span>
<span class="hljs-keyword">var</span> result = _controller.GetUsers();
<span class="hljs-comment">// Assert</span>
Assert.IsInstanceOf<IEnumerable<User>>(result);
}
[<span class="hljs-meta">Test</span>]
<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">GetUser_ReturnsUserById</span>()</span>
{
<span class="hljs-comment">// Arrange</span>
<span class="hljs-keyword">var</span> mockRepository = <span class="hljs-keyword">new</span> Mock<IUserRepository>();
<span class="hljs-keyword">var</span> user = <span class="hljs-keyword">new</span> User { Id = <span class="hljs-number">1</span>, Name = <span class="hljs-string">"John Doe"</span> };
mockRepository.Setup(repo => repo.GetUserById(user.Id)).Returns(user);
<span class="hljs-keyword">var</span> controller = <span class="hljs-keyword">new</span> UserController(mockRepository.Object);
<span class="hljs-comment">// Act</span>
<span class="hljs-keyword">var</span> result = controller.GetUser(user.Id);
<span class="hljs-comment">// Assert</span>
Assert.AreEqual(user, result);
}
<span class="hljs-comment">// Other tests for Create, Update, and Delete methods</span>
}
</code></div></div></pre><p>In this example, we are using the NUnit testing framework to write unit tests for the UserController. We are mocking the IUserRepository interface to simulate database operations.</p><ol start="2"><li>Integration tests:<br />Integration tests allow you to test how different components of your API work together. For example, you can test how your API handles requests and responses, and how it interacts with a database.</li></ol><pre><div class="bg-black mb-4 rounded-md"><div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans"><br /></div><div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-csharp">[<span class="hljs-meta">TestFixture</span>]
<span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title">UserControllerIntegrationTests</span>
{
<span class="hljs-keyword">private</span> HttpClient _client;
<span class="hljs-keyword">private</span> AppSettings _appSettings;
[<span class="hljs-meta">SetUp</span>]
<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">Setup</span>()</span>
{
<span class="hljs-comment">// Arrange</span>
<span class="hljs-keyword">var</span> factory = <span class="hljs-keyword">new</span> WebApplicationFactory<Startup>()
.WithWebHostBuilder(builder =>
{
builder.ConfigureTestServices(services =>
{
<span class="hljs-comment">// Override app settings for testing</span>
_appSettings = <span class="hljs-keyword">new</span> AppSettings { Secret = <span class="hljs-string">"test_secret"</span> };
services.Configure<AppSettings>(options => options = _appSettings);
});
});
_client = factory.CreateClient();
}
[<span class="hljs-meta">Test</span>]
<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">async</span> Task <span class="hljs-title">GetUsers_ReturnsListOfUsers</span>()</span>
{
<span class="hljs-comment">// Act</span>
<span class="hljs-keyword">var</span> response = <span class="hljs-keyword">await</span> _client.GetAsync(<span class="hljs-string">"/api/users"</span>);
<span class="hljs-comment">// Assert</span>
response.EnsureSuccessStatusCode();
<span class="hljs-keyword">var</span> users = <span class="hljs-keyword">await</span> response.Content.ReadAsAsync<IEnumerable<User>>();
Assert.IsTrue(users.Any());
}
[<span class="hljs-meta">Test</span>]
<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">async</span> Task <span class="hljs-title">Authenticate_ReturnsJwtToken</span>()</span>
{
<span class="hljs-comment">// Arrange</span>
<span class="hljs-keyword">var</span> login = <span class="hljs-keyword">new</span> LoginDto { Username = <span class="hljs-string">"testuser"</span>, Password = <span class="hljs-string">"testpass"</span> };
<span class="hljs-keyword">var</span> content = <span class="hljs-keyword">new</span> StringContent(JsonConvert.SerializeObject(login), Encoding.UTF8, <span class="hljs-string">"application/json"</span>);
<span class="hljs-comment">// Act</span>
<span class="hljs-keyword">var</span> response = <span class="hljs-keyword">await</span> _client.PostAsync(<span class="hljs-string">"/api/authenticate"</span>, content);
<span class="hljs-comment">// Assert</span>
response.EnsureSuccessStatusCode();
<span class="hljs-keyword">var</span> token = <span class="hljs-keyword">await</span> response.Content.ReadAsStringAsync();
Assert.IsFalse(<span class="hljs-built_in">string</span>.IsNullOrEmpty(token));
}
<span class="hljs-comment">// Other integration tests for Create, Update, and Delete endpoints</span>
}
</code></div></div></pre><p>In this example, we are using the WebApplicationFactory class provided by ASP.NET Core to create an instance of our API for testing. We are then using the HttpClient to send requests to our API and inspect the responses.<br /><br /></p></div></div></div></div></div></div><div class="w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]"><div class="text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0"><div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]"><div class="flex flex-grow flex-col gap-3"><div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap"><div class="markdown prose w-full break-words dark:prose-invert light"><ol start="6"><li><b>Deploying the API:</b></li></ol><p>Once you have developed and tested your RESTful API, it's time to deploy it to a hosting environment where it can be accessed by your clients or users. There are various hosting solutions available, such as Azure App Service, AWS Elastic Beanstalk, or Docker containers, depending on your needs and preferences.</p><p>To deploy your API to Azure App Service, you can follow these general steps:<br /><br /> - Create an Azure App Service resource in your Azure portal.<br /> - Configure the App Service plan, runtime stack, and other settings based on your requirements.<br /> - Create a deployment package of your API project using Visual Studio or command-line tools like dotnet CLI.<br /> - Upload and deploy the deployment package to the App Service using FTP, Git, or other deployment options.<br /> - Configure the App Service environment variables, connection strings, and other settings that your API requires.<br /> - Test the deployed API to ensure it's working as expected.<br /><br />If you prefer to use Docker containers for hosting your API, you can follow these steps:<br /><br /> - Install Docker on your local machine or the server that you want to use as the host.<br /> - Build a Docker image of your API project using the Dockerfile that defines the dependencies and configuration of your project.<br /> - Push the Docker image to a container registry such as Docker Hub or Azure Container Registry.<br /> - Create a container instance from the Docker image in the host environment using tools like Docker Compose, Kubernetes, or Azure Container Instances.<br /> - Configure the container instance settings such as environment variables, ports, and volumes.<br /> - Test the deployed API to ensure it's accessible from other machines or services.</p><p>with some practice and guidance, you can learn how to deploy your API with confidence and efficiency.<br /><br />In conclusion, building a RESTful API with .NET Core and SQL Server is a powerful way to create scalable and secure web services. By following the steps outlined in this guide, you can create a robust API that meets your needs.<br /></p></div></div></div></div></div></div><div class="w-full border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]"><div class="text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0"><div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]"><div class="flex flex-grow flex-col gap-3"><div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap"><div class="markdown prose w-full break-words dark:prose-invert light">To help you in your API development journey, here are some useful tools and resources:<br /><br /> - Swagger UI: A popular tool for generating interactive API documentation.<br /> - Postman: A popular tool for testing APIs.<br /> - IdentityServer4: A library for implementing authentication and authorization in .NET Core APIs.<br /> - Entity Framework Core: A popular object-relational mapper (ORM) for .NET Core that simplifies data access.<br /> - .NET Core CLI: A command-line interface for managing .NET Core projects and tools.<p>For more information on building RESTful APIs with .NET Core and SQL Server, check out these resources:<br /><br /> - Microsoft's official documentation on .NET Core and ASP.NET Core: <a href="https://docs.microsoft.com/en-us/dotnet/core/" target="_new">https://docs.microsoft.com/en-us/dotnet/core/</a><br /> - RESTful API Design: Best Practices by Microsoft: <a href="https://docs.microsoft.com/en-us/azure/architecture/best-practices/api-design" target="_new">https://docs.microsoft.com/en-us/azure/architecture/best-practices/api-design</a><br /> - Building RESTful Web APIs with ASP.NET Core 3 by Jason Roberts: <a href="https://www.pluralsight.com/courses/aspdotnet-core-3-restful-web-apis" target="_new">https://www.pluralsight.com/courses/aspdotnet-core-3-restful-web-apis</a></p><p>We hope this guide has been helpful in getting you started with building RESTful APIs with .NET Core and SQL Server. Good luck with your API development!</p></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>
</div>
</div>
</div>Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-45856897351735296122017-10-06T09:52:00.001-07:002023-02-24T01:01:01.828-08:00Recursive algorithms<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7133854016810018"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-7133854016810018"
data-ad-slot="5700254903"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<meta name="description" content=" A Recursive function is a function that calls itself ether directly or indirectly through another function .A Recursive function is called to solve a problem by , Read More…">
<meta property="og:type" content="article" />
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoTnLVzxJr7hxm8xEmfPNh5ezyCU2-hsio3mGIl3lxSViIOA7a6j4mvOoxJ7RU_NesVTXeAmKH7jsa2VYYzeUd2vKJ-KnnsGh5jmMQbCqCHeK3yUkLg_xUr8weny8XEUBlHwF5sN4XUVE/s320/compute.PNG" />
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="display: none;">
<meta name="description" content=" A Recursive function is a function that calls itself ether directly or indirectly through another function .A Recursive function is called to solve a problem by , Read More…">
<meta property="og:type" content="article" />
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoTnLVzxJr7hxm8xEmfPNh5ezyCU2-hsio3mGIl3lxSViIOA7a6j4mvOoxJ7RU_NesVTXeAmKH7jsa2VYYzeUd2vKJ-KnnsGh5jmMQbCqCHeK3yUkLg_xUr8weny8XEUBlHwF5sN4XUVE/s320/compute.PNG" />
<img alt="coputepower" border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoTnLVzxJr7hxm8xEmfPNh5ezyCU2-hsio3mGIl3lxSViIOA7a6j4mvOoxJ7RU_NesVTXeAmKH7jsa2VYYzeUd2vKJ-KnnsGh5jmMQbCqCHeK3yUkLg_xUr8weny8XEUBlHwF5sN4XUVE/s320/compute.PNG" width="320" />
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<h2 style="text-align: left;">
Recursion</h2>
<br />
<table class="table table-hover" style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #333333; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; margin-bottom: 20px; max-width: 100%; width: 372px;">
<thead style="box-sizing: border-box;">
<tr class="success" style="box-sizing: border-box;">
<th style="background-color: #dff0d8; border-bottom: 2px solid rgb(214, 233, 198); border-left-color: rgb(214, 233, 198); border-right-color: rgb(214, 233, 198); border-top: 0px; box-sizing: border-box; line-height: 1.42857; padding: 8px; text-align: left; vertical-align: bottom;">In this article</th>
</tr>
</thead>
<tbody style="box-sizing: border-box;">
<tr class="" style="box-sizing: border-box;">
<td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">1- What is a Recursive function and the problem it solve?<span class="glyphicon glyphicon-arrow-down" style="box-sizing: border-box; color: #4b91ba; display: inline-block; font-family: "glyphicons halflings"; font-size: xx-small; line-height: 1; padding-left: 0.1em; position: relative; top: 1px;"></span></td>
</tr>
<tr class="" style="box-sizing: border-box;">
<td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">2- Example Computing Powers .</td>
</tr>
<tr class="" style="box-sizing: border-box;">
<td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;"><span style="background-color: transparent;"><br /></span></td></tr>
</tbody></table>
<div>
<h3 style="background-color: white; color: #333333; font-family: "helvetica neue", helvetica, arial, sans-serif; text-align: left;">
<span style="background-color: transparent;">Recursive function</span></h3>
<h4 style="text-align: left;">
A Recursive function is a function that calls itself ether directly or indirectly through another function .A Recursive function is called to solve a problem by solving a smaller instance of the same problem unless it is the simplest case(s) or so-called base case(s) it will return the result.</h4>
<div>
<div>
<span style="font-weight: normal;"><br /></span></div>
<div>
<h3 style="text-align: left;">
Example Computing Powers</h3>
<ul style="text-align: left;">
</ul>
1 - The simplest case when you want to compute <span style="background-color: yellow;">x^n</span> is when <span style="background-color: yellow;">n = 0</span> the result always be 1 no matter what <span style="background-color: yellow;">x</span> is .<br />
<br /></div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal">
<div class="MsoNormal">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="font-family: "consolas"; font-size: 9.5pt;"> CopmutePower(x , n){<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">if</span><span style="font-family: "consolas"; font-size: 9.5pt;"> (n == 0)</span><span style="font-family: "consolas"; font-size: 9.5pt;">{</span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="font-family: "consolas"; font-size: 9.5pt;"> 1;</span><br />
<span style="font-family: "consolas"; font-size: 9.5pt;"> }</span></div>
<div class="MsoNormal">
<br /></div>
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">
</span><br />
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;">}</span></div>
</div>
</div>
</div>
<br />
2 - The second case we can think about is when <span style="background-color: yellow;">n</span> is positive<br />
<br />
when you multiply powers of <span style="background-color: yellow;">x</span> you add the exponents: <span style="background-color: yellow;">x^a * x^b = x^(a+b)</span><br />
<span style="background-color: yellow;"> eg. 2^2 × 2^4<span style="white-space: pre;"> </span> = 2^(2+4) = 64.</span><br />
<br />
If <span style="background-color: yellow;">n</span> is positive and even then <span style="background-color: yellow;">x^n = x^(n/2) * x^(n/2)</span><br />
<span style="background-color: yellow;">eg. 2^6 = 2^(6/2) * 2^(6/2) = 64 </span>and for <span style="background-color: yellow;">y= x^(n/2) Therefore x^n = y * y</span><br />
<br />
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="font-family: "consolas"; font-size: 9.5pt;"> CopmutePower(x , n){<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: green; font-family: "consolas"; font-size: 9.5pt;">// n = 0 Simplest case(base case)</span></div>
<div class="MsoNormal">
<span style="color: green; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">if</span><span style="font-family: "consolas"; font-size: 9.5pt;"> (n == 0)</span><span style="font-family: "consolas"; font-size: 9.5pt;">{</span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="font-family: "consolas"; font-size: 9.5pt;"> 1;</span><br />
<span style="font-family: "consolas"; font-size: 9.5pt;"> }</span><br />
<span style="font-family: "consolas"; font-size: 9.5pt;"><br /></span>
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: green; font-family: "consolas";"><span style="font-size: 9.5pt;">// </span><span style="font-size: 12.6667px;">n is positive even</span></span><br />
<div class="MsoNormal">
<span style="color: green; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
</div>
<div class="MsoNormal">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">if</span><span style="font-family: "consolas"; font-size: 9.5pt;"> (n % 2 == 0)</span><span style="font-family: "consolas"; font-size: 9.5pt;">{</span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="font-family: "consolas"; font-size: 9.5pt;"> y = CopmutePower(x, n / 2);<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="font-family: "consolas"; font-size: 9.5pt;"> y * y;</span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }</span></div>
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;"></span><br />
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;">}</span></div>
<div class="MsoNormal">
<br /></div>
</div>
<br />
3 -If n is positive and odd then <span style="background-color: yellow;">x^n = x^(n−1) * x</span> in this case if <span style="background-color: yellow;">n-1 = 0</span> then it will be the base case when <span style="background-color: yellow;">n = 0</span> and if <span style="background-color: yellow;">n-1</span> is positive and even then it will be the second case .<br />
Therefor you could compute those cases recursively <br />
<br />
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="font-family: "consolas"; font-size: 9.5pt;"> CopmutePower(x , n){<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: green; font-family: "consolas"; font-size: 9.5pt;">// n = 0 Simplest case(base case)</span></div>
<div class="MsoNormal">
<span style="color: green; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">if</span><span style="font-family: "consolas"; font-size: 9.5pt;"> (n == 0)</span><span style="font-family: "consolas"; font-size: 9.5pt;">{</span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="font-family: "consolas"; font-size: 9.5pt;"> 1;</span><br />
<span style="font-family: "consolas"; font-size: 9.5pt;"> }</span><br />
<span style="font-family: "consolas"; font-size: 9.5pt;"><br /></span><span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: green; font-family: "consolas";"><span style="font-size: 9.5pt;">// </span><span style="font-size: 12.6667px;">n is positive and even</span></span><br />
<div class="MsoNormal">
<span style="color: green; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
</div>
<div class="MsoNormal">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">if</span><span style="font-family: "consolas"; font-size: 9.5pt;"> (n % 2 == 0)</span><span style="font-family: "consolas"; font-size: 9.5pt;">{</span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="font-family: "consolas"; font-size: 9.5pt;"> y = CopmutePower(x, n / 2);<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="font-family: "consolas"; font-size: 9.5pt;"> y * y;</span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }</span><br />
<span style="font-family: "consolas"; font-size: 9.5pt;"><br /></span>
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: green; font-family: "consolas";"><span style="font-size: 9.5pt;">// </span><span style="font-size: 12.6667px;">n is positive and even</span></span></div>
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;"></span> <span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">if</span><span style="font-family: "consolas"; font-size: 9.5pt;"> (!(n % 2 == 0))</span><span style="font-family: "consolas"; font-size: 9.5pt;">{</span><br />
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="font-family: "consolas"; font-size: 9.5pt;"> x * CopmutePower(x, n - 1); </span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<br />
<div class="MsoNormal">
</div>
<br />
<div class="MsoNormal" style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<div style="margin: 0px;">
<span style="font-family: "consolas"; font-size: 9.5pt;">}</span></div>
</div>
</div>
</div>
<br />
4 - If <span style="background-color: yellow;">n</span> is negative then<span style="background-color: yellow;"> x^n = 1 / (x^n)</span><br />
<br />
<div style="background-color: #c4bfbf; padding: 1em;">
<br />
<div class="MsoNormal">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="font-family: "consolas"; font-size: 9.5pt;"> CopmutePower(x , n){<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: green; font-family: "consolas"; font-size: 9.5pt;">// n = 0 Simplest case(base case)</span></div>
<div class="MsoNormal">
<span style="color: green; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">if</span><span style="font-family: "consolas"; font-size: 9.5pt;"> (n == 0)</span><span style="font-family: "consolas"; font-size: 9.5pt;">{</span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="font-family: "consolas"; font-size: 9.5pt;"> 1;</span><br />
<span style="font-family: "consolas"; font-size: 9.5pt;"> }</span><br />
<span style="font-family: "consolas"; font-size: 9.5pt;"><br /></span><span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: green; font-family: "consolas";"><span style="font-size: 9.5pt;">// </span><span style="font-size: 12.6667px;">n is positive and even</span></span><br />
<div class="MsoNormal">
<span style="color: green; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
</div>
<div class="MsoNormal">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">if</span><span style="font-family: "consolas"; font-size: 9.5pt;"> (n % 2 == 0)</span><span style="font-family: "consolas"; font-size: 9.5pt;">{</span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="font-family: "consolas"; font-size: 9.5pt;"> y = CopmutePower(x, n / 2);<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="font-family: "consolas"; font-size: 9.5pt;"> y * y;</span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }</span><br />
<span style="font-family: "consolas"; font-size: 9.5pt;"><br /></span><span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: green; font-family: "consolas";"><span style="font-size: 9.5pt;">// </span><span style="font-size: 12.6667px;">n is positive and even</span></span></div>
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;"></span> <span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">if</span><span style="font-family: "consolas"; font-size: 9.5pt;"> (!(n % 2 == 0))</span><span style="font-family: "consolas"; font-size: 9.5pt;">{</span><br />
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="font-family: "consolas"; font-size: 9.5pt;"> x * CopmutePower(x, n - 1); </span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<br />
<div class="MsoNormal">
</div>
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: green; font-family: "consolas";"><span style="font-size: 9.5pt;">// </span><span style="font-size: 12.6667px;"> n is negative</span></span><br />
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;"></span> <span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">if</span><span style="font-family: "consolas"; font-size: 9.5pt;"> (n < 0)</span><span style="font-family: "consolas"; font-size: 9.5pt;">{</span><br />
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="font-family: "consolas"; font-size: 9.5pt;"><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="font-family: "consolas"; font-size: 9.5pt;"> 1 / CopmutePower(x, -n);</span> </span></div>
<div class="MsoNormal">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span><br />
<div>
<span style="font-family: "consolas"; font-size: 9.5pt;"><br /></span></div>
</div>
<div class="MsoNormal" style="font-family: "times new roman";">
<div style="margin: 0px;">
<span style="font-family: "consolas"; font-size: 9.5pt;">}</span></div>
</div>
</div>
<br />
-- JavaScript Code<br />
<div class="codepen" data-default-tab="js,result" data-embed-version="2" data-height="265" data-pen-title="Recursive powers" data-slug-hash="dzePaN" data-theme-id="0" data-user="saad306">
See the Pen <a href="https://codepen.io/saad306/pen/dzePaN/">Recursive powers</a> by Mohamed Salah (<a href="https://codepen.io/saad306">@saad306</a>) on <a href="https://codepen.io/">CodePen</a>.</div>
<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<br />
-- C# Code<br />
<iframe frameborder="0" height="475" src="https://dotnetfiddle.net/Widget/hbrUah" width="100%"></iframe>
</div>
</div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-5845808668412802402017-08-22T10:51:00.001-07:002017-08-22T10:54:18.050-07:00Algorithm - Insertion Sort<div dir="ltr" style="text-align: left;" trbidi="on">
<table class="table table-hover" style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #333333; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; margin-bottom: 20px; max-width: 100%; width: 372px;"><thead style="box-sizing: border-box;">
<tr class="success" style="box-sizing: border-box;"><th style="background-color: #dff0d8; border-bottom: 2px solid rgb(214, 233, 198); border-left-color: rgb(214, 233, 198); border-right-color: rgb(214, 233, 198); border-top: 0px; box-sizing: border-box; line-height: 1.42857; padding: 8px; text-align: left; vertical-align: bottom;">In this article</th></tr>
</thead><tbody style="box-sizing: border-box;">
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">What is an Insertion sort <span class="glyphicon glyphicon-arrow-down" style="box-sizing: border-box; color: #4b91ba; display: inline-block; font-family: "glyphicons halflings"; font-size: xx-small; line-height: 1; padding-left: 0.1em; position: relative; top: 1px;"></span></td></tr>
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Implement Insertion sort - Demo (JavaScript - C#)</td></tr>
</tbody></table>
<b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;"><span style="font-size: small;"><br />1 - </span></b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><b>What is an Insertion Sort</b></span><br />
<span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><b><br /></b></span>
<br />
<div style="background-color: white; box-sizing: border-box; margin-bottom: 10px;">
<span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="font-size: 14px;">It is a sorting algorithm which sorts each Item in the list or array by shifting elements as they're encounter(one by one.)</span></span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; margin-bottom: 10px;">
In insertion sort we loop over an array from left to right and we compare current item in the iteration to it's left if it's less than pull it out and move the left index to the right then I<b>nsert </b>current item to the sorted place . so everything left to the CurrentItem in the iteration Is sorted.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; margin-bottom: 10px;">
<br /></div>
<div class="text-info" style="background-color: white; box-sizing: border-box; color: #3a87ad; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; margin-bottom: 10px;">
So let's see a sample implementation.</div>
<hr style="background-color: white; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top-color: rgb(238, 238, 238); border-top-style: solid; box-sizing: content-box; color: #333333; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; height: 0px; margin-bottom: 20px; margin-top: 20px;" />
<div class="section-note" style="box-sizing: border-box; display: list-item; margin-bottom: 1em; margin-left: 1.3em;">
<span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="background-color: white; font-size: 14px;"><b>JavaScript .</b></span></span><br />
<span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="background-color: white; font-size: 14px;"><b><br /></b></span></span>
<span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="background-color: white; font-size: 14px;">
<b>
</b>
</span></span><br />
<div class="codepen" data-default-tab="js,result" data-embed-version="2" data-height="265" data-pen-title="insertion sort" data-slug-hash="ZJXyBd" data-theme-id="0" data-user="saad306">
<span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="background-color: white; font-size: 14px;">See the Pen <a href="https://codepen.io/saad306/pen/ZJXyBd/">insertion sort</a> by Mohamed Salah (<a href="https://codepen.io/saad306">@saad306</a>) on <a href="https://codepen.io/">CodePen</a>.</span></span></div>
<span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="background-color: white; font-size: 14px;">
<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</span></span>
<span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="background-color: white; font-size: 14px;"><b><br /></b></span></span></div>
<hr style="background-color: white; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top-color: rgb(238, 238, 238); border-top-style: solid; box-sizing: content-box; color: #333333; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; height: 0px; margin-bottom: 20px; margin-top: 20px;" />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
<div style="box-sizing: border-box; margin-bottom: 10px;">
C#<br />
<br />
<iframe frameborder="0" height="475" src="https://dotnetfiddle.net/Widget/e9VLzF" width="100%"></iframe>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a hidden="" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYNDSRixdQ_c_3XNUmSQE7mSnSZcKElf-5LFbgwi1rAa6AXzS6PNbpiCLMTB1tTclVb7AkTC5g62fKv9OqhWhrymEPCAtca_x4_Cjjdm-tPAx3ORKFkDoUqpAv-dXDJjb0OQe6PYjpBo/s1600/insertion.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" visibility:=""><img border="0" data-original-height="258" data-original-width="678" height="121" hidden="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYNDSRixdQ_c_3XNUmSQE7mSnSZcKElf-5LFbgwi1rAa6AXzS6PNbpiCLMTB1tTclVb7AkTC5g62fKv9OqhWhrymEPCAtca_x4_Cjjdm-tPAx3ORKFkDoUqpAv-dXDJjb0OQe6PYjpBo/s320/insertion.PNG" visibility:="" width="320" /></a></div>
<br /></div>
</div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-79764607512043100582016-11-19T09:27:00.004-08:002016-11-19T09:27:49.000-08:00JavaScript Prototypes and Inheritance<div dir="ltr" style="text-align: left;" trbidi="on">
<table class="table table-hover" style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 20px; max-width: 100%; width: 372px;"><thead style="box-sizing: border-box;">
<tr class="success" style="box-sizing: border-box;"><th style="background-color: #dff0d8; border-bottom: 2px solid rgb(214, 233, 198); border-left-color: rgb(214, 233, 198); border-right-color: rgb(214, 233, 198); border-top: 0px; box-sizing: border-box; line-height: 1.42857; padding: 8px; text-align: left; vertical-align: bottom;">In this article</th></tr>
</thead><tbody style="box-sizing: border-box;">
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;"><a href="http://localhost:10215/Home/Article/6-javascript-prototypes-and-inheritance#1015" style="box-sizing: border-box; color: #428bca; text-decoration: none;">what's JavaScript prototypes <span class="glyphicon glyphicon-arrow-down" style="box-sizing: border-box; color: #4b91ba; display: inline-block; font-family: "glyphicons halflings"; font-size: xx-small; line-height: 1; padding-left: 0.1em; position: relative; top: 1px;"></span></a></td></tr>
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;"><a href="http://localhost:10215/Home/Article/6-javascript-prototypes-and-inheritance#1016" style="box-sizing: border-box; color: #428bca; text-decoration: none;">JavaScript Inheritance <span class="glyphicon glyphicon-arrow-down" style="box-sizing: border-box; color: #4b91ba; display: inline-block; font-family: "glyphicons halflings"; font-size: xx-small; line-height: 1; padding-left: 0.1em; position: relative; top: 1px;"></span></a></td></tr>
</tbody></table>
<br />
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><span style="font-size: small;">1 - </span></b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><b>What's JavaScript prototypes</b></span><br />
<span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><b><br /></b></span>
<br />
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 10px;">
JavaScript uses prototypes where many other object-oriented languages use classes for inheritance . It is possible to simulate many class-based features with prototypes in JavaScript .<span style="box-sizing: border-box;"><a href="https://en.wikipedia.org/wiki/JavaScript#Prototype-based_object-oriented_programming" style="box-sizing: border-box; color: blue; text-decoration: none;" target="_blank">wikipedia</a></span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 10px;">
All JavaScript objects inherit the properties and methods from their prototype. Objects created using an object literal, or with new Object(), inherit from a prototype called Object.prototype. Objects created with new Date() inherit the Date.prototype. The Object.prototype is on the top of the prototype chain.<span style="box-sizing: border-box;"><a href="http://www.w3schools.com/js/js_object_prototypes.asp" style="box-sizing: border-box; color: blue; text-decoration: none;" target="_blank">w3schools</a></span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 10px;">
You can consider a prototype is a pointer to a base Object when you create a new instance of that Object , and this mean if you change a prototype property of an object it will affect all objects constructed using that object.</div>
<div class="text-info" style="background-color: white; box-sizing: border-box; color: #3a87ad; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 10px;">
So let's see example and Create a new object and a new instance of it.</div>
<hr style="background-color: white; border-bottom: 0px; border-image: initial; border-left: 0px; border-right: 0px; border-top-color: rgb(238, 238, 238); border-top-style: solid; box-sizing: content-box; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; height: 0px; margin-bottom: 20px; margin-top: 20px;" />
<div class="section-note" style="box-sizing: border-box; display: list-item; margin-bottom: 1em; margin-left: 1.3em;">
<span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif;"><span style="background-color: white; font-size: 14px;"><b>Create object and new instance of it.</b></span></span><br />
<div class="text-danger" style="background-color: white; box-sizing: border-box; color: #b94a48; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 10px;">
Note : that every constructed function has a property called __proto__ , and you can use it to access base object prototype property as shown below.</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
employee(name, salary) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.Name = name;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.salay = salary<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Create prototype transportAllowance property.</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">employee.prototype.transportAllowance = 500;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// new instance of employee</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> emp = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, 5000);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// Create transportAllowance property of emp.</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">emp.transportAllowance = 400;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">document.write(emp.transportAllowance + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'<br/>'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">); </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Output 400</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">document.write(emp.__proto__.transportAllowance
+ </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">'<br/>'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">); </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">//output 50</span><o:p></o:p></div>
</div>
<br /></div>
<b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;"><span style="font-size: small;">2 - </span></b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><b>JavaScript Inheritance</b></span><br />
<span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><b><br /></b></span>
<br />
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 10px;">
Inheritance is the ability to create a class from another class, the "parent" class, extending the functionality and state of the parent in the derived, or "child" class. It allows derived classes to overload methods from their parent class.<br />
Inheritance is one of the pillars of object-orientation. It is the mechanism of designing one class from another and is one of the ideas for code reusability, supporting the concept of hierarchical classification. C# programs consist of classes, where new classes can either be created from scratch or by using some or all properties of an existing class.<br />
Another feature related to inheritance and reusability of code is polymorphism, which permits the same method name to be used for different operations on different data types. Thus, C# supports code reusability by both features. <span style="box-sizing: border-box;"><a href="https://en.wikibooks.org/wiki/C_Sharp_Programming/Inheritance#Inheritance" style="box-sizing: border-box; color: blue; text-decoration: none;" target="_blank">wiki</a></span></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 10px;">
JavaScript is a bit confusing for developers experienced in class-based languages (like Java or C++), as it is dynamic and does not provide a class implementation per se (the class keyword is introduced in ES6, but is syntactical sugar, JavaScript remaining prototype-based).<br />
When it comes to inheritance, JavaScript only has one construct: objects. Each object has an internal link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. null, by definition, has no prototype, and acts as the final link in this prototype chain.<br />
While this is often considered to be one of JavaScript's weaknesses, the prototypal inheritance model is in fact more powerful than the classic model. It is, for example, fairly trivial to build a classic model on top of a prototypal model, while the other way around is a far more difficult task. <span style="box-sizing: border-box;"><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Inheritance_and_the_prototype_chain" style="box-sizing: border-box; color: blue; text-decoration: none;" target="_blank">developer.mozilla</a></span></div>
<div class="text-info" style="background-color: white; box-sizing: border-box; color: #3a87ad; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 10px;">
let's see example in how to apply inheritance in JavaScript.</div>
<hr style="background-color: white; border-bottom: 0px; border-image: initial; border-left: 0px; border-right: 0px; border-top-color: rgb(238, 238, 238); border-top-style: solid; box-sizing: content-box; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; height: 0px; margin-bottom: 20px; margin-top: 20px;" />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
<div style="box-sizing: border-box; margin-bottom: 10px;">
Creating Prototypal Inheritance Chains</div>
</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//use this as a base function </span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
Person(firstName, lastName) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.FirstName = firstName,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.LastName = lastName,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.FullName = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.FirstName + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">' '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.LastName<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//and this is a derived function that inherited from Person function
above</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
employee(firstName, lastName, department, salary) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Call Person</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> Person.call(</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, firstName, lastName);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.Department = department,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.salay = salary,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.showInfo = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Name: '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.FirstName + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">' '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.LastName<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'<br/>'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Department: '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.Department<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'<br/>'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Salary: '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.salay<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//inherit Person</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">employee.prototype = Object.create(Person.prototype);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//set employee constructor to itself</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">employee.prototype.constructor = employee;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">document.write(</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'HR'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'5000'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">).showInfo())<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//output</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Name: Ahmed Saad</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Department: HR</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">//Salary: 5000</span><o:p></o:p></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh15xY9QIuVtkTFrxSX_pfoCthDzpag_uXyeXqJeUVmGM9KSnAfCATfVLRBEYh7dJgvbCwfGSxz64DhacrITFnYmPiwyoqtaISHE18JtIe5JvNd1GYJLZjMPO1mYs8uz1aXUyZeE0K-H4/s1600/blogpic.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; visibility: hidden;"><img border="0" height="84" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh15xY9QIuVtkTFrxSX_pfoCthDzpag_uXyeXqJeUVmGM9KSnAfCATfVLRBEYh7dJgvbCwfGSxz64DhacrITFnYmPiwyoqtaISHE18JtIe5JvNd1GYJLZjMPO1mYs8uz1aXUyZeE0K-H4/s200/blogpic.PNG" width="200" /></a></div>
<br /></div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-3076056188467600882016-11-19T08:52:00.000-08:002016-11-19T09:00:42.202-08:00JavaScript Properties<div dir="ltr" style="text-align: left;" trbidi="on">
<table class="table table-hover" style="background-color: white; border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 20px; max-width: 100%; width: 372px;"><thead style="box-sizing: border-box;">
<tr class="success" style="box-sizing: border-box;"><th style="background-color: #dff0d8; border-bottom: 2px solid rgb(214, 233, 198); border-left-color: rgb(214, 233, 198); border-right-color: rgb(214, 233, 198); border-top: 0px; box-sizing: border-box; line-height: 1.42857; padding: 8px; text-align: left; vertical-align: bottom;">In this article</th></tr>
</thead><tbody style="box-sizing: border-box;">
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Bracket Notation for Properties <span class="glyphicon glyphicon-arrow-down" style="box-sizing: border-box; color: #4b91ba; display: inline-block; font-family: "glyphicons halflings"; font-size: xx-small; line-height: 1; padding-left: 0.1em; position: relative; top: 1px;"></span></td></tr>
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Using Descriptors property <span class="glyphicon glyphicon-arrow-down" style="box-sizing: border-box; color: #4b91ba; display: inline-block; font-family: "glyphicons halflings"; font-size: xx-small; line-height: 1; padding-left: 0.1em; position: relative; top: 1px;"></span></td></tr>
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Writable attribute <span class="glyphicon glyphicon-arrow-down" style="box-sizing: border-box; color: #4b91ba; display: inline-block; font-family: "glyphicons halflings"; font-size: xx-small; line-height: 1; padding-left: 0.1em; position: relative; top: 1px;"></span></td></tr>
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Using Enumerabe Attribute <span class="glyphicon glyphicon-arrow-down" style="box-sizing: border-box; color: #4b91ba; display: inline-block; font-family: "glyphicons halflings"; font-size: xx-small; line-height: 1; padding-left: 0.1em; position: relative; top: 1px;"></span></td></tr>
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Useing Configurable Attribute <span class="glyphicon glyphicon-arrow-down" style="box-sizing: border-box; color: #4b91ba; display: inline-block; font-family: "glyphicons halflings"; font-size: xx-small; line-height: 1; padding-left: 0.1em; position: relative; top: 1px;"></span></td></tr>
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Using get and set </td></tr>
</tbody></table>
<br />
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><span style="font-size: medium;">1 - </span></b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: medium;"><b>Bracket Notation for Properties</b></span><br />
<span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: medium;"><b><br /></b></span>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
You can access property by using object followed by its property like this:</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'use strict'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee = {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> name: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> salary: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'5000'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// use object followed by property</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">document.write(employee.name)
</span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">//
output Ahmed</span><o:p></o:p></div>
</div>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
<span style="font-size: xx-small;">Or by using bracket notation like this:</span></div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'use strict'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee = {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> name: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> salary: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'5000'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// bracket notation</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">document.write(employee[</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">'name'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">]) </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">// output Ahmed</span><o:p></o:p></div>
</div>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
<span style="font-size: xx-small;">Also you can define a new property like this:</span></div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'use strict'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee = {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> name: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> salary: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'5000'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//assign new property</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">employee[</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'lastName'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">]
= </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// bracket notation</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">document.write(employee[</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">'lastName'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">]) </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">// output Saad</span><o:p></o:p></div>
</div>
<br />
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><span style="font-size: medium;">2 - Using Descriptors property</span></b><br />
<b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif;"><span style="font-size: small;"><br /></span></b>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
<span style="font-size: xx-small;">Beside name and value every property has a property Descriptor.</span></div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
<span style="font-size: xx-small;">Use property Descriptor to see attributes of that property.</span></div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
<span style="font-size: xx-small;">Every property has attributes value , writable , enumerable and configurable attributes and by default it's all set to true.</span></div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
<span style="font-size: xx-small;">You can see attributes by looping over <span style="box-sizing: border-box; color: blue;">Object.getOwnPropertyDescriptor()</span> property like this:</span></div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'use strict'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee = {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> name: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> salary: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'5000'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// looping over Object.getOwnPropertyDescriptor()</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">for</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> (</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> property </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">in</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
Object.getOwnPropertyDescriptor(employee, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'name'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">)) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> document.write(property + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">' '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> +
Object.getOwnPropertyDescriptor(employee, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'name'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">)[property])<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> document.write(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'<br/>'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Output</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//value Ahmed</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//writable true</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//enumerable true</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">//configurable true</span><o:p></o:p></div>
</div>
<br />
<b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;"><span style="font-size: medium;">3 - Writable attribute</span></b><br />
<span style="font-size: x-small;"><b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif;"><span style="font-size: small;"><br /></span></b>
</span><br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
<span style="font-size: xx-small;">You can use writable attribute to define whether the value of property can be changed from initial value or not.</span></div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
<span style="font-size: xx-small;">You can change the value of writable attribute by using <span style="box-sizing: border-box; color: blue;">Object.defineProperty()</span> like this :</span></div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'use strict'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee = {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> name: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> salary: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'5000'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Object.defineProperty(employee, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'name'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, { writable: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">false</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
});<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//trying to alter name</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">employee[</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'name'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">]
= </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">document.write(employee[</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'name'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">]);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Output</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//If you go to developer tools in your browser you will see error like
this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// " Uncaught TypeError: Cannot assign to read only property 'name'
of #<Object> "</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">// Note : you have
to use 'use strict'</span><o:p></o:p></div>
</div>
<span style="font-size: x-small;"><br /></span>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
<span style="font-size: xx-small;">You can not apply non-writable property if a property contains an object , you can use <span style="box-sizing: border-box; color: blue;">Object.freeze()</span> instead like this :</span></div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'use strict'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee = {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> name: {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> firstName: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> lastName: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> salary: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'5000'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Object.defineProperty(employee, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'name'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, { writable: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">false</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
});<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//trying to alter name.lastName</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">employee.name.lastName = </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Salah'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">document.write(employee.name.lastName); </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Output Salah</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Object.freeze(employee.name);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//trying to alter name.lastName</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">employee.name.lastName = </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">document.write(employee.name.lastName);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Output</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//If you go to developer tools in your browser you will see error like
this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// "Uncaught TypeError: Cannot assign to read only property
'lastName' of #<Object> "</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">// Note : you have
to use 'use strict'</span><o:p></o:p></div>
</div>
<br />
<b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;"><span style="font-size: medium;">4 - Using Enumerabe Attribute</span></b><br />
<span style="font-size: xx-small;"><b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif;"><span style="font-size: small;"><br /></span></b>
</span><br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
<span style="font-size: xx-small;">You can prevent property from being looping by setting enumerable attribute to false like this:</span></div>
<span style="font-size: xx-small;"><b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif;"><span style="font-size: small;"></span></b><br /></span>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
<span class="text-danger" style="box-sizing: border-box; color: #b94a48;">Note : If you set enumerable attribute to false it will affect when you try to serialize object to JSON</span></div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'use strict'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee = {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> name: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> salary: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'5000'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// looping over Object.getOwnPropertyDescriptor()</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">for</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> (</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> property </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">in</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> document.write(property + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">' '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + employee[property])<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> document.write(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">' '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">} </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Output value Ahmed , salary 5000</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//new line</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">document.write(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'<br/>'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Object.defineProperty(employee, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'name'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, { enumerable: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">false</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
});<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">for</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> (</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> property </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">in</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> document.write(property + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">' '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + employee[property])<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">} </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">//Output salary 5000</span><o:p></o:p></div>
</div>
<br />
<b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;"><span style="font-size: medium;">4 - </span></b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: medium;"><b>Useing Configurable Attribute</b></span><br />
<span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: medium;"><b><br /></b></span>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; margin-bottom: 1em; margin-left: 1.3em;">
<span style="font-size: xx-small;">Configurable Attribute can prevent an attribute from being changed or any property from being deleted from the object.</span></div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; margin-bottom: 1em; margin-left: 1.3em;">
<span style="font-size: xx-small;">Use <span style="box-sizing: border-box; color: blue;">Object.defineProperty(Object, 'property' , {configurable : false})</span> to set value to false.</span></div>
<div>
<div style="background-color: white;">
<b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;"><span style="font-size: medium;"><b style="color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;"><span style="font-size: medium;"><br /></span></b></span></b>
<b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;"><span style="font-size: medium;"><b style="color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;"><span style="font-size: medium;">5 - </span></b><span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: small;">Using get and set</span></span></span></b></div>
<b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;"><span style="font-size: medium;">
</span></b>
<br />
<div style="background-color: white; color: black; font-family: "Times New Roman"; font-size: medium; font-weight: normal;">
<br /></div>
<div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "helvetica neue", helvetica, arial, sans-serif; margin-bottom: 1em; margin-left: 1.3em;">
<b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif;"><span style="font-size: xx-small;">You can use get and set to set or return value by using a function like this</span></b></div>
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: medium; font-weight: bold;">
</span>
</span><br />
<div style="background-color: #c4bfbf; padding: 1em;">
<div style="font-weight: bold;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'use strict'</span><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"> employee = {<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"> name: {<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"> firstName: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"> lastName: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"> },<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"> salary: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'5000'</span><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;">Object.defineProperty(employee, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'fullName'</span><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;">, {<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"> get: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"> () {<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;">.name.firstName + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">' '</span><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;">.name.lastName<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;">});<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;">document.write(employee.fullName) </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//output Ahmed Saad</span><span style="background: white; color: black; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></span></div>
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">// Note you can use
same technique for set to set new value</span><b><o:p></o:p></b></span></div>
</div>
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">
<br />
</span></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKk4YIdw0G_jYWYnCXGEm4UasYfKLD7YiAn3tpPWeRjXlhSqd2aUkp5jL124SI9-dOLyUxZN8GALKyeFUV6om84l6W6pVWqPbIXrPI-uZ4uUaJQm2AdwIERMeDO73Gv0TzZnOms2Wupvw/s1600/blogpic.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; visibility: hidden;"><img border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKk4YIdw0G_jYWYnCXGEm4UasYfKLD7YiAn3tpPWeRjXlhSqd2aUkp5jL124SI9-dOLyUxZN8GALKyeFUV6om84l6W6pVWqPbIXrPI-uZ4uUaJQm2AdwIERMeDO73Gv0TzZnOms2Wupvw/s200/blogpic.PNG" width="200" /></a></div>
<div>
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span></div>
<div>
<span style="background-color: white; color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span></div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-25392552999519169652016-11-19T08:00:00.002-08:002016-11-19T08:02:50.255-08:00Objects in JavaScript<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="article-header panel panel-heading " style="background-color: white; border-radius: 3px 3px 4px 4px; border: 1px solid transparent; box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px; box-sizing: border-box; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 20px; padding: 10px 15px;">
<h1 style="box-sizing: border-box; font-size: 36px; font-weight: 500; line-height: 1.1; margin: 20px 0px 10px;">
Objects in JavaScript</h1>
</div>
<div class="article-body panel panel-body" style="background-color: white; border-radius: 4px; border: 1px solid transparent; box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 1px; box-sizing: border-box; color: #333333; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; margin-bottom: 20px; padding: 15px;">
<table class="table table-hover" style="border-collapse: collapse; border-spacing: 0px; box-sizing: border-box; color: #333333; font-size: 14px; margin-bottom: 20px; max-width: 100%; width: 372px;"><thead style="box-sizing: border-box;">
<tr class="success" style="box-sizing: border-box;"><th style="background-color: #dff0d8; border-bottom: 2px solid rgb(214, 233, 198); border-left-color: rgb(214, 233, 198); border-right-color: rgb(214, 233, 198); border-top: 0px; box-sizing: border-box; line-height: 1.42857; padding: 8px; text-align: left; vertical-align: bottom;">In this article</th></tr>
</thead><tbody style="box-sizing: border-box;">
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Create object by using JavaScript object literal </td></tr>
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Using constructor to create Objects in JavaScript <span class="glyphicon glyphicon-arrow-down" style="box-sizing: border-box; color: #4b91ba; display: inline-block; font-family: "glyphicons halflings"; font-size: xx-small; line-height: 1; padding-left: 0.1em; position: relative; top: 1px;"></span></td></tr>
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Create object by using object.create() <span class="glyphicon glyphicon-arrow-down" style="box-sizing: border-box; color: #4b91ba; display: inline-block; font-family: "glyphicons halflings"; font-size: xx-small; line-height: 1; padding-left: 0.1em; position: relative; top: 1px;"></span></td></tr>
<tr class="" style="box-sizing: border-box;"><td style="border-top: 1px solid rgb(221, 221, 221); box-sizing: border-box; line-height: 1.42857; padding: 8px; vertical-align: top;">Using ECMAScript 6 Classes to create javescript Objects</td></tr>
</tbody></table>
</div>
<b><span style="font-size: large;">1 - Create object by using JavaScript object literal</span></b><br />
<div>
<b><br /></b>
<br />
<div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
You can create javascript Object literal like this.</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//object literal</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee = {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> firstName: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> lastName: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">};<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// you can call it like this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">document.write(employee.firstName); </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//output : Ahmed</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<br /></div>
</div>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
Add property to your Object .</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//object literal</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee = {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> firstName: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> lastName: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">};<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// add object property</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">employee.salary = 5000;a<o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">document.write(employee.salary);
</span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">//output
: 5000</span><o:p></o:p></div>
</div>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
Add a Function to your Object .</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//object literal</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee = {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> firstName: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> lastName: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">};<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Add Function </span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">employee.fullName = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
() {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> document.write(</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.firstName + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">' '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.lastName)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// Note : this keyword refers to object
itself</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// call function like this </span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">employee.fullName();
</span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">//Output
: Ahmed Saad</span><o:p></o:p></div>
</div>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
Another way to add a Function to your Object , Add a Function inside your Object .</div>
</div>
</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//object literal</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee = {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> firstName: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> lastName: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> fullName: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> document.write(</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.firstName + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">' '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.lastName)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// Note : this keyword refers
to object itself</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">};<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// call function like this </span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">employee.fullName();
</span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">//Output
: Ahmed Saad</span><o:p></o:p></div>
</div>
<br />
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
</div>
<br />
<div style="margin: 0px; orphans: 2; text-align: left; text-indent: 0px; widows: 2;">
<b style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px;"><span style="font-size: large;">2 - </span></b><span style="font-size: large;"><b>Using constructor to create Objects in JavaScript</b></span></div>
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; margin: 0px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<b><span style="font-size: large;"><br /></span></b></div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
If you want to create multi instance of an object you can use constructor to create Objects.</div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
After createing constructor Object use <span style="box-sizing: border-box; color: blue;">new</span> Keyword to create new instance of your objets.</div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
Here is how to create constructor Object</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//constructor object </span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
employee() {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.firstName
= </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.lastName = </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">};<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Create new instance </span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> emp = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// use it like this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">document.write(emp.firstName)
</span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">//Output
: Ahmed</span><o:p></o:p></div>
</div>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
You can pass values of properties to function instead of hardcoded it. </div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
your constructor function will look like this .</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//constructor object with parameters</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
employee(fName, lName) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.firstName = fName,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.lastName = lName<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">};<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Create new instance and pass values </span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> emp = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// use it like this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">document.write(emp.firstName)
</span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">//Output
: Ahmed</span><o:p></o:p></div>
</div>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
Add Function to your Object .</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//constructor object with parameters and function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
employee(fName, lName) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.firstName = fName,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.lastName = lName,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.fullName = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> document.write(</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.firstName + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">' '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.lastName)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">};<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Create new instance and pass values </span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> emp = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">// use it like this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">emp.fullName() </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">//Output : Ahmed
Saad</span><o:p></o:p></div>
</div>
<br />
<br />
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "times new roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; margin: 0px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
</div>
<br />
<div style="margin: 0px;">
<div style="margin: 0px;">
<b style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px;"><span style="font-size: large;">3 - </span></b><span style="font-size: large;"><b>Create object by using object.create()</b></span></div>
<div style="margin: 0px;">
<br /></div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
The Object.create() method creates a new object with the specified prototype object and properties.</div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
Here is how to create Object by using Object.create() method .</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//use objact.create()</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> employee =
Object.create(Object.prototype,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> firstName: {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> value: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> lastName: {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//go to JavaScript Object
Properties Article for more details</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> writable: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">true</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> configurable: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">true</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> value: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">);<o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">document.write(employee.firstName)</span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">//Output : Ahmed</span><o:p></o:p></div>
</div>
<span style="background-color: white; color: #3a87ad; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif; font-size: 14px; font-weight: bold;">For more details about JavaScript Object Properties </span>Click here<br />
<br />
<br />
<div style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; margin: 0px; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
</div>
<br />
<div style="margin: 0px;">
<div style="margin: 0px;">
<b style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; text-transform: none; white-space: normal; word-spacing: 0px;"><span style="font-size: large;">4 - </span></b><span style="font-size: large;"><b>Using ECMAScript 6 Classes to create javescript Objects</b></span></div>
<div style="margin: 0px;">
<span style="font-size: large;"><b><br /></b></span></div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
ECMAScript 6 provide functionality to use Class structure to Create object. </div>
<div class="section-note text-danger" style="background-color: white; box-sizing: border-box; color: #b94a48; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
Note: Browser must support ECMAScript 6 , I used Microsoft Edge for this example. </div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
Here is how to create Object by using class .</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Ecma Script 6 Classes </span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
Employee {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> constructor(fName, lName) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.firstName = fName<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.lastName = lName<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> fullName() {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//new liine</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> document.write(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'<br\>'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> document.write(</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.firstName, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">' '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">this</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">.lastName)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> emp = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> Employee(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Ahmed'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Saad'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//use it</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">document.write(emp.firstName) </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Output : Ahmed</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//call function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">emp.fullName(); </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Ourput
: Ahmed Saad</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<br /></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp7zGfFjWgCL_hZ1lo16CCoOHW_J8ZCdoU7CYgiPCGCHbFRKaA3NLv24USnGJlrHN0R9FyEhIu0Vb-YW3eBWI0jGw6SgQA6WCURxuEfswTBM_Lj1R7Yiwd5rNIiQBkgDlNXhlX3QgMMnM/s1600/blogpic.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; visibility: hidden;"><img border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp7zGfFjWgCL_hZ1lo16CCoOHW_J8ZCdoU7CYgiPCGCHbFRKaA3NLv24USnGJlrHN0R9FyEhIu0Vb-YW3eBWI0jGw6SgQA6WCURxuEfswTBM_Lj1R7Yiwd5rNIiQBkgDlNXhlX3QgMMnM/s200/blogpic.PNG" width="200" /></a></div>
<br /></div>
</div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-51070044415416406442016-11-19T07:09:00.001-08:002016-11-19T07:14:57.205-08:00Sort unordered list by JavaScript Array sort() Method<div dir="ltr" style="text-align: left;" trbidi="on">
<h1>
Use JavaScript sort() Method</h1>
<b><br /></b>
<b>- This example show how to sort an unordered list by using array and for loop. </b><br />
<b><br /></b>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
You will need to write your own html code to genrete ul.</div>
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
here is a basic ul and sort button.</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">input</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">type</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">='button'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">value</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">='Sort'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">onclick</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">='</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">SortLang()</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">ul</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">HTML</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">JavaScript</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">C #</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">VB</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">ul</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span><o:p></o:p></div>
</div>
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
and here is this SortLang () function </div>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
SortLang() {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> languages = [];<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> items = document.getElementsByTagName(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"li"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">for</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> (</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> i = 0, l = items.length; i
< l; i++) {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
languages.push(items[i].innerHTML)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> languages.sort();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">for</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> (</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> i = 0, l = items.length; i
< l; i++) {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> items[i].innerHTML =
languages[i];<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">}</span><o:p></o:p></div>
</div>
<br />
<br />
<div class="section-note" style="background-color: white; box-sizing: border-box; color: #333333; display: list-item; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: bold; margin-bottom: 1em; margin-left: 1.3em;">
Try It </div>
<div class="codepen" data-default-tab="js,result" data-embed-version="2" data-height="264" data-pen-title="XXWKmK" data-slug-hash="XXWKmK" data-theme-id="0" data-user="saad306">
See the Pen <a href="http://codepen.io/saad306/pen/XXWKmK/">XXWKmK</a> by Mohamed Salah (<a href="http://codepen.io/saad306">@saad306</a>) on <a href="http://codepen.io/">CodePen</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH3oIdSCi2rzQY7HFK-UPr5_xZyX6YEiKhp1szEhNNOFrK1kLyKu3BvKw0WFKhkqKy-EyX976G6pP9dtn_LZQtx7tErhFYvpvkDBGqaVPW7mSQpHMmX7mW5bPPY5wU0PRmBP-1L5hMiMY/s1600/blogpic.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; visibility: hidden;"><img border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH3oIdSCi2rzQY7HFK-UPr5_xZyX6YEiKhp1szEhNNOFrK1kLyKu3BvKw0WFKhkqKy-EyX976G6pP9dtn_LZQtx7tErhFYvpvkDBGqaVPW7mSQpHMmX7mW5bPPY5wU0PRmBP-1L5hMiMY/s320/blogpic.PNG" width="320" /></a></div>
<br /></div>
<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-13259213570697003722016-11-19T06:51:00.002-08:002023-02-24T01:03:02.276-08:00How to Manipulate and fill HTML Table - JavaScript & jQuery
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7133854016810018"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-7133854016810018"
data-ad-slot="5700254903"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div dir="ltr" style="text-align: left;" trbidi="on">
<h1>
Manipulate and fill HTML Table
</h1>
<h2>
1- Fill table by using jQuery append method. </h2>
<div dir="ltr" style="text-align: left;" trbidi="on">
<ul style="text-align: left;">
<li><b>Table Structure</b></li>
</ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">table</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">id</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="names"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">First Name</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Last Name</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">table</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span></div>
</div>
<ul style="text-align: left;">
<li><b>Code to append data from json </b></li>
</ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> jsonNames = { </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"Mohamed"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"saad"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"joseph"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"Dankwah"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"Christian"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"mensah"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">$.each(jsonNames, </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> (key, val) {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"<tr><td>"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + key + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"</td><td>"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + val + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"</td</tr>"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">).appendTo(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"#names"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">)<o:p></o:p></span></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">});</span><span dir="RTL" lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><o:p></o:p></span></div>
</div>
<br />
<br />
<div dir="ltr" style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-size: medium; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;" trbidi="on">
</div>
<div class="codepen" data-default-tab="js,result" data-embed-version="2" data-height="265" data-pen-title="appendTo from json" data-slug-hash="pgoVqp" data-theme-id="0" data-user="saad306">
See the Pen <a href="http://codepen.io/saad306/pen/pgoVqp/">appendTo from json</a> by Mohamed Salah (<a href="http://codepen.io/saad306">@saad306</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<br />
<h2 style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
</h2>
<h2 style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
2- Fill table by retrieving data from user input . </h2>
<div>
<ul style="text-align: left;">
<li><b>Here is html structure</b> </li>
</ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">label</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">First Name : </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">input</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">id</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="frist-name"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">type</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="text"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">label</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">br</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">br</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">label</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Last Name : </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">input</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">id</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="last-name"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">type</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="text"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">label</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">br</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">br</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">input</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">type</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="button"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">value</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="Add Name"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">onclick</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">addname()</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">br</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">br</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">table</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">id</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="names"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">First Name</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Last Name</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Full Name</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">table</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span></div>
</div>
<ul style="text-align: left;">
<li><b>And your Code </b></li>
</ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
addname() {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> fName = $(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"#frist-name"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">).val().toUpperCase();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> lName = $(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"#last-name"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">).val().toUpperCase();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">if</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> (fName != </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">""</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
&& lName != </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">""</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">)
{<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"<tr><td>"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + fName + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"</td><td>"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + lName + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"</td><td>"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + fName + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">" "</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + lName + </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"</td></tr>"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">).appendTo(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"#names"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">}</span><o:p></o:p></div>
</div>
<br />
<ul style="text-align: left;">
<li>Try It .. </li>
</ul>
<div class="codepen" data-default-tab="html,result" data-embed-version="2" data-height="265" data-pen-title="appendTo from input" data-slug-hash="KVKRYZ" data-theme-id="0" data-user="saad306">
See the Pen <a href="http://codepen.io/saad306/pen/KVKRYZ/">appendTo from input</a> by Mohamed Salah (<a href="http://codepen.io/saad306">@saad306</a>) on <a href="http://codepen.io/">CodePen</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2cRPH81eGDLVN0x909sXSq5T9Z3cmZL0gTOD4vVstdqpCsjoarQ6DRmvX3SEqFlEfzfinoFSt7BhbBfGcacOSiWHI0K8VbFrywq66Z1YqPIEzRqlZJ450tG0Vx4iqtYTI7Q4UoQdm28/s1600/blogpic.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; visibility: hidden;"><img border="0" height="94" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ2cRPH81eGDLVN0x909sXSq5T9Z3cmZL0gTOD4vVstdqpCsjoarQ6DRmvX3SEqFlEfzfinoFSt7BhbBfGcacOSiWHI0K8VbFrywq66Z1YqPIEzRqlZJ450tG0Vx4iqtYTI7Q4UoQdm28/s200/blogpic.PNG" width="200" /></a></div>
<br /></div>
<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-58511300963567644602016-11-18T07:25:00.000-08:002016-11-18T07:47:43.375-08:00Getting Started - Create a SPA And use AngularJS $http Service<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<h1>
AngularJS & Web API - SPA & $http </h1>
<div>
<div style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;">
<h1 style="color: black; font-family: "Times New Roman";">
<b style="color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;">- This article is Part of a series :</b></h1>
<div style="color: black; font-family: "Times New Roman"; font-size: medium;">
<ul style="text-align: left;"><ol style="font-size: medium;">
<li style="font-weight: normal;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: 13.2px;"><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/how-to-create-single-page-application.html">Getting Started - Create a simple Single Page Application (SPA) - Angularjs</a></span></span></li>
<li><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/create-restful-apis-and-angularjs-spa-1.html">Getting Started - Entity Framework Code First</a></li>
<li style="font-weight: bold;"><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/getting-started-web-api.html" style="font-weight: normal;">Getting Started - Web API</a></li>
<li style="font-weight: normal;"><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/getting-started-create-spa-and-use.html"><b>Getting Started - Create a SPA And use AngularJS $http Service</b></a></li>
</ol>
</ul>
</div>
</div>
<ol style="text-align: left;">
</ol>
<br /></div>
<div>
<ul style="text-align: left;">
<li><b style="background-color: white;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: 13.2px;">After Configuration of our Web API in </span></span></b><a href="https://github.com/salah306/Library/">Library</a> <b>project(</b><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/getting-started-web-api.html"><span style="font-size: x-small;">Getting Started - Web API</span></a><b>) , Open project </b><b>From the Tools menu click NuGet Package Manager and then click Package Manager Console. In the Package Manager Console write the following command: </b></li>
</ul>
<div>
<div style="background-color: black; color: white; padding: 1em;">
PM> Install-Package angularjs</div>
<ul style="text-align: left;">
<li><b>Also install bootstrap - we'll use it for styling </b></li>
</ul>
<div style="background-color: black; color: white; padding: 1em;">
PM> Install-Package bootstrap</div>
<br />
<br />
<ul style="text-align: left;">
<li>In project root add new html page named Index.html and add references to Bootstrap & AngularJS <span style="font-size: x-small;">(from Scripts and Content folders)</span> , Edit html to look like fallowing :</li>
</ul>
<div style="text-align: center;">
<span style="font-size: x-small;"><i><b>"This is page contain navigation bar and all references I needed so far </b></i></span></div>
<div style="text-align: center;">
<span style="font-size: x-small;"><i><b>For more - <a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/how-to-create-single-page-application.html">See Also - How to Create a Single-Page Application (SPA) </a>"</b></i></span></div>
<ul style="text-align: left;">
</ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//Index.html</span><br />
<br />
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">!DOCTYPE</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">html</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">html</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-app</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">myLibrary</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">head</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">title</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">title</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">meta</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">charset</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="utf-8"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span><br />
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><br /></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">link</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">href</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="../Content/bootstrap.css"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">rel</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="stylesheet"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">src</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="/Scripts/angular.js"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">src</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="Scripts/angular-route.js"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span><br />
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><br /></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: darkgreen; font-family: "consolas"; font-size: 9.5pt;"><!-- Starting App Scripts--></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">src</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="Scripts/LibraryApp/libraryModule.js"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">src</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="Scripts/LibraryApp/libraryService.js"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">src</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="Scripts/LibraryApp/booksController.js"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">script</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">src</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">="Scripts/LibraryApp/authorsController.js"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">script</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span><o:p></o:p></div>
</div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">head</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">body</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="navbar navbar-inverse
navbar-fixed-top"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="container"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="navbar-header"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">button</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">type</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="button"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="navbar-toggle"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">data-toggle</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="collapse"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">data-target</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=".navbar-collapse"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">span</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="icon-bar"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">span</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">span</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="icon-bar"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">span</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">span</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="icon-bar"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">span</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">button</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="navbar-brand"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">href</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="#"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Library</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="navbar-collapse
collapse"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">ul</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="nav
navbar-nav"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">href</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="#books"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Books</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">href</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="#authors"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Author</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">ul</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">style</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">margin-top</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">:</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">5em"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="container"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: yellow; color: darkgreen; font-family: "consolas"; font-size: 9.5pt;"><!-- All Pages will
load in this part --></span><span style="background: yellow; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: yellow; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: yellow; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: yellow; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: yellow; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-view</span><span style="background: yellow; color: blue; font-family: "consolas"; font-size: 9.5pt;">></</span><span style="background: yellow; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">body</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">html</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span><o:p></o:p></div>
</div>
<span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 13.2px;"><b><span style="font-size: 14px;"><br /></span></b></span>
<br />
<ul style="text-align: left;">
<li><b style="color: #252525; font-family: sans-serif; font-size: 13.2px;"><span style="font-size: 14px;">add new folder named </span><span style="font-size: 14px;">templates , </span></b><b style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">In <b style="font-size: 13.2px;"><span style="font-size: 14px;">templates </span></b>folder add 2 new paes named books.html & authors.html , in the </b><b style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">books.html & </b><b style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">& authors.html Edit dom to like like this:</b></li>
</ul>
<div>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//books.html</span><br />
<br />
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">table</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="table table-condensed
table-hover"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">thead</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> Book Name<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> Author<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">thead</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tbody</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-repeat</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">book</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><b><span style="background: white; color: darkgreen; font-family: "consolas"; font-size: 9.5pt;">in</span></b><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">books</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">td</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <b>{{</b></span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">book.bookName</span><b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}}</span></b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">td</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">td</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <b>{{</b></span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">book.authorName</span><b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}}</span></b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">td</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tbody</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">table</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span><o:p></o:p></div>
</div>
</div>
<br />
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//authors.html</span><br />
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">table</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="table table-condensed
table-hover"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">thead</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> Author Name<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> Available
books<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">thead</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tbody</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-repeat</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">author</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><b><span style="background: white; color: darkgreen; font-family: "consolas"; font-size: 9.5pt;">in</span></b><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">authors</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">td</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <b>{{</b></span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">author.authorName</span><b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}}</span></b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">td</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">td</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <b>{{</b></span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">author.bookCount</span><b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}}</span></b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">td</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tbody</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">table</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span><o:p></o:p></div>
</div>
<br /></div>
<span style="color: #252525; font-family: sans-serif;"><span style="font-size: 14px;"></span></span><br />
<h4 style="background-color: white; margin: 0px; position: relative;">
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;">Add new folder in Scripts folder named L</span></span><b style="color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;">ibrary</b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;">App and add 4 JavaScript files named libraryModule.js , <b style="color: black; font-family: "Times New Roman"; font-size: medium;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;">l</span></span><b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: 13.2px;">ibraryService.js </span></span></b></b>, booksController.js , authorsController.js</span></span><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;">) . </span></span></b></li>
</ul>
</h4>
</div>
</div>
<div>
<br /></div>
<div>
<b style="background-color: white;"><b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: 13.2px;">1- </span></span></b></b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: 13.2px;"><b>In l</b></span></span><b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">ibraryModule.js </span></b><br />
<b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><br /></span></b></div>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//libraryModule.js</span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><br />
<br />
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> libraryModule =
angular.module(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"libraryModule"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, [</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'ngRoute'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">])<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> .config(</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> ($routeProvider) {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $routeProvider.when(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'/books'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, { templateUrl: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'/templates/books.html'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, controller: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'booksController'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> });<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $routeProvider.when(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'/authors'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, { templateUrl: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'/templates/authors.html'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, controller: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'authorsController'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> });<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//default </span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $routeProvider.otherwise({
templateUrl: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'/templates/books.html'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, controller: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'booksController'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
});<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"> });</span><o:p></o:p></div>
</div>
<br />
<div>
<b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;">2-</span><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"> In </span></b><b style="background-color: white;"><b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: 13.2px;">libraryService</span></span></b></b><br />
<b style="background-color: white;"><b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: 13.2px;"><br /></span></span></b></b>
<br />
<div style="text-align: center;">
<b style="background-color: white;"><b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: x-small;"><i>"<a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/getting-started-web-api.html">See also - Getting Started - Web API</a>"</i></span></span></b></b></div>
<div style="text-align: center;">
<b style="background-color: white;"><b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: x-small;"><i><br /></i></span></span></b></b></div>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//libraryService.js</span><br />
<br />
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">libraryModule.factory(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'libraryService'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> ($http, $q) {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> svc = {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> getAllBooks: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> deferred = $q.defer();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $http.get(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'/api/books'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
.success(deferred.resolve)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
.error(deferred.reject);<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> deferred.promise;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> getAllAuthors: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> deferred = $q.defer();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $http.get(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'/api/authors'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
.success(deferred.resolve)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
.error(deferred.reject);<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> deferred.promise;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> svc;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">})</span><o:p></o:p></div>
</div>
<br /></div>
<div>
<b><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;">3-</span><span style="font-size: 13.2px;"> In </span></span></b><b style="background-color: white;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;">booksController.js</span></span></b><br />
<b style="background-color: white;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;"><br /></span></span></b>
<br />
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//booksController.js</span><span style="left: 2em; position: absolute;"><br /></span><br />
<br />
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">libraryModule.controller(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"booksController"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> ($scope, libraryService) {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $scope.books = [];<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> getAllBooks = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
libraryService.getAllBooks().then(<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> (books) {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $scope.books =
books;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> (error) {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> console.log(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Error'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, error);<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> });<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">});</span><o:p></o:p></div>
</div>
<br /></div>
<div>
<b style="background-color: white;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;">4- </span><span style="font-size: 13.2px;">In </span></span></b><b style="background-color: white;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;">authorsController.js</span></span></b><br />
<b style="background-color: white;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 13.2px;"><span style="font-size: 13.2px;"><br /></span></span></b>
<br />
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//authorsController.js</span><br />
<br />
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">libraryModule.controller(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"authorsController"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> ($scope, libraryService) {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $scope.authors = [];<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> getAllAuthors = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> () {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> libraryService.getAllAuthors().then(<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> (authors) {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $scope.authors =
authors;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> (error) {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> console.log(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Error'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, error);<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> });<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">});</span><o:p></o:p></div>
</div>
<br />
<b>- That is all ! - Now run your project and go to Index page to see your work .</b><br />
<b><br /></b>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2UFCR069WxuxdDO3hw2y-pPM8K16Fn6uu177v4WBLwMkJdfuPsJIE_4Vr8fzBLwnh0QJlirhMP9UsrlLES7eL70o8l45QxI6MTVYyNiZvIoVj3qmrzgzsa3_xSN8wdZie47enpQyEeaw/s1600/library.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2UFCR069WxuxdDO3hw2y-pPM8K16Fn6uu177v4WBLwMkJdfuPsJIE_4Vr8fzBLwnh0QJlirhMP9UsrlLES7eL70o8l45QxI6MTVYyNiZvIoVj3qmrzgzsa3_xSN8wdZie47enpQyEeaw/s400/library.PNG" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Index Page</td></tr>
</tbody></table>
<b><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><br /></b>
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;">- </b><b><a href="https://github.com/salah306/Library/">link </a></b><b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;">to project in github.</b></div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-83057761108571749502016-11-17T09:31:00.000-08:002016-11-18T07:48:05.943-08:00Getting Started - Web API<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<h1>
ASP.NET Web API</h1>
<div>
<div style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;">
<h1 style="color: black; font-family: "Times New Roman";">
<b style="color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;">- This article is Part of a series :</b></h1>
<div style="color: black; font-family: "Times New Roman"; font-size: medium;">
<ul style="text-align: left;"><ol style="font-size: medium;">
<li style="font-weight: normal;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: 13.2px;"><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/how-to-create-single-page-application.html">Getting Started - Create a simple Single Page Application (SPA) - Angularjs</a></span></span></li>
<li><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/create-restful-apis-and-angularjs-spa-1.html">Getting Started - Entity Framework Code First</a></li>
<li><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/getting-started-web-api.html" style="font-weight: normal;"><b>Getting Started - Web API</b></a></li>
<li style="font-weight: bold;"><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/getting-started-create-spa-and-use.html" style="font-weight: normal;">Getting Started - Create a SPA And use AngularJS $http Service</a></li>
</ol>
</ul>
</div>
</div>
<ol style="text-align: left;">
</ol>
</div>
<div>
<ol style="text-align: left;">
<div>
<ul style="text-align: left;"></ul>
</div>
</ol>
<div>
<ul style="text-align: left;">
<li><b>After created data model in </b><a href="https://github.com/salah306/Library/" style="font-weight: bold;">Library</a><b> project - From</b><b><b> solution explorer </b>right click on your project , select </b><span style="background-color: yellow; font-size: x-small;"><b>Add</b></span><b>, then select </b><span style="background-color: yellow; font-size: x-small;"><b>new Scaffolded Item</b></span><b> , select </b><span style="background-color: yellow; font-size: x-small;"><b>Web API Controller - Empty</b></span><b>, In the Add Controller dialog name the controller </b><span style="background-color: yellow; font-size: x-small;"><b>BooksController</b></span><b> </b><i><span style="font-size: x-small;"><b>(</b>Web API controllers inherit the ApiController class that handles HTTP requests<b>)</b></span></i><b>.</b></li>
</ul>
<div>
<ul style="text-align: left;">
<li><b>Add new folder named <span style="background-color: yellow;">ViewModels</span> , In ViewModels folder add new class Named <span style="background-color: yellow;">BooksVm</span> and class named <span style="background-color: yellow;">AuthorVm</span> Write the following :</b></li>
</ul>
<div style="text-align: center;">
<span style="font-size: x-small;"><i>"You can consider using of viewModels classes as data transfer object(DTO)</i></span></div>
<div style="text-align: center;">
<span style="font-size: x-small;"><i>this is to avoid circular references becouese of navagtion property in Author class</i></span></div>
<div style="text-align: center;">
<span style="font-size: x-small;"><i>also you may need to hide or add some new property. <a href="https://www.asp.net/web-api/overview/data/using-web-api-with-entity-framework/part-5" target="_blank">see also</a>"</i></span></div>
</div>
<div style="text-align: center;">
<span style="font-size: x-small;"><i><br /></i></span></div>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//BookVm.cs</span><br />
<br />
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">namespace</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
Library.ViewModels<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BookVm</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">int</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> BookId { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> BookName { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">int</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> AuthorId { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> AuthorName { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">}</span><o:p></o:p></div>
</div>
<br />
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//AuthorVm.cs</span><br />
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><br /></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">namespace</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
Library.ViewModels<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">AuthorVm</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">int</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <span style="font-size: 12.6667px;">AuthorId</span>{ </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> AuthorName { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">int</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> BookCount { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">}</span><o:p></o:p></div>
</div>
<br />
<ul style="text-align: left;">
<li><b>Back to Controllers ,ِRight click in Controllers folder and</b> <b>Add new<b><span style="font-size: x-small;"> </span><span style="background-color: yellow; font-size: x-small;">Web API Controller - Empty</span></b>, In the Add Controller dialog name the controller </b><span style="background-color: yellow; font-size: x-small;"><b>AuthorsController</b></span></li>
</ul>
<div>
<ul style="text-align: left;">
<li><b>Add the following methods(These methods implement GET , Post request) to <span style="font-size: x-small;"><b>Books</b><b>Controller.cs and</b> </span></b><b><span style="font-size: x-small;">AuthorsController.cs</span></b></li>
</ul>
</div>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//BooksController.cs</span><br />
<br />
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">namespace</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
Library.Controllers<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> [</span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Route</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"api/books"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">)]<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BooksController</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> : </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">ApiController</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">LibraryDbContext</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> db = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">LibraryDbContext</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">IQueryable</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BookVm</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">> GetBooks()<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> books = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">from</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> book </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">in</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> db.Books<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">select</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BookVm</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> BookId
= book.BookId,<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
BookName = book.BookName,<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
AuthorId = book.AuthorId,<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> AuthorName = book.Author.AuthorName<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> books;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
</div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">}</span><o:p></o:p></div>
</div>
<br />
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//AuthorController.cs</span><br />
<br />
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">namespace</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
Library.Controllers<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> [</span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Route</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"api/authors"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">)]<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">AuthorsController</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> : </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">ApiController</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">LibraryDbContext</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> db = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">LibraryDbContext</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">IQueryable</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">AuthorVm</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">> GetBooks()<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> authors = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">from</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> author </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">in</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> db.Authors<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">select</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">AuthorVm</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> AuthorId = author.AuthorId,<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
AuthorName = author.AuthorName,<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
BookCount = author.Books.Count()<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> authors;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
</div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">}</span><o:p></o:p></div>
</div>
<br />
<br />
<ul style="text-align: left;">
<li><b>Now we have "Get method" in each controller , Run your project to test get request <i>e.g. </i></b><b><span style="font-size: x-small;">http://localhost:xxxx/api/books</span> or <span style="font-size: x-small;">http://localhost:xxxx/api/authors</span> .</b></li>
</ul>
<b><br /></b>
<br />
<ul style="text-align: left;">
<li><b>to configure <b>retrieved </b>formatter for the JSON data to retrieve Json <span style="font-size: x-small;">"Camel case"</span> , In the </b><span style="background-color: yellow;">App_Start</span><b> folder open </b><span style="background-color: yellow;">WebApiConfig.cs</span> <b>And add the following code to </b><span style="background-color: yellow;">Register method</span> <b>:</b></li>
</ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//WebApiConfig.cs</span><br />
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> json =
config.Formatters.JsonFormatter;<o:p></o:p></span></div>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">
json.SerializerSettings.ContractResolver = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">CamelCasePropertyNamesContractResolver</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">();</span><o:p></o:p></div>
</div>
<br />
<b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="background-color: white; font-size: 13.2px;">- </span></span></b><b><a href="https://github.com/salah306/Library/" target="_blank">link </a></b><b style="background-color: white; color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="background-color: white; font-size: 13.2px;">to project in github.</span></span></b></div>
</div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-38355723360380339272016-11-15T14:22:00.001-08:002016-11-18T07:48:29.706-08:00Getting Started - Entity Framework Code First <div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<h1>
Entity Framework Code First</h1>
<h1>
<b style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px;"> - This article is Part of a series :</b></h1>
<div>
<ul style="text-align: left;"><ol style="font-size: medium;">
<li style="font-weight: normal;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: 13.2px;"><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/how-to-create-single-page-application.html">Getting Started - Create a simple Single Page Application (SPA) - Angularjs</a></span></span></li>
<li><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/create-restful-apis-and-angularjs-spa-1.html"><b>Getting Started - Entity Framework Code First</b></a></li>
<li style="font-weight: bold;"><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/getting-started-web-api.html" style="font-weight: normal;">Getting Started - Web API</a></li>
<li style="font-weight: bold;"><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/getting-started-create-spa-and-use.html" style="font-weight: normal;">Getting Started - Create a SPA And use AngularJS $http Service</a></li>
</ol>
</ul>
<div>
<b><br /></b></div>
<ul style="text-align: left;">
<li><b>open visual studio and Create a new web application named Library</b></li>
</ul>
<div>
<ul style="text-align: left;">
<li><b>Select Empty template and click OK</b></li>
</ul>
</div>
<div>
<ul style="text-align: left;">
<li><b>From the Tools menu click NuGet Package Manager and then click Package Manager Console. In the Package Manager Console write the following command: </b></li>
</ul>
<div style="background-color: black; color: white; padding: 1em;">
PM> Install-Package EntityFramework
</div>
<br />
<ul style="text-align: left;">
</ul>
<div>
<h2>
- Create the Data Model</h2>
<div>
<ul style="text-align: left;">
<li>add new folder named Models then Create 2 classes named <span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">Author.cs </span> and <span style="background-color: white; color: blue; font-family: "consolas"; font-size: 12.6667px;">Book.cs</span> and write the following Code : </li>
</ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//Author.cs</span><br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><br /></span>
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><br /></span>
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
System;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
System.Collections.Generic;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">namespace</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
Library.Models<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Author</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">int</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> AuthorId { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> AuthorName { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">virtual</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">ICollection</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Book</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">> Books { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">}</span></div>
<br /></div>
</div>
<div>
<br />
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//Book.cs</span><br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><br /></span>
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><br /></span><br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">namespace</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
Library.Models<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Book</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">int</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> BookId { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> BookName { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">int</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> AuthorId { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">virtual</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Author</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> Author { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">}</span><span dir="RTL" lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><o:p></o:p></span></div>
</div>
<br /></div>
</div>
<h2 style="-webkit-text-stroke-width: 0px; color: black; font-family: "Times New Roman"; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
- Create the Database Context</h2>
</div>
</div>
<div>
<ul style="text-align: left;">
<li><span style="font-family: "consolas"; font-size: 12.6667px;"><b>Create new folder named DataLayer and add new class named </b></span><span style="font-family: "consolas"; font-size: 12.6667px;"><span style="color: #2b91af;">LibraryDbContext.cs </span><b>and write the following Code : </b></span></li>
</ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//LibraryDbContext.cs</span>
<br />
<br />
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
Library.Models;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
System;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
System.Collections.Generic;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
System.Data.Entity;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">namespace</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
Library.DataLayer<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">LibraryDbContext</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> : </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">DbContext</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> LibraryDbContext()<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> : </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">base</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"DefaultConnection"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">DbSet</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Book</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">> Books { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">DbSet</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Author</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">> Authors { </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">get</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">set</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">; }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">static</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">LibraryDbContext</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> Create()<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">LibraryDbContext</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">}</span><span dir="RTL" lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<br /></div>
</div>
</div>
<ul style="text-align: left;">
<li><b>From the Tools menu click NuGet Package Manager and then click Package Manager Console. In the Package Manager Console write the following command:</b></li>
</ul>
<div style="background-color: black; color: white; padding: 1em;">
PM> Enable-Migrations</div>
<ul style="text-align: left;"><b style="background-color: white;">
<li><b>After enabling migrations has done add to seed method in </b><span style="background-color: transparent;">Configuration class follwing :</span></li>
</b></ul>
<b style="background-color: white;">
</b>
<br />
<div style="background-color: #c4bfbf; padding: 1em;">
<b style="background-color: white;"><span style="left: 2em; position: absolute;">//Configuration.cs</span></b><br />
<b style="background-color: white;"><br /></b>
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">protected</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">override</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">void</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> Seed(Library.DataLayer.</span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">LibraryDbContext</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> context)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
context.Authors.AddOrUpdate(a => a.AuthorName, </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Author</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { AuthorName = </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"Stephen Hawking"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> });<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> context.Authors.AddOrUpdate(a =>
a.AuthorName, </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Author</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { AuthorName = </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"Elisabeth Kübler-Ross"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> });<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
context.Authors.AddOrUpdate(a => a.AuthorName, </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Author</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { AuthorName = </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"Tony Crilly"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> });<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> context.SaveChanges();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> context.Books.AddOrUpdate(a => a.BookName,
</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Book</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { BookName = </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"A brief history of
time"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> , AuthorId =
context.Authors.Single(a => a.AuthorName == </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"Stephen Hawking"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">).AuthorId });<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
context.Books.AddOrUpdate(a => a.BookName, </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Book</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { BookName = </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"Death: The Final
Stage of Growth"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> , AuthorId = context.Authors.Single(a =>
a.AuthorName == </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"Elisabeth Kübler-Ross"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">).AuthorId });<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
context.Books.AddOrUpdate(a => a.BookName, </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Book</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { BookName = </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"50 Mathematical Ideas
You Really Need to Know"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> , AuthorId = context.Authors.Single(a => a.AuthorName == </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"Tony Crilly"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">).AuthorId });<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
context.Books.AddOrUpdate(a => a.BookName, </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Book</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { BookName = </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"The Grand
Design"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
, AuthorId = context.Authors.Single(a => a.AuthorName == </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"Stephen Hawking"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">).AuthorId });<o:p></o:p></span></div>
<b style="background-color: white;">
</b><br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"> }</span></div>
</div>
<b style="background-color: white;">
</b>
<br />
<h2>
<b style="background-color: white;">
</b></h2>
<b style="background-color: white;">
</b></div>
</div>
<ol style="text-align: left;">
</ol>
</div>
<br />
<div style="background-color: black; color: white; padding: 1em;">
PM> Add-Migration initial-libraryDbContext</div>
<ul style="text-align: left;">
<li><b>In the generated migration class turn cascadeDelete to <span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">false </span></b></li>
</ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<div style="background-color: #c4bfbf;">
<span style="left: 2em; position: absolute;">//initiallibraryDbContext</span>
</div>
<div style="background-color: #c4bfbf;">
<br /></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">partial</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">initiallibraryDbContext</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> : </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">DbMigration</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">override</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">void</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> Up()<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> CreateTable(<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"dbo.Authors"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> c => </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> AuthorId =
c.Int(nullable: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">false</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, identity: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">true</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">),<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> AuthorName
= c.String(),<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> })<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> .PrimaryKey(t
=> t.AuthorId);<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> CreateTable(<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"dbo.Books"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> c => </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> BookId =
c.Int(nullable: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">false</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, identity: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">true</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">),<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> BookName =
c.String(),<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> AuthorId =
c.Int(nullable: </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">false</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">),<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> })<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> .PrimaryKey(t
=> t.BookId)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: yellow;"><span style="font-family: "consolas"; font-size: 9.5pt;">.ForeignKey(</span><span style="color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"dbo.Authors"</span><span style="font-family: "consolas"; font-size: 9.5pt;">, t => t.AuthorId,
cascadeDelete: </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">false</span></span><span style="font-family: "consolas"; font-size: 9.5pt;"><span style="background-color: yellow;">)</span><span style="background-color: white;"><o:p></o:p></span></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> .Index(t =>
t.AuthorId);<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">override</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">void</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> Down()<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> DropForeignKey(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"dbo.Books"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"AuthorId"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"dbo.Authors"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> DropIndex(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"dbo.Books"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">[] { </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"AuthorId"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> });<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> DropTable(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"dbo.Books"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> DropTable(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"dbo.Authors"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div style="background-color: #c4bfbf;">
</div>
<div class="MsoNormal" style="background-color: #c4bfbf; direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"> }</span><o:p></o:p></div>
</div>
<br />
<br />
<ul style="text-align: left;">
<li><b>Right click on your project, select <code style="background-color: yellow; border: 0px; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; margin: 0px; padding: 1px 5px; white-space: pre-wrap;">Add</code><span style="background-color: white; color: #242729; font-family: "arial" , "helvetica neue" , "helvetica" , sans-serif; font-size: 15px;">, then </span><code style="background-color: yellow; border: 0px; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; margin: 0px; padding: 1px 5px; white-space: pre-wrap;">Add ASP.Net Folder</code><span style="background-color: white; color: #242729; font-family: "arial" , "helvetica neue" , "helvetica" , sans-serif; font-size: 15px;"> and choose the </span><code style="background-color: yellow; border: 0px; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; margin: 0px; padding: 1px 5px; white-space: pre-wrap;">App_Data</code><span style="color: #242729; font-family: "arial" , "helvetica neue" , "helvetica" , sans-serif; font-size: 15px;"><span style="background-color: yellow;"> </span><span style="background-color: white;">folder</span></span></b></li>
</ul>
<div style="background-color: black; color: white; padding: 1em;">
PM> Update-Database -Verbose</div>
<br />
<div>
<ul style="text-align: left;">
<li>That is all! now we have our database working and you can explorer it , Next article will be in how to create ASP.NET RESTful APIs (web api) .</li>
</ul>
<b>- <a href="https://github.com/salah306/Library/" target="_blank">link </a>to project in github.</b></div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-54919418720297902102016-11-15T05:42:00.000-08:002016-11-18T07:48:55.842-08:00Getting Started - Create a simple Single Page Application (SPA) - Angularjs<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;"></span><br />
<h1>
<div style="background-color: white; color: #222222; font-family: arial, tahoma, helvetica, freesans, sans-serif; font-size: 13.2px; font-weight: normal;">
<h1>
Create a Single-Page Application (SPA) - Angularjs</h1>
<b style="font-size: 13.2px;"> - This article is Part of a series :</b></div>
<ol style="font-size: medium;">
<li style="font-weight: normal;"><span style="color: #222222; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif;"><span style="font-size: 13.2px;"><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/how-to-create-single-page-application.html">Getting Started - Create a simple Single Page Application (SPA) - Angularjs</a></span></span></li>
<li><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/create-restful-apis-and-angularjs-spa-1.html" style="font-weight: normal;">Getting Started - Entity Framework Code First</a></li>
<li><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/getting-started-web-api.html" style="font-weight: normal;">Getting Started - Web API</a></li>
<li style="font-weight: normal;"><a href="http://dotnetwithsqlserver.blogspot.com.eg/2016/11/getting-started-create-spa-and-use.html" style="font-weight: normal;">Getting Started - Create a SPA And use AngularJS $http Service</a></li>
</ol>
</h1>
<span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;"><br /></span>
<span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;"><br /></span>
<span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">A </span><b style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">single-page application</b><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;"> (</span><b style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">SPA</b><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">) is a </span><a href="https://en.wikipedia.org/wiki/Web_application" style="background: none rgb(255, 255, 255); color: #0b0080; font-family: sans-serif; font-size: 14px; text-decoration: none;" title="Web application">web application</a><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;"> or </span><a class="mw-redirect" href="https://en.wikipedia.org/wiki/Web_site" style="background: none rgb(255, 255, 255); color: #0b0080; font-family: sans-serif; font-size: 14px; text-decoration: none;" title="Web site">web site</a><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;"> that fits on a single </span><a href="https://en.wikipedia.org/wiki/Web_page" style="background: none rgb(255, 255, 255); color: #0b0080; font-family: sans-serif; font-size: 14px; text-decoration: none;" title="Web page">web page</a><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;"> with the goal of providing a </span><a href="https://en.wikipedia.org/wiki/User_experience" style="background: none rgb(255, 255, 255); color: #0b0080; font-family: sans-serif; font-size: 14px; text-decoration: none;" title="User experience">user experience</a><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;"> similar to that of a </span><a class="mw-redirect" href="https://en.wikipedia.org/wiki/Desktop_application" style="background: none rgb(255, 255, 255); color: #0b0080; font-family: sans-serif; font-size: 14px; text-decoration: none;" title="Desktop application">desktop application</a><span style="background-color: white; color: #252525; font-family: sans-serif; font-size: 14px;">. (<a href="https://en.wikipedia.org/wiki/Single-page_application" target="_blank">wikipedia</a>).</span><br />
<br />
<span style="color: #252525; font-family: sans-serif;"><span style="background-color: white;"><span style="font-size: 14px;"><b>- Create new html page named main or index </b></span></span></span><br />
<ul style="text-align: left;">
<li><span style="color: #252525; font-family: sans-serif;"><span style="font-size: 14px;"><span style="font-size: 14px; font-weight: bold;">use </span><span style="background-color: yellow; font-size: 14px; font-weight: bold;">ng-view</span><span style="background-color: white;"><span style="font-size: 14px;"><span style="font-weight: bold;"> In order to determine loading <span style="background-color: white;"><span style="font-size: 14px;">part <span style="font-weight: normal;">(</span></span></span></span>html template)<b> , your main page will look like this :</b></span></span></span></span></li>
</ul>
<div 1em="" c4bfbf="" und-color:="">
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;">//main.html</span>
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><br /></span>
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><br /></span>
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">!DOCTYPE</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">html</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">html</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-app</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">myLibrary</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">head</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">title</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">title</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">meta</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">charset</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="utf-8"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">link</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">href</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="../Content/bootstrap.css"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">rel</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="stylesheet"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">src</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="/Scripts/angular.js"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">src</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="Scripts/angular-route.js"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">head</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">body</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">style</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">margin-top</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">:</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">5em"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="container"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: darkgreen; font-family: "consolas"; font-size: 9.5pt;"><!-- your View will appear here --></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: yellow;"><span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: red; font-family: "consolas"; font-size: 9.5pt;">ng-view</span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">></</span><span style="color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">></span></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">body</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div style="background-color: #c4bfbf;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14.5667px;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 14.5667px;">html</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14.5667px;">></span></div>
<br /></div>
</div>
<br />
<br />
<span style="color: #252525; font-family: sans-serif;"><span style="background-color: white;"><span style="font-size: 14px;"><br /></span></span></span>
<span style="color: #252525; font-family: sans-serif;"><b><span style="background-color: white;"><span style="font-size: 14px;">- add new folder named </span></span><span style="font-size: 14px;">templates </span></b></span><br />
<span style="color: #252525; font-family: sans-serif;"><span style="font-size: 14px;"><br /></span></span>
<span style="color: #252525; font-family: sans-serif;"><span style="font-size: 14px;"><b>- add 2 new pages to templates folder named books.html & authors.html</b></span></span><br />
<span style="color: #252525; font-family: sans-serif;"><span style="font-size: 14px;"><br /></span></span>
<br />
<ul style="text-align: left;">
<li><b><span style="color: #252525; font-family: sans-serif;"><span style="font-size: 14px;">The </span></span>books.html & authors.html are samples pages contain table of authors and table of books (we'll go through implementation later in this article)</b></li>
</ul>
<div>
<b>- now we will configure our angularjs app to use routing</b> </div>
<div>
<br /></div>
<div>
<h4 style="text-align: left;">
<ul style="text-align: left;">
<li><b>Add 3 JavaScript files in new folder (or script folder) named (myLibrary.js , booksController.js , authorsController.js ) . </b></li>
</ul>
<ul style="text-align: left;">
<li><b>Open myAppModule.js and write the following configuration :</b></li>
</ul>
</h4>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;">//myLibrary.js</span><br />
<br />
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> myLibrary =
angular.module(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"myLibrary"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, [</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'ngRoute'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">])<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> .config(</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> ($routeProvider) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $routeProvider.when(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'/books'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, { templateUrl: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'/templates/books.html'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, controller: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'booksController'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> });<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $routeProvider.when(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'/authors'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, { templateUrl: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'/templates/authors.html'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, controller: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'authorsController'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> });<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//default </span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $routeProvider.otherwise({
templateUrl: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'/templates/books.html'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, controller: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'booksController'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
});<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"> });</span><o:p></o:p></div>
</div>
<div>
<ul style="text-align: left;">
<li><b>Open booksController.js and create books array for $scope.books : </b></li>
</ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;">//booksController.js</span><br />
<br />
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">myLibrary.controller(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"booksController"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> ($scope) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $scope.books = [<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { name: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'A brief history of time'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, author: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Stephen Hawking'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { name: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Death: The Final Stage of
Growth'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, author: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Elisabeth Kübler-Ross'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { name: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'50 Mathematical Ideas You
Really Need to Know'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,
author: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Tony Crilly'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> },<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { name: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'The Grand Design'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, author: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Tony Crilly'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, author: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Stephen Hawking'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> ];<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">});</span></div>
</div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
</div>
<ul style="text-align: left;">
<li><b><span style="background-color: white;">Same steps in</span><span style="background-color: white; font-family: "consolas"; font-size: 12.6667px;"> </span>authorsController.js : </b></li>
</ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//authorsController.js</span><br />
<br />
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">myLibrary.controller(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"authorsController"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> ($scope) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $scope.authors = [<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { authorname: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Stephen Hawking'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> , numOfBooks : 2 },<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { authorname: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Elisabeth Kübler-Ross'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, numOfBooks: 1 },<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> { authorname: </span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'Tony Crilly'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">, numOfBooks: 1 }]<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> });<o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<br /></div>
</div>
<br />
<div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<br /></div>
</div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<b>- Open books.html and create books table (I used bootstrap for styling) :</b></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; unicode-bidi: embed;">
<br />
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;">//LibraryDbContext.cs</span><br />
<br />
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">table</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="table table-condensed
table-hover"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">thead</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> Book Name<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> Author<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">th</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">thead</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tbody</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-repeat</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">book</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><b><span style="background: white; color: darkgreen; font-family: "consolas"; font-size: 9.5pt;">in</span></b><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">books</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">td</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <b>{{</b></span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">book.name</span><b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}}</span></b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">td</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">td</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <b>{{</b></span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">book.author</span><b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}}</span></b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">td</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tr</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">tbody</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">table</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span><o:p></o:p></div>
</div>
<br /></div>
</div>
<ul style="text-align: left;">
<li><b>To do authors.html(same steps).</b></li>
</ul>
<div>
<br /></div>
<div>
<b>- add scripts and links references to main.html :</b></div>
<div>
<br />
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//main.html</span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;"><br /></span><br />
<br />
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">!DOCTYPE</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">html</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">html</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-app</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">myLibrary</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">head</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">title</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">title</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">meta</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">charset</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="utf-8"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">link</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">href</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="../Content/bootstrap.css"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">rel</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="stylesheet"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">src</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="/Scripts/angular.js"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">src</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="Scripts/angular-route.js"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">src</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="Scripts/myApp/myLibrary.js"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">src</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="/Scripts/myApp/booksController.js"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">src</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="/Scripts/myApp/authorsController.js"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">script</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">head</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">body</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="navbar navbar-inverse
navbar-fixed-top"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="container"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="navbar-header"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">button</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">type</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="button"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="navbar-toggle"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">data-toggle</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="collapse"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">data-target</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=".navbar-collapse"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">span</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="icon-bar"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">span</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">span</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="icon-bar"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">span</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">span</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="icon-bar"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">span</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">button</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="navbar-brand"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">href</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="#"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Library</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="navbar-collapse
collapse"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">ul</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="nav
navbar-nav"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">href</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="#books"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Books</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">href</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="#authors"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">Author</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">li</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">ul</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">style</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">margin-top</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">:</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">5em"</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="container"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-view</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">body</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">html</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span><o:p></o:p></div>
</div>
<br />
<div style="margi: 2em;">
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwj8-uYqcFLl47N8p2cHsZBLdSItfZ0NH6wpHpp5zK7MHQuQqkxCME-nx-zI2SprumZ8Qsn10s0FO_Kk8r05LmF7Dfda2IRkUub7J13iL907ZCB1X8s5o4bd80Avczkr5UfkR2fH6VmZE/s1600/library.PNG" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwj8-uYqcFLl47N8p2cHsZBLdSItfZ0NH6wpHpp5zK7MHQuQqkxCME-nx-zI2SprumZ8Qsn10s0FO_Kk8r05LmF7Dfda2IRkUub7J13iL907ZCB1X8s5o4bd80Avczkr5UfkR2fH6VmZE/s400/library.PNG" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">main page</td></tr>
</tbody></table>
<br /></div>
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<h3 style="text-align: left;">
<span style="font-family: "consolas";"><span style="font-size: small;"><br /></span></span></h3>
<h3 style="text-align: left;">
<span style="font-family: "consolas";"><span style="font-size: small;"><br /></span></span></h3>
<h3 style="text-align: left;">
<span style="font-family: "consolas";"><span style="font-size: small;"><br /></span></span></h3>
<h3 style="text-align: left;">
<span style="font-family: "consolas";"><span style="font-size: small;"><br /></span></span></h3>
<h3 style="text-align: left;">
<span style="font-family: "consolas";"><span style="font-size: small;"><br /></span></span></h3>
<h3 style="text-align: left;">
<span style="font-family: "consolas";"><span style="font-size: small;"><br /></span></span></h3>
<h3 style="text-align: left;">
<span style="font-family: "consolas";"><span style="font-size: small;"><br /></span></span></h3>
<h3 style="text-align: left;">
<span style="font-family: "consolas";"><span style="font-size: small;">- That is it , Click <a href="https://github.com/salah306/LibraryDemo" target="_blank">here </a>to get a copy from </span></span><span style="font-family: "consolas"; font-size: small;">github.</span></h3>
</div>
</div>
</div>
</div>
</div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-2881610493335994552016-11-14T06:48:00.004-08:002016-11-17T03:01:58.766-08:00Your First Angular App<div dir="ltr" style="text-align: left;" trbidi="on">
It's easy to use Angular , I think it's more easy and fun than jquery , so let's see a basic example .<br />
<br />
<br />
<ul style="text-align: left;">
<li><b><b>To create </b>basic Angular app you have to create a module then attached Controller to it, in your script you can define your <span style="background-color: yellow;">module</span><span style="background-color: white;"> </span>name and your </b> <b style="background-color: yellow;">controller like this</b> : </li>
</ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//javascript.js file</span><br />
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">angular.module(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'myApp'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,
[]).controller(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'myController'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,
</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> ($scope) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//write whatever code and functions herer</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">});</span><o:p></o:p></div>
</div>
<div style="text-align: center;">
<b style="background-color: yellow;"><br /></b></div>
<div>
<ul style="text-align: left;">
<li><b>In your html page or in your main page refer to your <b><span style="background-color: yellow;">module</span></b> in <html> attrubite or <body> and refer to your <b style="background-color: yellow;">controller</b><b style="background-color: white;"> in the section that you need to integrate with that </b><b><b style="background-color: yellow;">controller</b><b style="background-color: white;"> </b></b>like this :</b></li>
</ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;">//index.html</span><br />
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">html</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-app</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: yellow; color: purple; font-family: "consolas"; font-size: 9.5pt;">myApp</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">head</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">head</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">body</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-controller</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: yellow; color: purple; font-family: "consolas"; font-size: 9.5pt;">myController</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">body</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
</div>
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">html</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span><o:p></o:p></div>
</div>
<div style="text-align: left;">
<ul style="text-align: left;"><b><b>
<li>back to your script , use $scope as var , it may hold array or function :</li>
</b></b></ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;">//javascript.js file</span><br />
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;">angular.module(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'myApp'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,
[]).controller(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'myController'</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">,
</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> ($scope) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $scope.numbers = [1, 2, 3, 4];<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> $scope.alertnum = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">function</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> (num) {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> alert(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">'you have clicked : '</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> + num)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">});</span></div>
</div>
</div>
<b>
</b>
<br />
<div style="text-align: left;">
<ul style="text-align: left;"><b>
<li>Use ng-repeat to loop through $scope.numbers in Dom and ng-click to invoke $scope.alertnum like this :</li>
</b></ul>
<div style="background-color: #c4bfbf; padding: 1em;">
<span style="left: 2em; position: absolute;"><br /></span><span style="left: 2em; position: absolute;">//index.html</span><br />
<br />
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">html</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-app</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">myApp</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">head</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">head</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">body</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-controller</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">myController</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">
</span><span style="background: yellow; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-repeat</span><span style="background: yellow; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: yellow; color: purple; font-family: "consolas"; font-size: 9.5pt;">num</span><span style="background: yellow; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><b><span style="background: yellow; color: darkgreen; font-family: "consolas"; font-size: 9.5pt;">in</span></b><span style="background: yellow; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: yellow; color: purple; font-family: "consolas"; font-size: 9.5pt;">numbers</span><span style="background: yellow; color: blue; font-family: "consolas"; font-size: 9.5pt;">"></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: yellow; color: red; font-family: "consolas"; font-size: 9.5pt;">ng-click</span><span style="background: yellow; color: blue; font-family: "consolas"; font-size: 9.5pt;">="</span><span style="background: yellow; color: purple; font-family: "consolas"; font-size: 9.5pt;">alertnum</span><span style="background: yellow; font-family: "consolas"; font-size: 9.5pt;">(</span><span style="background: yellow; color: purple; font-family: "consolas"; font-size: 9.5pt;">num</span><span style="background: yellow; font-family: "consolas"; font-size: 9.5pt;">)</span><span style="background: yellow; color: blue; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: yellow; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">href</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">="#"></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> <b>{{</b></span><span style="background: white; color: purple; font-family: "consolas"; font-size: 9.5pt;">num</span><b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;">}}</span></b><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">a</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">div</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: normal; margin-bottom: 0.0001pt; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt;">body</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<br />
<div class="MsoNormal" style="direction: ltr; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"></</span><span style="background: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">html</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span><o:p></o:p></div>
</div>
<br /></div>
<div style="text-align: left;">
<div>
<ul style="text-align: left;">
<li><b>here is a working example</b></li>
</ul>
<br />
<div class="codepen" data-default-tab="js,result" data-embed-version="2" data-height="291" data-pen-title="Your First Angular App" data-slug-hash="aBZvpN" data-theme-id="0" data-user="saad306">
See the Pen <a href="http://codepen.io/saad306/pen/aBZvpN/">Your First Angular App</a> by Mohamed Salah (<a href="http://codepen.io/saad306">@saad306</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<br />
<div style="text-align: left;">
<b><br /></b></div>
</div>
</div>
</div>
<br /></div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-25587683699187847612013-04-11T08:27:00.000-07:002016-11-20T16:28:50.716-08:00مثال بسيط علي انشاء WCF Service الجزء الثالث<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "symbol"; mso-bidi-font-family: Symbol; mso-bidi-language: AR-EG; mso-fareast-font-family: Symbol;">·<span style="font-family: "times new roman"; font-size: 7pt;"> <b><span style="color: #cc0000;">
</span></b></span></span><!--[endif]--><b><span style="color: #cc0000;"><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">انشاء </span></span></b><span dir="LTR"><b><span style="color: #cc0000;">WCF Client Application </span></b><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">من </span><span dir="LTR">Solution
Explorer </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> قم باضافة </span><span dir="LTR">Project</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>
جديد من النوع </span><span dir="LTR">Console Application
</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">باسم </span></span><span dir="LTR">BirthdayClient<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">من </span><span dir="LTR">Solution
Explorer </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> قم باضافة مرجع </span><span dir="LTR">Add Reference </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> الي </span><span dir="LTR">System.ServiceModel assembly</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">الي </span></span><span dir="LTR">BirthdayClient Project</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">بالضغط بالزر الايمن للماوس عليه ثم اختيار </span></span><span dir="LTR">Add Reference<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">ايضا قم باضافة </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span><span dir="LTR"></span> Service Reference </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">بالضغط بالزر الايمن للماوس
علي </span></span><span dir="LTR">BirthdayClient </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> ثم اختار </span><span dir="LTR">Add Service Reference </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> ومن الصفحة التي ستظهر قم بالضغط علي </span><span dir="LTR">Discover </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> ليقوم بالبحث عن الـ </span><span dir="LTR">Service </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> المتوفرة لتظهر لك </span><span dir="LTR">Service </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> التي انتهينا من انشائها قم بالضغط عليها وفي
اسف الصفحة في مريع النص </span><span dir="LTR">Name
Space </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> قم بتغير الاسم الي </span><span dir="LTR">BirthdayService</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>
ثم قم بالضغط علي </span><span dir="LTR">Ok</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> كما بالشكل </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVHJOH2LuqlvyLViiK2C_ZaKm0vs6xGgx8E6cGltPEq2teHpToiyhbI59bbFpZhXULYvOQ-yhb5rBN-leWGSEAmD_Af9hPY3e7Lxcnv_Uhe7sGo-5Qeq5MJx7HhdKVdTmfal5rTscgsbM/s1600/addserviceref.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVHJOH2LuqlvyLViiK2C_ZaKm0vs6xGgx8E6cGltPEq2teHpToiyhbI59bbFpZhXULYvOQ-yhb5rBN-leWGSEAmD_Af9hPY3e7Lxcnv_Uhe7sGo-5Qeq5MJx7HhdKVdTmfal5rTscgsbM/s320/addserviceref.png" width="320" /></a></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoListParagraph" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بالتوجه </span><span dir="LTR">App.config</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG"> في </span></span><span dir="LTR">BirthdayClient </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG"> وفتحه ليظهر الكود سوف تجد ان </span></span><span dir="LTR">WCF Service </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> قامت بعمل تهيئة الاتصال بالـ </span><span dir="LTR">Service </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">كما بالكود التالي </span></span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><?</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">xml</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">version</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">1.0</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">encoding</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">utf-8</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> ?></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">configuration</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">startup</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">> </span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">supportedRuntime</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">version</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">v4.0</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">sku</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">.NETFramework,Version=v4.5</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> /></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">startup</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">system.serviceModel</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">bindings</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">basicHttpBinding</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">binding</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">name</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">BasicHttpBinding_IBirthdayService</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> /></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">basicHttpBinding</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">bindings</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">client</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">endpoint</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">address</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">http://localhost:12516/Service.svc</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">binding</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">basicHttpBinding</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">bindingConfiguration</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">BasicHttpBinding_IBirthdayService</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">contract</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">BirthdayService.IBirthdayService</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt;">name</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">BasicHttpBinding_IBirthdayService</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> /></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">client</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">system.serviceModel</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"></</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">configuration</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">ستجد في الجزء الخاص بالـ </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"><span dir="LTR"></span><span dir="LTR"></span><</span><span dir="LTR" style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">client</span><span dir="LTR" style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span><span dir="RTL"></span><span dir="RTL"></span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">تحديد طريقة
الاتصال بـ </span><span dir="LTR">Service </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> في </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"><span dir="LTR"></span><span dir="LTR"></span><</span><span dir="LTR" style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">endpoint</span><span dir="LTR" style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">></span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>
يوجد معلومات الاتصال وهي تتكوت من 3 اجزاء </span><span dir="LTR" style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">address</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>
, </span><span dir="LTR" style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">binding</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">, </span></span><span dir="LTR" style="background: white; color: red; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">contract</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">الان قم بفتح </span><span dir="LTR">Program.cs </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> ثم قم باضافة المراجع الاتية </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> System.ServiceModel;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> BirthdayClient.BirthdayService;<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpFirst" dir="LTR" style="direction: ltr; margin-bottom: 10.0pt; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">في </span><span dir="LTR">Main
method </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> قم بانشاء </span><span dir="LTR">New Instance </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> من </span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">BirthdayService</span><span dir="LTR"> </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> ليصبح الكود كالاتي </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">static</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">void</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> Main(</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">[] args)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BirthdayServiceClient</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> proxy = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BirthdayServiceClient</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"> }</span><o:p></o:p></div>
<div class="MsoListParagraph" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">الان يمكنك استخدام </span><span dir="LTR">Service Method </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> التي انشائنها من قبل والاتي هو مثال استخدام </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span><span dir="LTR"></span> ListFirstName() Method <o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">static</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">void</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> Main(</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">[] args)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BirthdayServiceClient</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> proxy = </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BirthdayServiceClient</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Console</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">.WriteLine(</span><span style="background: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"Now The
Console will Write All First Name"</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">);<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">[] info = proxy.ListFirstName();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">foreach</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> (</span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> name </span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">in</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> info)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Console</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">.WriteLine(name);<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> proxy.Close();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">Console</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">.ReadKey();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"> }</span><o:p></o:p></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">قبل ان تقوم باختبار الـ </span><span dir="LTR">Client Project </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> يجب عليك وضع الـ </span><span dir="LTR">Startup Projects </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> بالضغط علي الـ </span><span dir="LTR">Sultion</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>
(</span><span dir="LTR">BirthdayService</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>)
بالزر الايمن للماوس واختيار </span><span dir="LTR">Set
Startup Projects <o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">من الصفحة التي ستظهر قم باختيار </span><span dir="LTR">Multiple startup projects</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>
وقم بتحديد الـ </span><span dir="LTR">Projacts </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> الاتية باختيار </span><span dir="LTR">Start</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> كما بالشكل </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXUXPFjOsIFCfevwK-nnsIBsn12Jw2n5MOt9EYINaqgKWZq-gx9PEWrfT3t18nJg0Yrk9aZ_XBo602SMOsrc_iu5cvlYdPGBJpJoAD8hMbPJAL556uZzHMmgDJJO-v2i2CHGn9xdf5qY/s1600/setstartupprojects.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXUXPFjOsIFCfevwK-nnsIBsn12Jw2n5MOt9EYINaqgKWZq-gx9PEWrfT3t18nJg0Yrk9aZ_XBo602SMOsrc_iu5cvlYdPGBJpJoAD8hMbPJAL556uZzHMmgDJJO-v2i2CHGn9xdf5qY/s320/setstartupprojects.png" width="320" /></a></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بعد التحديد والضغط علي </span><span dir="LTR">Ok </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> قم بالضغط علي </span><span dir="LTR">Ctrl + F5 </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> للاختبار كما بالشكل </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrt3SPcMHBduhJUgyQII6PJT4nc3D6lbtc6SO171a_i6xJm4-r8J3khjMHDCblecpXE2dzLgUlqMiTtwdjv8vMnqG634EozOVtPI10hsCEDhJCqSqfQt75_K7ww6_5MqJ0YY11b97vWIk/s1600/ctrlf5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrt3SPcMHBduhJUgyQII6PJT4nc3D6lbtc6SO171a_i6xJm4-r8J3khjMHDCblecpXE2dzLgUlqMiTtwdjv8vMnqG634EozOVtPI10hsCEDhJCqSqfQt75_K7ww6_5MqJ0YY11b97vWIk/s320/ctrlf5.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto;">
<br /></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">الي هنا نكون قد انتهينا من هذا الجزء في الجزء القادم
سوق اقوم بشرح كيف تقوم بعمل </span><span dir="LTR">deploying
</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> للـ </span><span dir="LTR">Service </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> علي </span><span dir="LTR">IIS </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> (</span><span dir="LTR" style="font-family: "arial" , "sans-serif";">Internet Information</span><span dir="LTR"> </span><span dir="LTR" style="font-family: "arial" , "sans-serif";">Services</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<br /></div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-91887990044240960582013-04-11T08:10:00.000-07:002016-11-20T16:28:13.409-08:00مثال بسيط علي انشاء WCF Service الجزء الثاني<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div class="MsoNormal" dir="RTL">
<span style="color: #cc0000;"><b><span lang="AR-EG" style="font-family: "arial" , sans-serif;">بعد انشاء </span><span dir="LTR">Entity Model </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> الان سنقوم بانشاء </span><span dir="LTR" style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;">WCF service</span></b></span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-SA"><o:p></o:p></span></span></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">من </span><span dir="LTR">Solution Explorer </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> قم بالضغط بالزر الايمن للماوس واختار </span><span dir="LTR">Add >> New Web Site</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> ومن الصفحة التي ستظهر قم باختيار </span><span dir="LTR">WCF service</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span></span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">باختيارك </span><span dir="LTR">WCF Service Template </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> سيتم انشاء </span><span dir="LTR">WCf </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> كـ جزء من </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span><span dir="LTR"></span> Web Application </span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">في </span><span dir="LTR">App_Code </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> فولدر ستجد </span><span dir="LTR">IService.cs Interface </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> و ايضا </span><span dir="LTR">Service.cs Class</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وبالنظر الي </span><span dir="LTR">Service.cs</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> سوف تجد ان </span><span dir="LTR">WCF Service Template </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> اضاف المراجع العادية واضاف المراجع التي سيتم استخدامها في </span><span dir="LTR">WCF Service </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وهي </span><span dir="LTR">System.ServiceModel , System.ServiceModel.Web</span><span dir="RTL"></span><span dir="RTL"></span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span><span dir="LTR"></span> , System.Runtime.Serialization </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> كما بالشكل</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_2_RRpeJ18lL5qXgQZQb_vTkUIm4tshVhSAXFuN2kVT2M3ijiuTurPBXWoYfnOGvxksDlBtMvjfvhtsEnDaHtxfDm30ZKathIsdXsW95mZBOFDlX6n9fx7mOZVMvwlEpURqkKDxy8vY/s1600/WCFRef.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_2_RRpeJ18lL5qXgQZQb_vTkUIm4tshVhSAXFuN2kVT2M3ijiuTurPBXWoYfnOGvxksDlBtMvjfvhtsEnDaHtxfDm30ZKathIsdXsW95mZBOFDlX6n9fx7mOZVMvwlEpURqkKDxy8vY/s320/WCFRef.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">الـ </span><span dir="LTR">System.ServiceModel</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> تحتوي </span><span dir="LTR">Classes </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> التي ستستخدمها </span><span dir="LTR">WCF </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> لتحدد </span><span dir="LTR">Service </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> والعمليات وبالطبع فأن </span><span dir="LTR">System.Runtime.Serialization </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> تستخدم لتحويل </span><span dir="LTR">Objects </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> الي </span><span dir="LTR">Stream Of Data </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> لنقلها عن طريق </span><span dir="LTR">Network </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> والمعروفة باسم </span><span dir="LTR">serialization</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">وايضا تستخدم لعكس العملية بمعني تحويل </span></span><span dir="LTR">Stream </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> الي </span><span dir="LTR">objects </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> والمعروفة بأسم </span><span dir="LTR">deserialization</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span></span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">بالنظر الي الكود ستجد ان هناك 2 </span><span dir="LTR">methods</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وهي </span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">GetData</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="AR-SA" style="font-family: "courier new"; font-size: 9.5pt; line-height: 14px;">و </span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">GetDataUsingDataContract</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وقد تم ادراجاهم من </span><span dir="LTR">IService Interface </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">بفتح </span><span dir="LTR">IService.cs </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> من </span><span dir="LTR">App_Code</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> كما بالشكل الاتي والنظر الي الكود</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvJdSMQiq8M-lMcIBzYvYMUmMhXAnfcajPc6BUmjY3vtdsS00JdnjgMstawytgaUtgUjNN5_LNv90HARD79tL7wCOOwZxf_hYNBL8eLwrcnxuoKKOfZgCl8JcaFVTA-8xKnHPueVwgwg/s1600/Iservice.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvJdSMQiq8M-lMcIBzYvYMUmMhXAnfcajPc6BUmjY3vtdsS00JdnjgMstawytgaUtgUjNN5_LNv90HARD79tL7wCOOwZxf_hYNBL8eLwrcnxuoKKOfZgCl8JcaFVTA-8xKnHPueVwgwg/s320/Iservice.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , sans-serif;"> ستجد ان </span><span dir="LTR">Iservice </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> تحتوي علي </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span><span dir="LTR"></span>2 methods</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> والتي تم تنفذهم في </span><span dir="LTR">Service.cs Class </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وهما </span><span dir="LTR">GetData , GetDataUsingDataContract </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> والمعروفين باسم </span><span dir="LTR">service contract</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> ويتم تعرفيهم عن طريق استخدام </span><span dir="LTR">attributes</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> كما بالشكل السابق وهما </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="LTR"></span><span dir="LTR"></span>[</span><span dir="LTR" style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">ServiceContract</span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">]</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> و </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="LTR"></span><span dir="LTR"></span>[</span><span dir="LTR" style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">OperationContract</span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">]</span><span dir="LTR"> </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG"> .<o:p></o:p></span></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , sans-serif;">ايضا ستجد </span><span dir="LTR">Class </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> باسم </span><span dir="LTR">CompositeType </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وهي </span><span dir="LTR">Type Returned </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> عن طريق </span><span dir="LTR">GetDataUsingDataContract</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> </span><span dir="LTR">Method </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">والتي تستخدم </span></span><span dir="LTR">attributes</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="LTR"></span><span dir="LTR"></span>[</span><span dir="LTR" style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">DataContract</span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">]</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="AR-SA" style="font-family: "courier new"; font-size: 9.5pt; line-height: 14px;">و </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="LTR"></span><span dir="LTR"></span>[</span><span dir="LTR" style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">DataMember</span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">]</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">وهي عبارة مثال للـ </span></span><span dir="LTR">data contract</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وساقوم بتوضيحها .<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<b><span lang="AR-EG" style="font-family: "arial" , sans-serif;">أ - انشاء </span></b><b><span dir="LTR">interfaces</span></b><span dir="RTL"></span><span dir="RTL"></span><b><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> او </span></b><b><span dir="LTR">Contracts</span></b><span dir="RTL"></span><span dir="RTL"></span><b><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">الخاصة بهذا المثال والتي سيتم تنفيذيها في </span></span></b><b><span dir="LTR">Sevice.cs </span></b><span dir="RTL"></span><span dir="RTL"></span><b><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG"><o:p></o:p></span></span></b></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<b><span style="font-family: "symbol";"> ·<span style="font-family: "times new roman"; font-size: 7pt; font-weight: normal;"> </span></span></b><span dir="RTL"></span><b><span lang="AR-EG" style="font-family: "arial" , sans-serif;">تحديد الـ </span></b><b><span dir="LTR">Datacontarct<o:p></o:p></span></b></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">قم بفتح </span><span dir="LTR" style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;">IService.cs</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-SA" style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"><span dir="RTL"></span><span dir="RTL"></span> واحذف كل الكود ما عدا المراجع </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" lang="AR-SA" style="font-size: 9.5pt; line-height: 14px;"><span dir="LTR"></span><span dir="LTR"></span> </span><span dir="LTR" style="font-size: 9.5pt; line-height: 14px;">( using statement )</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-SA" style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;">من </span><span dir="LTR" style="font-size: 9.5pt; line-height: 14px;">Solution Explorer </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> قم بتغير اسم </span><span dir="LTR" style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;">IService.cs</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> الي </span><span dir="LTR">IBirthdayService.cs</span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">قم باضافة </span><span dir="LTR">Name Space </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> بأسم </span><span dir="LTR">Birthday</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> كالاتي</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">namespace</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> Birthday<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">}</span><o:p></o:p></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">قم بانشاء </span><span dir="LTR">Class</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> باسم </span><span dir="LTR">Birthday </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وحدد بها الـ </span><span dir="LTR">member</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> المستخدمة في ال </span><span dir="LTR">Entity Model<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span dir="LTR"></span><span dir="LTR"></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><span dir="LTR"></span><span dir="LTR"></span> [</span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">DataContract</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">]<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BirthdayData</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> [</span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">DataMember</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">]<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> FirstName;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> [</span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">DataMember</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">]<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> LastName;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> [</span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">DataMember</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">]<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">DateTime</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> birthdayDate;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> }</span><span style="font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">بوضع الـ</span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" lang="AR-EG"><span dir="LTR"></span><span dir="LTR"></span> </span><span dir="LTR">attribute </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span><span dir="LTR"></span> </span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">[</span><span dir="LTR" style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">DataContract</span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">]</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">فاننا نحدد ان هذه الـ </span></span><span dir="LTR">Class </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> ستستخدم </span><span dir="LTR">serialized</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> و </span><span dir="LTR">deserialized</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> كـ </span><span dir="LTR">XML Stream </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> بواسطة </span><span dir="LTR">WCF </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> يمكنك استخدام </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="LTR"></span><span dir="LTR"></span>[</span><span dir="LTR" style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">DataContract</span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">]</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> </span><span dir="LTR">attribute</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> في </span><span dir="LTR">classes, structures, enumerations</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span></span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">يجب ان تضع </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="LTR"></span><span dir="LTR"></span>[</span><span dir="LTR" style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">DataMember</span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">]</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> </span><span dir="LTR">attribute </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span><span dir="LTR"></span> </span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">علي كل </span><span dir="LTR">member </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> في الـ </span><span dir="LTR">Class </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> اذا كنت تريد ان يتم عليه عملية </span><span dir="LTR">serialized<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54pt; text-indent: -18pt;">
<b><span style="font-family: "symbol";">·<span style="font-family: "times new roman"; font-size: 7pt; font-weight: normal;"> </span></span></b><span dir="RTL"></span><b><span lang="AR-EG" style="font-family: "arial" , sans-serif;">تحديد الـ </span></b><b><span dir="LTR">service contract</span></b><b><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><o:p></o:p></span></b></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">قم باضافة </span><span dir="LTR">IBirthdayService interface</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> بعد </span><span dir="LTR" style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">BirthdayData</span><span dir="LTR" style="color: #2b91af; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> Class</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وحدد بها العمليات التي سيتم استخدامها كالاتي</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">[</span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">ServiceContract</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">]<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">interface</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">IBirthdayService</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Return all FirstName</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> [</span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">OperationContract</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">]<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">List</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">> ListFirstName();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: green; font-family: "consolas"; font-size: 9.5pt;">//Return FullData by FirstName</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> [</span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">OperationContract</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">]<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BirthdayData</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> GetFullInfo(</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> firstName);<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> }</span><o:p></o:p></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<b><span lang="AR-EG" style="font-family: "arial" , sans-serif;">ب - تنفيذ </span></b><b><span dir="LTR">Service</span></b><span dir="RTL"></span><span dir="RTL"></span><b><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span><o:p></o:p></span></b></div>
<div class="MsoNormal" dir="RTL">
<b><span dir="LTR"><br /></span></b></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , sans-serif;">الان بعد تحديد </span><span dir="LTR">serviceContract </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> في </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span><span dir="LTR"></span> IBirthdayService interface</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> سنقوم بتنفيذ الـ </span><span dir="LTR">mothod </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> التي بها .<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;">-<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">قم باضافة مرجع الي </span><span dir="LTR">BirthdayEntityModel project</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> بالذهاب الي الـ </span><span dir="LTR">Birthdayservice Projact </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> في الـ </span><span dir="LTR">Solution Explorer </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> قم بالضغط بالزر الايمن للماوس ثم قم بالضغط علي </span><span dir="LTR">Add Reference</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> من القائمة علي الشمال اختار </span><span dir="LTR">Projacts </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> ثم قم باختيار </span><span dir="LTR">Entity Model </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> واضغط </span><span dir="LTR">Ok</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> كما ف الشكل</span><span dir="LTR"><o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2p6mla1ioR0b8JwwjW0LsaX8eVcNncKXndiOnXdc56glHDj4nOf0YH339oILNHv_1ALuomSRMZXpwNJ8_oQneKP8iZKjkoomjmwiMZIsxIuQN8eA2aBK_6prOTKN1lJ8YN-DLe-IjZC4/s1600/reftomodel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2p6mla1ioR0b8JwwjW0LsaX8eVcNncKXndiOnXdc56glHDj4nOf0YH339oILNHv_1ALuomSRMZXpwNJ8_oQneKP8iZKjkoomjmwiMZIsxIuQN8eA2aBK_6prOTKN1lJ8YN-DLe-IjZC4/s320/reftomodel.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">قم باضافه مرجع الي </span><span dir="LTR">System.Data.Entity</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> بعمل نفس الخطوات السابقة في الاضافة ومن القائمة علي الشمال قم باختار </span><span dir="LTR">Assemblis </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> ومنها اختار </span><span dir="LTR">framework </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> ثم قم باستخدام مربع البحث علي اليمن كما بالشكل ثم قم بتعليم </span><span dir="LTR">checkbox </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> الذي سيظهر كما بالشكل</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKJYCKk-TtTUBfK-3Kn2h5vQlZX30bG54pcIGdMD8Y9voxaJl43g9v3NIxlQdGKPsoqlkMaWFE6Exam-fiRq7mZywBTYXucKSO1in6fXUmVh0JfYABQh_zvCkJoVm7VBi58ecyh8_RF_k/s1600/data.entity.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKJYCKk-TtTUBfK-3Kn2h5vQlZX30bG54pcIGdMD8Y9voxaJl43g9v3NIxlQdGKPsoqlkMaWFE6Exam-fiRq7mZywBTYXucKSO1in6fXUmVh0JfYABQh_zvCkJoVm7VBi58ecyh8_RF_k/s320/data.entity.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">بالذهاب </span><span dir="LTR">App_Code </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> فولدر قم بتسمية </span><span dir="LTR">Service.cs </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> الي </span><span dir="LTR">BirthdayService.cs</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">ثم قم بفتحها</span></span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">الان قم بحذف كل الكود ما عدا المراجع </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" lang="AR-EG"><span dir="LTR"></span><span dir="LTR"></span> </span><span dir="LTR">( using statement )<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">قم باضافة مرجع الي </span><span dir="LTR">BirthdayModel </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> باستخدام </span><span dir="LTR" style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">using</span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> BirthdayEntityModel;</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">قم باضافة </span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">Birthday</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="RTL"></span><span dir="RTL"></span> </span><span dir="LTR" style="font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">name space </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif; font-size: 9.5pt; line-height: 14px;"><span dir="RTL"></span><span dir="RTL"></span> </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">namespace</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> Birthday<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">}</span><span style="font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><o:p></o:p></span></div>
<div class="MsoListParagraph" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">قم باضافة </span><span dir="LTR">Class </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وقم بتسميتها </span><span dir="LTR" style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">BirthdayServiceImplement</span><span dir="RTL"></span><span dir="RTL"></span><span style="color: #2b91af; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="RTL"></span><span dir="RTL"></span> </span><span style="color: #2b91af; font-family: "arial" , sans-serif; font-size: 9.5pt; line-height: 14px;"> </span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">ثم قم بعمل </span><span dir="LTR">inheritance</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> للـ </span><span dir="LTR">IBirthdayService</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> كالاتي</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraph" dir="RTL" style="text-indent: -18pt;">
<span lang="AR-EG" style="font-family: "arial" , sans-serif;"><br /></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">namespace</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> Birthday<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">class</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BirthdayServiceImplement</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> : </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">IBirthdayService</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">}</span><span style="font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">الان يمكنك تضمين الـ </span><span dir="LTR">methods </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> في </span><span dir="LTR" style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">IBirthdayService</span><span dir="LTR"> </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> بالوقوف عليها والضغط بالزر الايمن للماوس ثم اختيار </span><span dir="LTR">Implement Interface</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG"> كما البشكل</span></span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "arial" , sans-serif;"><span lang="AR-EG"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQWqWXqxIXjZwMMcztj2izHHgd76VbchxS_BSh7vGFbrHduT0rHrY_4nM1Wr4XVbslC6-fyv4YkiOrUfckWjV3pC36KgT-mp2Esu4d0rB6C_sZcq0_eHbh7rQG7F0pPOLuBWoDjxOhI2g/s1600/ImplementInterface.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQWqWXqxIXjZwMMcztj2izHHgd76VbchxS_BSh7vGFbrHduT0rHrY_4nM1Wr4XVbslC6-fyv4YkiOrUfckWjV3pC36KgT-mp2Esu4d0rB6C_sZcq0_eHbh7rQG7F0pPOLuBWoDjxOhI2g/s320/ImplementInterface.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">الان سوف نقوم باضافة الكود الي الـ </span><span dir="LTR">method </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> </span><span dir="LTR" style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">ListFirstName()</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif; font-size: 9.5pt; line-height: 14px;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"> ليكون كالاتي</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">List</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">> ListFirstName()<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">List</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">> FirstNameList = </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">List</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">>();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> (</span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">birthdaydbEntities</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> db = </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">birthdaydbEntities</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">())<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">var</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> firstname = </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">from</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> birthday </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">in</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> db.BirthDays<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">select</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> birthday.FirstName;<o:p></o:p></span><br />
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="font-family: "consolas"; font-size: x-small;">FirstNameList = firstname.ToList();</span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> FirstNameList;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> }</span><o:p></o:p></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoListParagraph" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">بعد اضافة الكود للـ </span><span dir="LTR">method </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> الاولي سنقوم باضافة الكود للـ </span><span dir="LTR">method </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> الثانية ليكون كالاتي</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraph" dir="RTL" style="text-indent: -18pt;">
<span lang="AR-EG" style="font-family: "arial" , sans-serif;"><br /></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BirthdayData</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> GetFullInfo(</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> firstName)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BirthdayData</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> birthdayData = </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">null</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> (</span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">birthdaydbEntities</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> db = </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">birthdaydbEntities</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">())<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BirthDay</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> findInfo = db.BirthDays.First(b => </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">.Compare(b.FirstName, firstName) == 0);<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> birthdayData = </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">BirthdayData</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">()<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> FirstName = findInfo.FirstName,<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> LastName = findInfo.LastName,<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> birthdayDate = findInfo.birthdayDate<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> };<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">return</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"> birthdayData;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> }</span><o:p></o:p></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="margin-right: 54pt; text-indent: -18pt;">
<span style="font-family: "symbol";">·<span style="font-family: "times new roman"; font-size: 7pt;"> <b> </b></span></span><b><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">تهيئة </span></b><span dir="LTR"><b>WCF Service</b><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , sans-serif;"><br /></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , sans-serif;">الان يجب تيهئة </span><span dir="LTR">Service </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وذلك بربطها بـ </span><span dir="LTR">Birthday.cs</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> الذي انتهينا منه في الخطوة السابقة<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">بالذهاب الي </span><span dir="LTR">Service.svc </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> من </span><span dir="LTR">Solution Explorer </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG"> نقوم بالضغط عليها مرتين ليظهر لنا الكود الاتي</span></span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="LTR" style="direction: ltr; margin: 0cm 0cm 10pt 36pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="LTR" style="direction: ltr; margin: 0cm 0cm 10pt 36pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: yellow; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><%</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">@</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> </span><span style="background-color: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">ServiceHost</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">Language</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">="C#"</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">Debug</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">="true"</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">Service</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">="Service"</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">CodeBehind</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">="~/App_Code/Service.cs"</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> </span><span style="background-color: yellow; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">%></span><o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" dir="LTR" style="direction: ltr; margin: 0cm 0cm 10pt 36pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">نقوم بتعديل الكود وتحديد اسم </span><span dir="LTR">Service </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> التي تم تغيرخ ليصبح الكود كالاتي</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="LTR" style="direction: ltr; margin: 0cm 0cm 10pt 36pt; text-align: left; unicode-bidi: embed;">
<span dir="LTR"></span><span dir="LTR"></span><span style="background-color: yellow; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="LTR"></span><span dir="LTR"></span><%</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">@</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> </span><span style="background-color: white; color: maroon; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">ServiceHost</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">Language</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">="C#"</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">Debug</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">="true"</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">Service</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">="Birthday.BirthdayServiceImplement"</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">CodeBehind</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">="~/App_Code/Birthday.cs"</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> </span><span style="background-color: yellow; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">%></span><o:p></o:p></div>
<div class="MsoListParagraphCxSpMiddle" dir="LTR" style="direction: ltr; margin: 0cm 0cm 10pt 36pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="LTR" style="direction: ltr; margin: 0cm 0cm 10pt 36pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">قم بالذهاب </span><span dir="LTR">App.Config </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> للـ </span><span dir="LTR">BirthdayEntityModel</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وقم بنسخ النص الاتصال منه ومن المفترض ان يكون بهذا الشكل</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="text-indent: -18pt;">
<span lang="AR-EG" style="font-family: "arial" , sans-serif;"><br /></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">connectionStrings</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">add</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">name</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">birthdaydbEntities</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">connectionString</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">metadata=res://*/BirthdayModel.csdl|res://*/BirthdayModel.ssdl|res://*/BirthdayModel.msl;provider=System.Data.SqlClient;provider connection string=</span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">&quot;</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">data source=.\MSSQlExpress;initial catalog=birthdaydb;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework</span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">&quot;</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">providerName</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">System.Data.EntityClient</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> /></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"> </</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">connectionStrings</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">></span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoListParagraph" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">الان قم بالذهاب الي </span><span dir="LTR">WCf Service </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> من الـ </span><span dir="LTR">Solution Explorer </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">ثم قن بفتح </span></span><span dir="LTR">Web.config</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وقم باضافة نص الاتصال الذي قمت بنسخة في جزء </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="LTR"></span><span dir="LTR"></span><</span><span dir="LTR" style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">configuration</span><span dir="LTR" style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">></span><span dir="RTL"></span><span dir="RTL"></span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="AR-SA" style="font-family: "arial" , sans-serif;">وقبل </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"><span dir="LTR"></span><span dir="LTR"></span><</span><span dir="LTR" style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">system.web</span><span dir="LTR" style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">></span><span dir="RTL"></span><span dir="RTL"></span><span style="color: blue; font-family: "arial" , sans-serif; font-size: 9.5pt; line-height: 14px;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">ليكون الشكل النهائي للكود في</span><span lang="AR-EG" style="color: blue; font-family: "arial" , sans-serif; font-size: 9.5pt; line-height: 14px;"> </span><span dir="LTR">Web.config</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> كالاتي</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraph" dir="RTL" style="text-indent: -18pt;">
<span lang="AR-EG" style="font-family: "arial" , sans-serif;"><br /></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><?</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">xml</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">version</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">1.0</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">?></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">configuration</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">appSettings</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">add</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">key</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">aspnet:UseTaskFriendlySynchronizationContext</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">value</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">true</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">appSettings</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">connectionStrings</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">add</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">name</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">birthdaydbEntities</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">connectionString</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">metadata=res://*/BirthdayModel.csdl|res://*/BirthdayModel.ssdl|res://*/BirthdayModel.msl;provider=System.Data.SqlClient;provider connection string=</span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">&quot;</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">data source=.\MSSQlExpress;initial catalog=birthdaydb;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework</span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">&quot;</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">providerName</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">System.Data.EntityClient</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> /></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">connectionStrings</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">system.web</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">compilation</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">debug</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">false</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">targetFramework</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">4.5</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">assemblies</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">add</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">assembly</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">System.Data.Entity, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">assemblies</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">compilation</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">httpRuntime</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">targetFramework</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">4.5</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">system.web</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">system.serviceModel</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">behaviors</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">serviceBehaviors</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">behavior</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <!--</span><span style="background-color: white; color: green; font-family: "consolas"; font-size: 9.5pt;"> To avoid disclosing metadata information, set the values below to false before deployment </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">--></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">serviceMetadata</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">httpGetEnabled</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">true</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">httpsGetEnabled</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">true</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <!--</span><span style="background-color: white; color: green; font-family: "consolas"; font-size: 9.5pt;"> To receive exception details in faults for debugging purposes, set the value below to true. Set to false before deployment to avoid disclosing exception information </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">--></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">serviceDebug</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">includeExceptionDetailInFaults</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">false</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">behavior</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">serviceBehaviors</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">behaviors</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">protocolMapping</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">add</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">binding</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">basicHttpsBinding</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">scheme</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">https</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">protocolMapping</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">serviceHostingEnvironment</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">aspNetCompatibilityEnabled</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">true</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">multipleSiteBindingsEnabled</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">true</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">system.serviceModel</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">system.webServer</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">modules</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">runAllManagedModulesForAllRequests</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">true</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <!--</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: green; font-family: "consolas"; font-size: 9.5pt;"> To browse web app root directory during debugging, set the value below to true.</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: green; font-family: "consolas"; font-size: 9.5pt;"> Set to false before deployment to avoid disclosing web app folder information.</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: green; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">--></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> <</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">directoryBrowse</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </span><span style="background-color: white; color: red; font-family: "consolas"; font-size: 9.5pt;">enabled</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">=</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">true</span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;">"</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">/></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"> </</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt;">system.webServer</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt;">></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;"></</span><span style="background-color: white; color: #a31515; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">configuration</span><span style="background-color: white; color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 14px;">></span><o:p></o:p></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"><br /></span></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">الان قم بحفظ </span><span dir="LTR">Web.config</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> ثم قم بالذهاب الي </span><span dir="LTR">Service.svc</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> وقم بالضغط عليها بالزر الايمن للماوس ثم قم باختيار </span><span dir="LTR">View in Browser</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> كما بالشكل</span><span dir="LTR"><o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw4Agq1qlxvysDp3nRYYBJ0JDHoHVZBSndWKdPqnY6LfW9uqmhMHNMvN4YtP5ZSmgtcke21oTAb5gIoJPbyxdZz0E9ri4a7R2_ZY2qJ4uAMHEHfSpKgTfaCWlu5ihAD17kBOGGEYynDIo/s1600/ViewinBrowser.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw4Agq1qlxvysDp3nRYYBJ0JDHoHVZBSndWKdPqnY6LfW9uqmhMHNMvN4YtP5ZSmgtcke21oTAb5gIoJPbyxdZz0E9ri4a7R2_ZY2qJ4uAMHEHfSpKgTfaCWlu5ihAD17kBOGGEYynDIo/s320/ViewinBrowser.png" width="284" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">سوف تظهر لك الـ </span><span dir="LTR">help page </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> للـ </span><span dir="LTR">WCF Service </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> للتأكد من تهيئة </span><span dir="LTR">Service </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> بشكل صحيح كما بالشكل الاتي</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-indent: -18pt;">
<span lang="AR-EG" style="font-family: "arial" , sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi73TgMNkYmV9ae60JRrPI9J7b4gcLWJRkJ7KrvvPmskQOC8YfgEB_BX_UPSQoQDpHjuPCSdCOEH3fQQrRhsUaxhl9A5zjo7iNjDLRQwyuks64FXPI8q-YBLqPoUcHGowfM0N0Wl3ZvvaQ/s1600/helppage.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi73TgMNkYmV9ae60JRrPI9J7b4gcLWJRkJ7KrvvPmskQOC8YfgEB_BX_UPSQoQDpHjuPCSdCOEH3fQQrRhsUaxhl9A5zjo7iNjDLRQwyuks64FXPI8q-YBLqPoUcHGowfM0N0Wl3ZvvaQ/s320/helppage.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="text-indent: -18pt;">
<span style="font-family: "segoe" , sans-serif; font-size: 9.5pt; line-height: 14px;"> -<span style="font-family: "times new roman"; font-size: 7pt; line-height: normal;"> </span></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">الي هنا نكون انتهينا من الجزء الثاني في الجزء القادم ساقوم بانشاء </span><span dir="LTR">Clint application </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">.</span></span></div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-61547235513997147902013-04-09T03:16:00.000-07:002016-11-20T16:26:53.202-08:00مثال بسيط علي انشاء WCF Service الجزء الاول<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div class="MsoNormal" dir="RTL">
<span style="color: #cc0000;"><b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">اولا : انشاء </span><span dir="LTR" style="font-family: "segoe-semibold" , "sans-serif"; font-size: 10.0pt; line-height: 115%;">Entity Model</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-SA" style="font-family: "segoe-semibold" , "sans-serif"; font-size: 10.0pt; line-height: 115%;"><span dir="RTL"></span><span dir="RTL"></span> التي سنقوم باستخدامها مع </span><span dir="LTR">WCF Service</span></b></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<span style="color: #cc0000;"><b><span dir="LTR"><br /></span></b></span></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;"> -<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">قم بانشاء </span><span dir="LTR">New Project </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> من النوع </span><span dir="LTR">Class Library</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> وقم بتسميته </span><span dir="LTR">BirthdayEntityModel</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>
وقم باعطاء </span><span dir="LTR">Solution Name</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">اسم </span></span><span dir="LTR">BirthdayService</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>
كما بالشكل </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGdrwdvIAALN26wy9-5CWnEjRb5X8WTbDB5q56rfbUpN3Iu9XbDX8xo9J0Eq_gI54DlXRlcZBQMEPMVVbmMVrpeUdjslrWiUWkdHpZeeKf1-Oj9ylGeBfHaUPmCKtZelLYDjXfgWrNmpQ/s1600/CreateSoultion.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGdrwdvIAALN26wy9-5CWnEjRb5X8WTbDB5q56rfbUpN3Iu9XbDX8xo9J0Eq_gI54DlXRlcZBQMEPMVVbmMVrpeUdjslrWiUWkdHpZeeKf1-Oj9ylGeBfHaUPmCKtZelLYDjXfgWrNmpQ/s320/CreateSoultion.png" width="320" /></a></div>
<div align="center" class="MsoListParagraphCxSpMiddle" dir="RTL" style="text-align: center;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;"> -<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بعد انشاء الـ </span><span dir="LTR">Project </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> قم بحذف </span><span dir="LTR">Class1 </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> من الـ </span><span dir="LTR">Solutions Explorer </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;"> -<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">قم باضافة </span><span dir="LTR">New Item </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> بالضغط بالزر الايمن للماوس علي </span><span dir="LTR">BirthdayEntityModel</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>
واختيار </span><span dir="LTR" style="font-family: "segoe" , "sans-serif"; font-size: 9.5pt; line-height: 115%;">Add </span><span dir="LTR" style="font-size: 9.5pt; line-height: 115%; mso-bidi-font-family: Segoe; mso-bidi-language: AR-EG;">>> </span><span dir="LTR" style="font-family: "segoe" , "sans-serif"; font-size: 9.5pt; line-height: 115%;"> New Item</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "segoe" , "sans-serif"; font-size: 9.5pt; line-height: 115%;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"> واختيار </span><span dir="LTR">ADO.Net Entity Data Model </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> وفي خانة الاسم قم بكتابة الاسم </span><span dir="LTR">BirthdayModel.edmx<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;"> -<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">من </span><span dir="LTR" style="font-family: "segoe" , "sans-serif"; font-size: 9.5pt; line-height: 115%;">Entity
Data Model Wizard</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-SA" style="font-family: "segoe" , "sans-serif"; font-size: 9.5pt; line-height: 115%;"><span dir="RTL"></span><span dir="RTL"></span> التي ستظهر فور اضافة الـ </span><span dir="LTR" style="font-size: 9.5pt; line-height: 115%; mso-bidi-font-family: Segoe;">Model
</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "segoe" , "sans-serif"; font-size: 9.5pt; line-height: 115%;"><span dir="RTL"></span><span dir="RTL"></span> قم باختيار </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" lang="AR-EG" style="font-size: 9.5pt; line-height: 115%; mso-bidi-font-family: Segoe; mso-bidi-language: AR-EG;"><span dir="LTR"></span><span dir="LTR"></span> </span><span dir="LTR" style="font-size: 9.5pt; line-height: 115%; mso-bidi-font-family: Segoe; mso-bidi-language: AR-EG;">Generate From Database </span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">ومن </span></span><span dir="LTR">Choose Your Data Connection</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>
قم بالضغط علي </span><span dir="LTR">New
Connection </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> لتحديد مصدر البيانات كما بالشكل </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghQLIVr4x33syXfW-ek8jqP0Fo1-04yM-9OEkTFB6B-4U8J8DHSAyT5vnznqNGK9IHOZumEq1ZlcLxKa5C44s5-byr0qy_QskXIq1Ozy28SW2JR6bY3lsNdku5uNZd-dMBbWB2OEI8rSE/s1600/connection.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghQLIVr4x33syXfW-ek8jqP0Fo1-04yM-9OEkTFB6B-4U8J8DHSAyT5vnznqNGK9IHOZumEq1ZlcLxKa5C44s5-byr0qy_QskXIq1Ozy28SW2JR6bY3lsNdku5uNZd-dMBbWB2OEI8rSE/s320/connection.png" width="221" /></a></div>
<br />
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;"> </span><span style="font-family: "arial" , sans-serif;"> </span></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;"> -<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بعد انا تحدد مصدر البيانات والضغط علي </span><span dir="LTR">Ok </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> سيتم الرجوع الي الصفحة السابقة قم بعد ذلك
بالضغط علي </span><span dir="LTR">Next </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> لتحديد الـ </span><span dir="LTR">Objects </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> التي تريد استخدامها كما بالشكل </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-zxFkjKXzbsPj3Kc6EdnOd72mvoRSzpnhKHhNRVx7LFdWJlhgeFyFIP8UqB92S3KN8q5FwC1bypJO_BVq5nWMs0nbl7TJBn9bG_035y8RUFCxmIZDr6GI1H0mH2tLzjsCB24WGnXcr8k/s1600/databaseObj.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-zxFkjKXzbsPj3Kc6EdnOd72mvoRSzpnhKHhNRVx7LFdWJlhgeFyFIP8UqB92S3KN8q5FwC1bypJO_BVq5nWMs0nbl7TJBn9bG_035y8RUFCxmIZDr6GI1H0mH2tLzjsCB24WGnXcr8k/s320/databaseObj.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
</div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;"> -<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بعد الضغط علي </span><span dir="LTR">Finish </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> سيتم انشاء الـ </span><span dir="LTR">Entity Model </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> يحتوي علي الـ </span><span dir="LTR">table </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> التي تم تحديدها كما بالشكل الاتي </span><span dir="LTR"><o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Evkg7VzP8vyT_PmUy0vplVHFZNqEQ-QxFa1UQ54o7tIn31FgOcNgdK79cKjAEe-AG-r_qc6lux8z9PUgpgc5HdFDBT7uyiPx3B4K-OWVhUkFXyr0gJ8d5FWe8aAZDOZsgDq5hImPU8s/s1600/entitymodel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Evkg7VzP8vyT_PmUy0vplVHFZNqEQ-QxFa1UQ54o7tIn31FgOcNgdK79cKjAEe-AG-r_qc6lux8z9PUgpgc5HdFDBT7uyiPx3B4K-OWVhUkFXyr0gJ8d5FWe8aAZDOZsgDq5hImPU8s/s320/entitymodel.png" width="276" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;"> -<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">قم بعمل </span><span dir="LTR">Build Soultion </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> بالضغط علي </span><span dir="LTR">F6 <o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
الان قمنا باعداد الـ Entity Model التي سنقوم باستخدامها لارجاع البيانات من والي Database باستخدام WCF Service</div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
الان يمكننا انشاء انشاء WCF Service</div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<span style="font-family: "arial" , sans-serif;">- ملحوظة</span></div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<span style="font-family: "arial" , sans-serif;">الـ table التي تم استخدامها ذكرت سابقأ في </span><a href="http://dotnetwithsqlserver.blogspot.com/2013/02/microsoft-report-client-side-reporting.html" itemprop="url" rel="bookmark" style="color: #333333; outline: none; text-decoration: none;">مثال</a><a href="http://dotnetwithsqlserver.blogspot.com/2013/02/microsoft-report-client-side-reporting.html" itemprop="url" rel="bookmark" style="outline: none; text-decoration: none;"><span style="color: #666666;"> علي اعداد تقارير Microsoft Report - Client-Side Reporting الجزء الاول</span></a></div>
<br />
<div class="MsoListParagraphCxSpLast" dir="LTR" style="direction: ltr; margin-bottom: 10.0pt; margin-left: 36.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; text-align: left; unicode-bidi: embed;">
<br /></div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-1684519988776242932013-02-26T06:32:00.000-08:002016-11-20T16:26:14.469-08:00مثال علي اعداد تقارير Microsoft Report - Client-Side Reporting الجزء الثالث والاخير<div dir="rtl" style="text-align: right;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="MsoNormal" dir="RTL">
<b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">ثالثاً - عرض التقرير <o:p></o:p></span></b></div>
<div class="MsoListParagraph" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><b><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt; font-weight: normal;">
</span></span></b><!--[endif]--><span dir="RTL"></span><b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">اعداد الـ </span></b><b><span dir="LTR">Forms </span></b><span dir="RTL"></span><b><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> </span></b><b><span dir="LTR"><o:p></o:p></span></b></div>
<div class="MsoNormal" dir="RTL">
<span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> </span><span lang="AR-SA" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">
الان بعد اعداد التقرير سنقوم باعداد عدد 2 </span><span dir="LTR">Form </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> , الـ </span><span dir="LTR">Form </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> الاولي سنضع بها 2 </span><span dir="LTR">dateTimePicker </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> وونعطيهم الاسماء </span><span dir="LTR">dtFrom </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> و </span><span dir="LTR">dtTo </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> علي الترتيب , وايضا نقوم بوضع </span><span dir="LTR">button </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> لياخذ الاسم </span><span dir="LTR">btnShowReport</span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG">ليكون الشكل
كالاتي : <o:p></o:p></span></span></div>
<div class="MsoNormal" dir="RTL">
<span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span lang="AR-EG"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5aJwOIZFuaE2MTJHJ_19ejFcmbIFQZYrNzOKY63TYI1Cgv6f4K8Uu_v0adIvDUgTLGIh6lVlSEMvljMHNnyguKn-QeuWnJiNjxwpM_YaA74l-tkaEXBKSWjMR4CJ9RBZjN1cBsXlAutw/s1600/dateform.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5aJwOIZFuaE2MTJHJ_19ejFcmbIFQZYrNzOKY63TYI1Cgv6f4K8Uu_v0adIvDUgTLGIh6lVlSEMvljMHNnyguKn-QeuWnJiNjxwpM_YaA74l-tkaEXBKSWjMR4CJ9RBZjN1cBsXlAutw/s320/dateform.png" width="320" /></a></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">الـ </span><span dir="LTR">Form </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> الثانية ستستخدم لعرض التقرير نقوم بوضع </span><span dir="LTR">reportViewer</span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> من الـ </span><span dir="LTR">ToolBox </span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG"> ونقوم بالاعلان عن </span></span><span dir="LTR">DataSet </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> وفي </span><span dir="LTR">Form Constructor </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> نقوم بوضع </span><span dir="LTR">Dataset </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> كـ </span><span dir="LTR">parameter </span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG">ليصبح الكود في </span></span><span dir="LTR">Form 2 </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> كالتالي <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
System.Data;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
System.Drawing;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
System.Linq;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
System.Text;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
System.Windows.Forms;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
Microsoft.Reporting.WinForms;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">namespace</span><span style="font-family: "consolas"; font-size: 9.5pt;"> WindowsFormsApplication1<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">public</span>
<span style="color: blue;">partial</span> <span style="color: blue;">class</span> <span style="color: #2b91af;">Form2</span> : <span style="color: #2b91af;">Form</span><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: #2b91af;">DataSet</span> DsReport = <span style="color: blue;">new</span> <span style="color: #2b91af;">DataSet</span>();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">public</span> Form2(<span style="color: #2b91af;">DataSet</span> dsReport)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
InitializeComponent();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> DsReport =
dsReport; <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">وشكل </span><span dir="LTR">Form2 </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> كالتالي <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLB6CgDwfT92ueKCRWdE_6j4pxxfO5Sk4n35hwyBgRPP1YNeuZ9DE1rbt-3T7nh6f8M4m_KBwaxqpVn2pEHClBNTG4ZC4Ft5V3CSJ6TkPQr7dthMMDskouSsswUqNlrDkA3E5Ovu134KA/s1600/Form2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="253" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLB6CgDwfT92ueKCRWdE_6j4pxxfO5Sk4n35hwyBgRPP1YNeuZ9DE1rbt-3T7nh6f8M4m_KBwaxqpVn2pEHClBNTG4ZC4Ft5V3CSJ6TkPQr7dthMMDskouSsswUqNlrDkA3E5Ovu134KA/s320/Form2.png" width="320" /></a></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">وبالعودة للـ </span><span dir="LTR">Form </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> الاولي وبعد اضافة الحدث </span><span dir="LTR">btnShowReport_Click</span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG">بالضغط مرتين علي
زر العرض كما بالشكل الاول <o:p></o:p></span></span></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">يكون الكود كالتالي <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
System;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
System.Data;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
System.Text;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
System.Windows.Forms;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
Microsoft.Reporting.WinForms;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
System.Data.SqlClient; <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">namespace</span><span style="font-family: "consolas"; font-size: 9.5pt;"> WindowsFormsApplication1<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">public</span>
<span style="color: blue;">partial</span> <span style="color: blue;">class</span> <span style="color: #2b91af;">Form1</span> : <span style="color: #2b91af;">Form</span><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">public</span> Form1()<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
InitializeComponent();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">private</span> <span style="color: blue;">void</span> btnShowReport_Click(<span style="color: blue;">object</span> sender, <span style="color: #2b91af;">EventArgs</span>
e)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">string</span> connstring = <span style="color: #a31515;">@"Data
Source=.\sqlexpress;Initial Catalog=birthdaydb;Integrated Security=True"</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">using</span> (<span style="color: #2b91af;">SqlConnection</span>
MyConn = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlConnection</span>(connstring))<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: #2b91af;">SqlCommand</span> Command = <span style="color: blue;">new</span>
<span style="color: #2b91af;">SqlCommand</span>(<span style="color: #a31515;">"Select
* from FUBirthDayReport(@DtFrom , @DtTo)"</span>, MyConn);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
Command.CommandType = <span style="color: #2b91af;">CommandType</span>.Text;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
Command.Parameters.AddWithValue(<span style="color: #a31515;">"@DtFrom"</span>,
<span style="color: #2b91af;">Convert</span>.ToDateTime(dtFrom.Value));<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
Command.Parameters.AddWithValue(<span style="color: #a31515;">"@DtTo"</span>,
<span style="color: #2b91af;">Convert</span>.ToDateTime(dtTo.Value));<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> MyConn.Open();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: #2b91af;">SqlDataReader</span> Reader = Command.ExecuteReader();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: #2b91af;">DataSet</span> dsReport = <span style="color: blue;">new</span>
<span style="color: #2b91af;">DataSet1</span>();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
dsReport.Tables[0].Load(Reader);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> Reader.Close();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> MyConn.Close();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: #2b91af;">Form2</span> frm2 = <span style="color: blue;">new</span> <span style="color: #2b91af;">Form2</span>(dsReport);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
frm2.ShowDialog(); <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">}<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">وبالعودة الي </span><span dir="LTR">Form2 </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> لنقوم باكمال الكود النهائي كالتالي <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">public</span><span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">partial</span> <span style="color: blue;">class</span>
<span style="color: #2b91af;">Form2</span> : <span style="color: #2b91af;">Form</span><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: #2b91af;">DataSet</span> DsReport = <span style="color: blue;">new</span> <span style="color: #2b91af;">DataSet</span>();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">public</span> Form2(<span style="color: #2b91af;">DataSet</span> dsReport)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
InitializeComponent();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> DsReport =
dsReport; <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">private</span> <span style="color: blue;">void</span> Form2_Load(<span style="color: blue;">object</span> sender, <span style="color: #2b91af;">EventArgs</span>
e)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
reportViewer1.Reset();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
reportViewer1.LocalReport.ReportEmbeddedResource =<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: #a31515;">"WindowsFormsApplication1.BirthDayReport.rdlc"</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: #2b91af;">ReportDataSource</span> rds = <span style="color: blue;">new</span>
<span style="color: #2b91af;">ReportDataSource</span>();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> rds.Name = <span style="color: #a31515;">"DataSetBirthDay"</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> rds.Value =
DsReport.Tables[0];<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
reportViewer1.LocalReport.DataSources.Add(rds);<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
reportViewer1.RefreshReport();<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">الان قد انتهينا من اعداد عرض التقرير ومن
المفترض ان تكون النتيجة كما بالشكل :<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNLGhk3qzivm8RAIf3en1aFIb4EggqSSqZAvph0zw7QXPuQCn-rpjnsZteM9OszTwhzAg79pzgoJYxH9mfBJHKs7nS5W7xsat3W55KcSJV0N2gvTw_jxw3fDQx0U0R1i1JgLZ3-Xj7ync/s1600/report.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNLGhk3qzivm8RAIf3en1aFIb4EggqSSqZAvph0zw7QXPuQCn-rpjnsZteM9OszTwhzAg79pzgoJYxH9mfBJHKs7nS5W7xsat3W55KcSJV0N2gvTw_jxw3fDQx0U0R1i1JgLZ3-Xj7ync/s320/report.png" width="320" /></a></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">ملحوظة : يجب الاهتمام بتنسيق التقرير ليصبح
الشكل النهائي افضل من ذلك فالتقارير من اهم الاجزاء التي يجب الاهتمام بها عند
تطويرك لاي برمجيات .<o:p></o:p></span></div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-4429939323005230972013-02-25T04:46:00.001-08:002016-11-20T16:25:38.487-08:00 مثال علي اعداد تقارير Microsoft Report - Client-Side Reporting الجزء الثاني <div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div class="MsoNormal" dir="RTL">
<b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">ثانيا - اعداد التقارير<o:p></o:p></span></b></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><b><i><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt; font-style: normal; font-weight: normal;">
</span></span></i></b><!--[endif]--><span dir="RTL"></span><b><i><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">اولا التكوين او الهيكل</span></i></b><span dir="LTR"></span><b><i><span dir="LTR" lang="AR-EG"><span dir="LTR"></span> </span></i></b><span dir="RTL"></span><b><i><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> : ينقسم الـ</span></i></b><b><i><span dir="LTR">Report </span></i></b><span dir="RTL"></span><b><i><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> الي ثلاث اجزاء هي </span></i></b><b><i><span dir="LTR"><o:p></o:p></span></i></b></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><b><i><span style="color: #632423; font-family: "symbol"; font-size: 12.0pt; line-height: 115%;">·<span style="font-family: "times new roman"; font-size: 7pt; font-style: normal; font-weight: normal; line-height: normal;">
</span></span></i></b><!--[endif]--><span dir="RTL"></span><b><i><span lang="AR-EG" style="color: #632423; font-family: "arial" , "sans-serif"; font-size: 12.0pt; line-height: 115%;">الراس – </span></i></b><b><i><span dir="LTR" style="color: #632423; font-size: 12.0pt; line-height: 115%;">Header</span></i></b><span dir="RTL"></span><b><i><span style="color: #632423; font-family: "arial" , "sans-serif"; font-size: 12.0pt; line-height: 115%;"><span dir="RTL"></span> </span></i></b><b><i><span dir="LTR" style="color: #632423; font-size: 12.0pt; line-height: 115%;"><o:p></o:p></span></i></b></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">وهو المكان الذي يوضع فيه العنواين والتورايخ واشياء
اخرى مثل شعار الشركة وارقام التليفونات بمعني اخر يعتبر رأس التقرير هو تعريف
التقرير وهو مهم جدا في اي تقرير .<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><b><i><span style="color: #632423; font-family: "symbol"; font-size: 12.0pt; line-height: 115%;">·<span style="font-family: "times new roman"; font-size: 7pt; font-style: normal; font-weight: normal; line-height: normal;">
</span></span></i></b><!--[endif]--><span dir="RTL"></span><b><i><span lang="AR-EG" style="color: #632423; font-family: "arial" , "sans-serif"; font-size: 12.0pt; line-height: 115%;">الجسم – </span></i></b><b><i><span dir="LTR" style="color: #632423; font-size: 12.0pt; line-height: 115%;">Body </span></i></b><span dir="RTL"></span><b><i><span style="color: #632423; font-family: "arial" , "sans-serif"; font-size: 12.0pt; line-height: 115%;"><span dir="RTL"></span> </span></i></b><b><i><span dir="LTR" style="color: #632423; font-size: 12.0pt; line-height: 115%;"><o:p></o:p></span></i></b></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">وهو المكان الذي يوضع به تفاصيل التقرير مثل المعاملات
التجارية بشكل موجز او مفصل والاجماليات <o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><b><i><span style="color: #632423; font-family: "symbol"; font-size: 12.0pt; line-height: 115%;">·<span style="font-family: "times new roman"; font-size: 7pt; font-style: normal; font-weight: normal; line-height: normal;">
</span></span></i></b><!--[endif]--><span dir="RTL"></span><b><i><span lang="AR-EG" style="color: #632423; font-family: "arial" , "sans-serif"; font-size: 12.0pt; line-height: 115%;">الذيل او نهاية الصفحه – </span></i></b><b><i><span dir="LTR" style="color: #632423; font-size: 12.0pt; line-height: 115%;">Footer <o:p></o:p></span></i></b></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">يمكن ان يوضع في نهاية الصفحه معلومات مثل رقم الصفحه
ومعلومات حقوق النشر ومعلومات اخري طبقا
لرغبة المصمم او العميل<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><b><i><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt; font-style: normal; font-weight: normal;">
</span></span></i></b><!--[endif]--><span dir="RTL"></span><b><i><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">ادوات التقرير - </span></i></b><span dir="LTR"></span><b><i><span dir="LTR"><span dir="LTR"></span> Report</span></i></b><b><i><span dir="LTR" style="color: #632423; font-size: 12.0pt; line-height: 115%;"> </span></i></b><b><i><span dir="LTR">Tool Box <o:p></o:p></span></i></b></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<b><i><span dir="LTR"><br /></span></i></b></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-SA" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">في الفقره الاتيه ساتطرق الي الادوات التي سيتم استخدامها في المثال :<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<b><i><span style="color: #632423; font-family: "symbol"; font-size: 12.0pt; line-height: 115%;"><br /></span></i></b></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><b><i><span style="color: #632423; font-family: "symbol"; font-size: 12.0pt; line-height: 115%;">·<span style="font-family: "times new roman"; font-size: 7pt; font-style: normal; font-weight: normal; line-height: normal;">
</span></span></i></b><!--[endif]--><span dir="RTL"></span><b><i><span dir="LTR" style="color: #632423; font-size: 12.0pt; line-height: 115%;">Table<o:p></o:p></span></i></b></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<b><i><span dir="LTR" style="color: #632423; font-size: 12.0pt; line-height: 115%;"><br /></span></i></b></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-SA" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">الـ </span><span dir="LTR">Table </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> هي من اهم الادوات التي يستخدمها المطورون في
عملهم كما هو واضح من الاسم تستخدم الـ </span><span dir="LTR">Table </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> لعرض البيانات بطريقة رائعه تتكون الـ </span><span dir="LTR">Table</span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span>
من </span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> أ – الراس – </span><span dir="LTR" style="font-family: "utopia-regular" , "serif"; font-size: 9.0pt; line-height: 115%;">Header</span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.0pt; line-height: 115%;"><span dir="RTL"></span> : يستخدم في اظهار اسماء الـ </span><span dir="LTR" style="font-family: "utopia-regular" , "serif"; font-size: 9.0pt; line-height: 115%;">Columns </span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; font-size: 9.0pt; line-height: 115%;"><span dir="RTL"></span> </span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">المستخدمة . <o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"> ب – التفاصيل - </span><span dir="LTR" style="font-family: "utopia-regular" , "serif"; font-size: 9.0pt; line-height: 115%;">Detail</span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> : يستخدم لعرض البيانات في شكل
صفوف بشكل ألي .<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"> جـ - الذيل </span><span lang="AR-SA" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">– </span><span dir="LTR" style="font-family: "utopia-regular" , "serif"; font-size: 9.0pt; line-height: 115%;">Footer</span><span dir="RTL"></span><span lang="AR-SA" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> : يستخدم لانشاء ملخص او اجماليات .<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><b><i><span style="color: #632423; font-family: "symbol"; font-size: 12.0pt; line-height: 115%;">·<span style="font-family: "times new roman"; font-size: 7pt; font-style: normal; font-weight: normal; line-height: normal;">
</span></span></i></b><!--[endif]--><span dir="RTL"></span><b><i><span dir="LTR" style="color: #632423; font-size: 12.0pt; line-height: 115%;">TextBox<o:p></o:p></span></i></b></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">يمكن استخدام الـ </span><span dir="LTR">Text Box </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> لاضافه عنوان الريبورت او استخدامها في </span><span dir="LTR">Page Header </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> او </span><span dir="LTR">Page Footer </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> او في </span><span dir="LTR">Body </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> كما يمكن ايضا استخدمها كـ </span><span dir="LTR">Data Field </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> بمعني اخر غالبا ما تستخدم </span><span dir="LTR">TextBox</span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> بشكل او باخر داخل الـ </span><span dir="LTR">Report<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">الان بعد ملخص عن تكوين الـ </span><span dir="LTR">Report </span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG">نقوم باضافه </span></span><span dir="LTR">Report </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> جديد من </span><span dir="LTR">Project Solution >> Add New Item </span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="margin-right: 54.0pt; mso-add-space: auto; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><b><i><span style="color: #632423; font-family: "symbol"; font-size: 12.0pt; line-height: 115%;">·<span style="font-family: "times new roman"; font-size: 7pt; font-style: normal; font-weight: normal; line-height: normal;">
</span></span></i></b><!--[endif]--><span dir="RTL"></span><b><i><span dir="LTR" style="color: #632423; font-size: 12.0pt; line-height: 115%;">Line<o:p></o:p></span></i></b></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">يستخدم الـ </span><span dir="LTR">Line </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> للفصل بين البيانات وفي التنسيق بشكل عام <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="margin-right: 18.0pt;">
<br /></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><b><i><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt; font-style: normal; font-weight: normal;">
</span></span></i></b><!--[endif]--><span dir="RTL"></span><b><i><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">ثانيا انشاء الـ </span></i></b><b><i><span dir="LTR">Report <o:p></o:p></span></i></b></div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">الان نقوم باضافه ريبور جديد من الـ <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<span dir="LTR">Project
Solution >> Add >> New Item >> Report </span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG"><o:p></o:p></span></span></div>
<div class="MsoNormal" dir="RTL">
<span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ72t3s164XrfBHnocgfrbrBlnb26vFHscm56i5q65vyvnePO6buvVvccW8g9NAmRJ3d17e9vNqDaxBd_hfQnxhS9aQcBljDGUMrbRp400Zm7JYcxs8u8x7QxeMrPYg-08zhY37KOwqhM/s1600/AddReport.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ72t3s164XrfBHnocgfrbrBlnb26vFHscm56i5q65vyvnePO6buvVvccW8g9NAmRJ3d17e9vNqDaxBd_hfQnxhS9aQcBljDGUMrbRp400Zm7JYcxs8u8x7QxeMrPYg-08zhY37KOwqhM/s320/AddReport.png" width="320" /></a></div>
<div class="MsoNormal" dir="RTL">
<span dir="LTR"></span><span dir="LTR" lang="AR-EG"><span dir="LTR"></span> </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> </span></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بعد اضافه </span><span dir="LTR">Report </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> سنقوم باضافه </span><span dir="LTR">Page Header </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> و </span><span dir="LTR">Page Footer </span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG"><o:p></o:p></span></span></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بالضغط بالزر الايمن للماوس علي الصفحه نقوم
باختاير </span><span dir="LTR">Page Header </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> و </span><span dir="LTR"></span><span dir="LTR" lang="AR-EG"><span dir="LTR"></span> </span><span dir="LTR">Page Footer </span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG">او يمكن اختيارها من </span></span><span dir="LTR">Tool Box </span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG">كما بالشكل <o:p></o:p></span></span></div>
<div class="MsoNormal" dir="RTL">
<span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span lang="AR-EG"><br /></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCTjoW9covu905dtm756GmkRMs96-FmvxW7NWlQs2HlWAFv1aQ32CqhPJ41clEqJ3wQH0m1Lqr4JLPeWrf3-e6nJBMv5FbcH9-MDMRAJbFpNdgJU3F28cuLQ0Ig4bHjR1mJswunKm_vw/s1600/Page+Header.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="164" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCTjoW9covu905dtm756GmkRMs96-FmvxW7NWlQs2HlWAFv1aQ32CqhPJ41clEqJ3wQH0m1Lqr4JLPeWrf3-e6nJBMv5FbcH9-MDMRAJbFpNdgJU3F28cuLQ0Ig4bHjR1mJswunKm_vw/s320/Page+Header.png" width="320" /></a></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بعد تقسيم الصفحة يمكننا اضافه الادوات التي
نريدها باستخدام </span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span> Report Tools
</span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG">الان جاء دورك في اضافه
الادوات لرأس وذيل التقرير كما تحب وقد قمت باضافه </span></span><span dir="LTR">Textboxes </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> باراقام التليفوانات وبيانات شركتي كما بالشكل<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge8TJPB_UsM8G8ynuua2Jc2C5QDmPfLzVY9Gf1-C3nUdiq5mlRLBCWYVsh781xVuP7XxV5fFZ68YD4WK4jotA26QXedS-w1Qn8iaiJ8DIvyATU0mQy15cVCS1E6S8Dio_X2HYasf7w4LE/s1600/headersurface.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge8TJPB_UsM8G8ynuua2Jc2C5QDmPfLzVY9Gf1-C3nUdiq5mlRLBCWYVsh781xVuP7XxV5fFZ68YD4WK4jotA26QXedS-w1Qn8iaiJ8DIvyATU0mQy15cVCS1E6S8Dio_X2HYasf7w4LE/s320/headersurface.png" width="320" /></a></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">سوف تلاحظ اضافتي لـ </span><span dir="LTR">Field </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> مثل تاريخ الطباعه وعدد الصفحات في نهاية
التقرير يمكنك اضافتها وبيانات اخري عن طريق </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<span dir="LTR">Report
Data >> </span><span dir="LTR" style="font-family: "arial" , "sans-serif";">Built-in
Fields</span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> يمكن اظهار </span><span dir="LTR">Report Data </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> من شريط القوائم بالضغط علي </span><span dir="LTR">View </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> واختيار الـ </span><span dir="LTR">Report Data </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> او عن طريق الضغط مباشرة علي </span><span dir="LTR">CTRL + ALT + D <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<span dir="LTR"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU2zuJztu-PXiJR1hxS1qA5-ZEOVQ-U0P3fx0uj1YN1gCRR0giCHAakM2uVNwsxYL1F-HYopepX5dqsm5HrBQurdzapwiE20EM_AtmPJa6BedWcUCNsWd9pfK7TQ2qKyH_8kBgWdVeW1M/s1600/ReportData.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU2zuJztu-PXiJR1hxS1qA5-ZEOVQ-U0P3fx0uj1YN1gCRR0giCHAakM2uVNwsxYL1F-HYopepX5dqsm5HrBQurdzapwiE20EM_AtmPJa6BedWcUCNsWd9pfK7TQ2qKyH_8kBgWdVeW1M/s320/ReportData.png" width="179" /></a></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;"><br /></span></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><!--[endif]--><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بعد تصميم الراس والذيل سنقوم بتوصيل الـ </span><span dir="LTR">Report </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> بـ الـ </span><span dir="LTR">DataSet </span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG">التي قمنا تم انشأها في الجزء
الاول , عن طريق الـ </span></span><span dir="LTR">Report
Data </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> نقوم باختيار </span><span dir="LTR">New </span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG">ثم </span></span><span dir="LTR">DataSet</span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG">ليظهر مربع حوار
نقوم بتسميه التي نريدها ونختار الـ </span></span><span dir="LTR">Dataset </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> المطلوبة </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF2xVqQuZbhlXjStdLnxEOKDFpxeFl6dFuQscrrJaMrzE0ksZHJkgu6xKaF6rBrqkNsvhpmPOxu_POXbzM0XMizB55wjyrmUhJMNZ2z7uagJBakYuyDoWU7st4Z9I0rMhP9FeV0SvTz5E/s1600/NewDataSet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="207" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF2xVqQuZbhlXjStdLnxEOKDFpxeFl6dFuQscrrJaMrzE0ksZHJkgu6xKaF6rBrqkNsvhpmPOxu_POXbzM0XMizB55wjyrmUhJMNZ2z7uagJBakYuyDoWU7st4Z9I0rMhP9FeV0SvTz5E/s320/NewDataSet.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-SA" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-no-proof: yes;">بعد الضغط علي </span><span dir="LTR">OK </span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-no-proof: yes;"><span dir="RTL"></span> </span><span lang="AR-SA" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-no-proof: yes;">سوف يظهر لك الـ </span><span dir="LTR">Dataset </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-no-proof: yes;"><span dir="RTL"></span> بالحقول التي تم انشاءها في </span><span dir="LTR">Rport Data <o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span dir="LTR"> </span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-no-proof: yes;">والتي يمكن سحبها وافلاتها في اي مكان
في التقرير الان سوف اقوم بتصميم عنوان التقرير في منطقة الـ </span><span dir="LTR">Report Body <o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-no-proof: yes;">والذي
سيكون عنوانه كالتالي <o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-no-proof: yes;">تقرير
تواريخ الميلاد خلال الفتره من </span><span dir="LTR" style="color: #1f497d; mso-bidi-language: AR-EG; mso-no-proof: yes; mso-themecolor: text2;">DateFrom</span><span dir="LTR"> </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-no-proof: yes;"><span dir="RTL"></span> الي </span><span dir="LTR" style="color: #1f497d; mso-bidi-language: AR-EG; mso-no-proof: yes; mso-themecolor: text2;">DatatTo</span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-no-proof: yes;"><span dir="RTL"></span> <span lang="AR-EG"><o:p></o:p></span></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span dir="LTR" style="color: #1f497d; mso-bidi-language: AR-EG; mso-no-proof: yes; mso-themecolor: text2;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFM5_gJ1O9Gry52Ft2u9TFXaxHcCn3mNdem7C0EG_T3hTILiZ1SlZ5158fEhcY-QqCHOUF3LoT8E3UPjC9Hh9v3zTyUlhKEqpsYIqKHpIO35umUlvvjG-NUDM0Gl6MxVdfXyrQjA1-YMI/s1600/reportitle.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFM5_gJ1O9Gry52Ft2u9TFXaxHcCn3mNdem7C0EG_T3hTILiZ1SlZ5158fEhcY-QqCHOUF3LoT8E3UPjC9Hh9v3zTyUlhKEqpsYIqKHpIO35umUlvvjG-NUDM0Gl6MxVdfXyrQjA1-YMI/s320/reportitle.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-no-proof: yes;">الان
نقوم باضافه </span><span dir="LTR">Table </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-no-proof: yes;"><span dir="RTL"></span> لعرض التقرير من </span><span dir="LTR">Tool Box </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-no-proof: yes;"><span dir="RTL"></span> قم بسحب وافلات </span><span dir="LTR">Table </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-no-proof: yes;"><span dir="RTL"></span> ومن </span><span dir="LTR" style="font-family: "arial" , "sans-serif";">Properties</span><span dir="RTL"></span><span lang="AR-SA" style="font-family: "arial" , "sans-serif";"><span dir="RTL"></span> ومن الخاصية </span><span dir="LTR" style="font-family: "arial" , "sans-serif";">DataSetName </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG;"><span dir="RTL"></span> نقوم باختيار الـ </span><span dir="LTR" style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG;">DatSet </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG;"><span dir="RTL"></span> التي قمنا باضافتها الي الـ </span><span dir="LTR" style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG;">Report
</span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG;"><span dir="RTL"></span> من قبل</span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsoufgqqTpW6RkqS7sBpfXe28a0xwpo6jS1IF5cYbAKgOyZmWJX2J3BDEt7KIbmzqJk8H50JGqmqKUb9w9WBu_8xEJn8G0VvKLOOg3CPH6bKJzLiELDfrIUGG1lXVfz8TxNQ3oBbfNGvM/s1600/tablixReportDatset.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsoufgqqTpW6RkqS7sBpfXe28a0xwpo6jS1IF5cYbAKgOyZmWJX2J3BDEt7KIbmzqJk8H50JGqmqKUb9w9WBu_8xEJn8G0VvKLOOg3CPH6bKJzLiELDfrIUGG1lXVfz8TxNQ3oBbfNGvM/s320/tablixReportDatset.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بالضغط بالماوس علي
</span><span dir="LTR">Tablix </span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG">يمكننا اضافة عدد الـ </span></span><span dir="LTR">Columns </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> التي نريد ان نقوم بعرضها وكما رأيت شكل الـ </span><span dir="LTR">Table </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> وتقسيمها عن المرور بالماوس علي الصف الثاني </span><span dir="LTR">DataRow </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> سيظهر لك مربع صغير بالضغط عليه يمكن اخنيار </span><span dir="LTR">Field </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> الدذي تريده كما الشكل <o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH62mW_0APQ2B8p_Wg6ZnOFUZgqeJRCuQ4zj8gsM9U0QMcjIBDVQ8yOywCwpFEVOnNCj-hnc4sz1z6BNgTp8cg_GpLPwTucN4JrkMtSqsUCxT1iJvOmAJGOGCt45J4i5YVNF0UMYWpO2o/s1600/ADDDataField.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH62mW_0APQ2B8p_Wg6ZnOFUZgqeJRCuQ4zj8gsM9U0QMcjIBDVQ8yOywCwpFEVOnNCj-hnc4sz1z6BNgTp8cg_GpLPwTucN4JrkMtSqsUCxT1iJvOmAJGOGCt45J4i5YVNF0UMYWpO2o/s320/ADDDataField.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بعد الانتهاء من تسمية
الحقول في راس الـ </span><span dir="LTR">Tabel </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> واضافه </span><span dir="LTR">Data Field </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> يمكنك ان تقوم يتنسيق الـ </span><span dir="LTR">Tabel </span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">كما تريد انظر
الشكل الاتي : <o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDywDOf2XcFXXMt8jdXarnpEhEUVFzp8U-5K0VQk7MhslMpWsqpOT7Zd8ma5ojWT4LufcpN1yGmXzqNt6lRBxuOPxrL6UqPmw4l50KHiYQ595VcQYYRCM8olhs2hkxchd5KIzlSHnBCrM/s1600/ReportFormat.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDywDOf2XcFXXMt8jdXarnpEhEUVFzp8U-5K0VQk7MhslMpWsqpOT7Zd8ma5ojWT4LufcpN1yGmXzqNt6lRBxuOPxrL6UqPmw4l50KHiYQ595VcQYYRCM8olhs2hkxchd5KIzlSHnBCrM/s320/ReportFormat.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">الي الان تم
الانتهاء من الجزء الثاني لاعداد التقارير , في الجزء الثالث سأسرد طريقة عرض
التقرير باستخدام الـ </span><span dir="LTR">C# </span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><o:p></o:p></span></div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-68554100817913204152013-02-23T11:49:00.001-08:002016-11-20T16:24:47.651-08:00مثال علي اعداد تقارير Microsoft Report - Client-Side Reporting الجزء الاول<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><b><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;"> <span style="color: #990000;"> -<span style="font-family: "times new roman"; font-size: 7pt; font-weight: normal;">
</span></span></span></b><!--[endif]--><span style="color: #990000;"><span dir="RTL"></span><b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">اولا اعداد مصدر البيانات الـ </span></b></span><b><span dir="LTR"><span style="color: #990000;">Dataset</span><o:p></o:p></span></b></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<b><span dir="LTR"><br /></span></b></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">في هذا المثال سوف
نستخدم </span><span dir="LTR"><span style="color: #20124d;">Dataset</span> </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> كمصدر محلي للبيانات , يمكن ان نعيد البيانات
الي </span><span style="color: #20124d;"><span dir="LTR">Dataset</span><span dir="RTL"></span></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span style="color: #20124d;"><span dir="RTL"></span> </span>من اي قاعده بيانات كـ
</span><span style="color: #20124d;"><span dir="LTR">SQL SERVER </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> او </span><span dir="LTR">Oracle </span><span dir="RTL"></span></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span style="color: #20124d;"><span dir="RTL"></span> او .... </span><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">وفي الفقرة القادمه
ساسرد طريقة ارجاع البيانات للـ </span><span dir="LTR">Dataset </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> باستخدام </span><span dir="LTR">SQL Server Table Valued Functions</span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">1 - <o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><br /></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">من </span><span dir="LTR"><span style="color: #20124d;">Project Solution</span> </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> ومن </span><span dir="LTR"><span style="color: #20124d;">Add New Item</span> </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> نقوم باختيار </span><span dir="LTR"><span style="color: #20124d;">Dataset</span> </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> من النافذة التي ستظهر .<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بعد اضافه </span><span dir="LTR"><span style="color: #20124d;">Dataset</span> </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> وباستخدام الـ </span><span dir="LTR"><span style="color: #20124d;">Dataset Designer</span> </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> نقوم بضغط الزر الايمن للماوس واختيار </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span dir="LTR"> <span style="color: #20124d;">Add >> Data Table</span></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG">او
يمكن افلاتها من </span></span><span dir="LTR"></span><span dir="LTR" lang="AR-EG"><span dir="LTR"></span> </span><span dir="LTR"><span style="color: #20124d;">ToolBox</span></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">كما بالشكل :<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgB45Nb-JAiur9t-gEMqOaENBEbA5jFPSBOFyZX9_NnvPTEaD5yCdgFCJU4nRYEBNuEb-0VMMjnQ6yKTVHmIiOV2B0O10l5_4yTg70LAZrpwWjfizMZEddmF1SlfRBQhQXWKl7aaPzPtU/s1600/Datatable.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgB45Nb-JAiur9t-gEMqOaENBEbA5jFPSBOFyZX9_NnvPTEaD5yCdgFCJU4nRYEBNuEb-0VMMjnQ6yKTVHmIiOV2B0O10l5_4yTg70LAZrpwWjfizMZEddmF1SlfRBQhQXWKl7aaPzPtU/s320/Datatable.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><br /></span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">2- </span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بعد اضافه الـ </span><span dir="LTR">Data Table </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> يمكننا اضافه الـ </span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span> Columns </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> وتسميتها كما نريد بالضغط علي الـ </span><span dir="LTR">Data Table </span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> </span></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<span dir="LTR">Add >> Column </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> , قمت باضافة الـ </span><span dir="LTR">Columns </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> وحددت نوع البيانات كالاتي: <o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhixCjg49ym78ZaOwQFDlLIeTD34g8N0N3iI-59MVFmWf2xYZUmIdrRQDBWDmsDesbKGrMV_YY80NoreNTzE7xDOsIIwgHXUKXHvrSuwzTr6thC6yonlW_MdaBKesqsSsovzqCqtoO7yE/s1600/NewCulomn.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="237" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhixCjg49ym78ZaOwQFDlLIeTD34g8N0N3iI-59MVFmWf2xYZUmIdrRQDBWDmsDesbKGrMV_YY80NoreNTzE7xDOsIIwgHXUKXHvrSuwzTr6thC6yonlW_MdaBKesqsSsovzqCqtoO7yE/s320/NewCulomn.png" width="320" /></a></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">الان وبعد ان تم
انشاء مصدر البيانات المحلي سيمكننا ان نربطه بالتقرير وسوف اقوم بشرح اعداد
التقرير بالتفصيل في الجزء الثاني .<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<span style="color: #990000;"><b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">- ثانيا اعداد مصدر البيانات من </span></b><b><span dir="LTR">SQlServer</span></b></span><b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><o:p></o:p></span></b></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><br /></span></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">1- </span></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><br /></span></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بعد انشاء قاعدة البيانات سنقوم بانشاء الــ </span><span dir="LTR">Table </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> التي سنستخدمها تحتوي علي </span><span dir="LTR">Culomns </span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">الاتية <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlwF-YIjRr_g_0s3OFdyD4pwdoook8X2GVQHZPahPEfurbOHB7ym2_cmCnk5i9l2PgSeTB9AFXmtQzXHMFYqIQT-E-LIBmiMo5-KhBKPg0no3yMimpu7tNP_0wCoalhyphenhyphenh4q2LIDXBr2SU/s1600/BirthDatSqlTable.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlwF-YIjRr_g_0s3OFdyD4pwdoook8X2GVQHZPahPEfurbOHB7ym2_cmCnk5i9l2PgSeTB9AFXmtQzXHMFYqIQT-E-LIBmiMo5-KhBKPg0no3yMimpu7tNP_0wCoalhyphenhyphenh4q2LIDXBr2SU/s320/BirthDatSqlTable.png" width="320" /></a></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">وهذا اسكريبت
انشائها<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<span style="text-align: center;">-----------------------------------------------------------------------------------------------------------</span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: green; font-family: "courier new"; font-size: 10.0pt;">/****** Object: Table [dbo].[BirthDay] Script Date: 02/23/2013 21:00:25 ******/<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">SET</span><span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">ANSI_NULLS</span>
<span style="color: blue;">ON<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">GO<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">SET</span><span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">QUOTED_IDENTIFIER</span>
<span style="color: blue;">ON<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">GO<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">CREATE</span><span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">TABLE</span>
[dbo]<span style="color: grey;">.</span>[BirthDay]<span style="color: grey;">(<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;"> [Id]
[int] <span style="color: blue;">IDENTITY</span><span style="color: grey;">(</span>1<span style="color: grey;">,</span>1<span style="color: grey;">)</span> <span style="color: grey;">NOT</span> <span style="color: grey;">NULL,<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;"> [FirstName]
[nvarchar]<span style="color: grey;">(</span>50<span style="color: grey;">)</span> <span style="color: grey;">NOT</span> <span style="color: grey;">NULL,<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;"> [LastName]
[nvarchar]<span style="color: grey;">(</span>50<span style="color: grey;">)</span> <span style="color: grey;">NOT</span> <span style="color: grey;">NULL,<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;"> [birthdayDate]
[date] <span style="color: grey;">NOT</span> <span style="color: grey;">NULL,<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">CONSTRAINT</span> [PK_BirthDay] <span style="color: blue;">PRIMARY</span>
<span style="color: blue;">KEY</span> <span style="color: blue;">CLUSTERED</span> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">(<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;"> [Id]
<span style="color: blue;">ASC<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">)</span><span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">WITH </span><span style="font-family: "courier new"; font-size: 10.0pt;">(</span><span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">PAD_INDEX</span><span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: grey;">=</span> <span style="color: blue;">OFF</span><span style="color: grey;">,</span> <span style="color: blue;">STATISTICS_NORECOMPUTE</span> <span style="color: grey;">=</span> <span style="color: blue;">OFF</span><span style="color: grey;">,</span> <span style="color: blue;">IGNORE_DUP_KEY</span> <span style="color: grey;">=</span> <span style="color: blue;">OFF</span><span style="color: grey;">,</span> <span style="color: blue;">ALLOW_ROW_LOCKS</span>
<span style="color: grey;">=</span> <span style="color: blue;">ON</span><span style="color: grey;">,</span> <span style="color: blue;">ALLOW_PAGE_LOCKS</span> <span style="color: grey;">=</span> <span style="color: blue;">ON</span><span style="color: grey;">)</span> <span style="color: blue;">ON</span> [PRIMARY]<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">)</span><span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">ON</span>
[PRIMARY]<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoListParagraph" style="direction: ltr; margin-bottom: 10.0pt; margin-left: 36.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt; line-height: 115%;">GO</span><o:p></o:p></div>
<div class="MsoNormal" dir="RTL">
<span style="text-align: center;">-----------------------------------------------------------------------------------------------------------</span></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
2 - </div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">الان سنقوم بانشاء
</span><span dir="LTR">Table Function </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> التي ستقوم بارجاع البيانات من الجدول خلال فتره
معينة باستخدام 2 براميتر هما <o:p></o:p></span></div>
<div class="MsoListParagraphCxSpLast" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">يعبران عن بداية
ونهاية الفترة كما في هذا السكريبت <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="text-align: center;">
<span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>-----------------------------------------------------------------------------------------------------------<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span dir="LTR"></span><span style="color: green; font-family: "courier new"; font-size: 10.0pt;"><span dir="LTR"></span>/******
Object: UserDefinedFunction
[dbo].[FUBirthDayReport] Script Date:
02/23/2013 21:06:07 ******/<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">SET</span><span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">ANSI_NULLS</span>
<span style="color: blue;">ON<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">GO<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">SET</span><span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">QUOTED_IDENTIFIER</span>
<span style="color: blue;">ON<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">GO<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">Create</span><span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">FUNCTION</span>
[dbo]<span style="color: grey;">.</span>[FUBirthDayReport]<span style="color: grey;">(</span>@DateFrom <span style="color: blue;">Datetime</span> <span style="color: grey;">,</span> @DateTo <span style="color: blue;">Datetime</span><span style="color: grey;">)<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">RETURNS</span><span style="font-family: "courier new"; font-size: 10.0pt;">
@BirthDayOrder <span style="color: blue;">Table<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">(<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">Se <span style="color: blue;">int</span> <span style="color: blue;">identity</span><span style="color: grey;">(</span>1<span style="color: grey;">,</span>1<span style="color: grey;">)</span> <span style="color: grey;">,</span> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">FullName <span style="color: blue;">nvarchar</span><span style="color: grey;">(</span>110<span style="color: grey;">)</span> <span style="color: grey;">,</span> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">BirthDay <span style="color: blue;">Date</span> <span style="color: grey;">,</span> <o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">DateFrom <span style="color: blue;">datetime</span>
<span style="color: grey;">,<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">DateTo <span style="color: blue;">datetime</span>
<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">AS<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">Begin<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">declare</span><span style="font-family: "courier new"; font-size: 10.0pt;"> @Crs <span style="color: blue;">Cursor</span> <span style="color: grey;">,<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;"> @FullName
<span style="color: blue;">nvarchar</span><span style="color: grey;">(</span>50<span style="color: grey;">)</span> <span style="color: grey;">,<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;"> @BirthDay
<span style="color: blue;">Date</span><span style="color: grey;">;<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">Set</span><span style="font-family: "courier new"; font-size: 10.0pt;"> @Crs <span style="color: grey;">=</span> <span style="color: blue;">Cursor</span> <span style="color: blue;">For</span> <span style="color: blue;">Select</span> FirstName <span style="color: grey;">+</span> <span style="color: red;">' '</span> <span style="color: grey;">+</span> LastName <span style="color: blue;">As</span>
FullName <span style="color: grey;">,</span> birthdaydate<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">From</span> BirthDay<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">Where</span> birthdaydate <span style="color: grey;">Between</span>
@DateFrom <span style="color: grey;">And</span> @DateTo<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">Order</span> <span style="color: blue;">by</span> birthdaydate
<span style="color: grey;">,</span> FullName<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">Open</span><span style="font-family: "courier new"; font-size: 10.0pt;"> @Crs <span style="color: grey;">;<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">Fetch</span><span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">next</span>
<span style="color: blue;">From</span> @Crs<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">
<span style="color: blue;">Into</span> @FullName <span style="color: grey;">,</span>
@BirthDay <span style="color: grey;">;<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">While</span><span style="font-family: "courier new"; font-size: 10.0pt;">(</span><span style="color: magenta; font-family: "courier new"; font-size: 10.0pt;">@@FETCH_STATUS</span><span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: grey;">=</span> 0<span style="color: grey;">)<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">BEGIN<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">Insert</span><span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">into</span>
@BirthDayOrder<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">(</span><span style="font-family: "courier new"; font-size: 10.0pt;">FullName <span style="color: grey;">,</span>
BirthDay <span style="color: grey;">,</span> DateFrom <span style="color: grey;">,</span>
DateTo<span style="color: grey;">)<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">values<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">(</span><span style="font-family: "courier new"; font-size: 10.0pt;">@FullName <span style="color: grey;">,</span>
@BirthDay <span style="color: grey;">,</span> @DateFrom <span style="color: grey;">,</span>
@DateTo<span style="color: grey;">)<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">Fetch</span><span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: blue;">next</span>
<span style="color: blue;">From</span> @Crs<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "courier new"; font-size: 10.0pt;">
<span style="color: blue;">Into</span> @FullName <span style="color: grey;">,</span>
@BirthDay <span style="color: grey;">;<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">End<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">Close</span><span style="font-family: "courier new"; font-size: 10.0pt;"> @Crs<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">Deallocate</span><span style="font-family: "courier new"; font-size: 10.0pt;"> @Crs<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">Return</span><span style="font-family: "courier new"; font-size: 10.0pt;"> <span style="color: grey;">;<o:p></o:p></span></span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt;">End<o:p></o:p></span></div>
<div style="border-bottom: solid windowtext 1.0pt; border: none; mso-border-bottom-alt: solid windowtext .75pt; mso-element: para-border-div; padding: 0cm 0cm 1.0pt 0cm;">
<div class="MsoNormal" style="border: none; direction: ltr; mso-border-bottom-alt: solid windowtext .75pt; mso-padding-alt: 0cm 0cm 1.0pt 0cm; padding: 0cm; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "courier new"; font-size: 10.0pt; line-height: 115%;">GO</span><o:p></o:p></div>
<div class="MsoNormal" style="border: none; direction: ltr; mso-border-bottom-alt: solid windowtext .75pt; mso-padding-alt: 0cm 0cm 1.0pt 0cm; padding: 0cm; text-align: left; unicode-bidi: embed;">
------<o:p></o:p></div>
<div class="MsoNormal" dir="RTL" style="border: none; mso-border-bottom-alt: solid windowtext .75pt; mso-padding-alt: 0cm 0cm 1.0pt 0cm; padding: 0cm;">
<span lang="AR-SA" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">- الان اصبحت مصادر البيانات جاهزة الجزء الثاني من هذا المقال سيتناول
طريقة تصميم التقارير</span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><o:p></o:p></span></div>
</div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-36047422174402337222013-02-22T07:32:00.000-08:002016-11-16T16:52:29.328-08:00 التعامل مع DataGridView باستخدام C# <div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , sans-serif;">افترض ان الـ </span><span dir="LTR">DataGridView </span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span> المستخدمه في الشرح التالي تتكون من اعمدة تأخد الاسامي </span><span dir="LTR" style="color: #a31515; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">Column1</span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , sans-serif;"><span dir="RTL"></span> و </span><span dir="LTR" style="color: #a31515; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">Column2</span><span dir="RTL"></span><span lang="AR-SA" style="color: #a31515; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"><span dir="RTL"></span> .. </span></div>
<div class="MsoNormal" dir="RTL">
</div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><br /></span></div>
<div class="MsoNormal" dir="RTL">
<span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span>1 –<b><i><span style="color: #632423; mso-themecolor: accent2; mso-themeshade: 128;"> الانتقال الي خلية محددة - </span></i></b></span><b><i><span dir="LTR" style="color: #632423; mso-bidi-language: AR-EG; mso-themecolor: accent2; mso-themeshade: 128;">Move to specific Cell</span></i></b><b><i><span lang="AR-EG" style="color: #632423; font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-themecolor: accent2; mso-themeshade: 128;"><o:p></o:p></span></i></b></div>
<br />
<span dir="RTL"></span>
<br />
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span dir="LTR"></span><span style="background: white; color: blue; font-family: "consolas"; font-size: 9.5pt;"><span dir="LTR"></span> <o:p></o:p></span></div>
<div class="MsoListParagraph" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><b><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt; font-weight: normal;">
</span></span></b><!--[endif]--><span dir="RTL"></span><b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">عن طريق تحديد رقم الخلية ورقم الصف</span></b><b><span dir="LTR"><o:p></o:p></span></b></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span dir="LTR"></span><span style="background-color: white; font-family: "consolas"; font-size: 9.5pt;"><span dir="LTR"></span> dataGridView1.CurrentCell
=dataGridView1.Rows[0].Cells[1];</span><span style="font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">في الكود السابق تم الانتقال للخلية الثانية في الصف
الاول من </span><span dir="LTR"></span><span dir="LTR" lang="AR-EG"><span dir="LTR"></span> </span><span dir="LTR">DataGridView</span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span> <span lang="AR-EG"><o:p></o:p></span></span></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">يمكن الاستعانه باسم العمود كالتالي </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> dataGridView1.CurrentCell =<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> dataGridView1.Rows[0].Cells[Column2.Index</span><span style="font-family: "consolas"; font-size: 9.5pt;">];</span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoListParagraphCxSpMiddle" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="margin-bottom: 0.0001pt; text-indent: -18pt;">
<!--[if !supportLists]--><b><span style="font-family: "arial" , "sans-serif"; mso-bidi-language: AR-EG; mso-fareast-font-family: Arial;">-<span style="font-family: "times new roman"; font-size: 7pt; font-weight: normal;">
</span></span></b><!--[endif]--><span dir="RTL"></span><b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">وللانتقال للخلية في نفس الصف </span></b><b><span dir="LTR"><o:p></o:p></span></b></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">dataGridView1.CurrentCell =
dataGridView1.Rows[dataGridView1.CurrentRow.Index].Cells[Column4.Index</span><span style="font-family: "consolas"; font-size: 9.5pt;">];</span></div>
<div class="MsoListParagraphCxSpFirst" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="margin-bottom: 0.0001pt; text-indent: -18pt;">
<b><span style="font-family: "arial" , "sans-serif"; font-size: 9.5pt;"><br /></span></b></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="margin-bottom: 0.0001pt; text-indent: -18pt;">
<!--[if !supportLists]--><b><span style="font-family: "arial" , "sans-serif"; font-size: 9.5pt;">-<span style="font-family: "times new roman"; font-size: 7pt; font-weight: normal;">
</span></span></b><!--[endif]--><span dir="RTL"></span><b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt;">وللانتقال للخلية التاليه في نفس الصف </span></b><b><span dir="LTR" style="font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></b></div>
<div class="MsoListParagraphCxSpLast" dir="RTL" style="margin-bottom: 0.0001pt; text-indent: -18pt;">
<b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt;"><br /></span></b></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">dataGridView1.CurrentCell =<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">dataGridView1.Rows[dataGridView1.CurrentRow.Index].Cells[dataGridView1.CurrentCell.ColumnIndex
+ 1];<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
</div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt;">ولتفادي الخروج عن عدد الخلايا - </span></b><b><span dir="LTR" style="font-family: "consolas"; font-size: 9.5pt;">Out Of Range</span></b><span dir="RTL"></span><b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt;"><span dir="RTL"></span>
في الكود السابق</span></b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<br />
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">if</span><span style="font-family: "consolas"; font-size: 9.5pt;">
(dataGridView1.CurrentCell.ColumnIndex != Column4.Index)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">dataGridView1.Rows[dataGridView1.CurrentRow.Index]</span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">.Cells[dataGridView1.CurrentCell.ColumnIndex
+ 1];</span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">else<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">dataGridView1.Rows[dataGridView1.CurrentRow.Index].Cells[0];<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }</span><span style="font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: center; unicode-bidi: embed;">
<b><i><span style="color: #632423; mso-bidi-language: AR-EG; mso-themecolor: accent2; mso-themeshade: 128;"> ---------------------------------------------------------------------------------------------------------------------------------</span></i></b></div>
<div class="MsoNormal" dir="RTL">
<b><i><span lang="AR-EG" style="color: #632423; font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-themecolor: accent2; mso-themeshade: 128;"><br /></span></i></b></div>
<div class="MsoNormal" dir="RTL">
<span dir="RTL"></span><b><i><span lang="AR-EG" style="color: #632423; font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-themecolor: accent2; mso-themeshade: 128;"><span dir="RTL"></span>2 – معرفة قيمة خليه محدده -
</span></i></b><b><i><span dir="LTR" style="color: #632423; mso-bidi-language: AR-EG; mso-themecolor: accent2; mso-themeshade: 128;">Value of specific Cell</span></i></b><b><i><span lang="AR-EG" style="color: #632423; font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin; mso-themecolor: accent2; mso-themeshade: 128;"><o:p></o:p></span></i></b></div>
<div class="MsoNormal" dir="RTL">
<b><i><span dir="LTR" style="color: #632423; mso-bidi-language: AR-EG; mso-themecolor: accent2; mso-themeshade: 128;"><br /></span></i></b></div>
<div class="MsoListParagraph" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><b><span style="font-family: "arial" , "sans-serif"; font-size: 9.5pt; line-height: 115%;">-<span style="font-family: "times new roman"; font-size: 7pt; font-weight: normal; line-height: normal;">
</span></span></b><!--[endif]--><span dir="RTL"></span><b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt; line-height: 115%;">نفس الكود السابقة
باضافه الخاصية </span></b><span dir="LTR"></span><b><span dir="LTR" style="color: #002060; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"><span dir="LTR"></span>.Value</span></b><span dir="RTL"></span><b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt; line-height: 115%;"><span dir="RTL"></span>
يعد تحديد موقع الخلية </span></b><b><span dir="LTR" style="font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></b></div>
<div class="MsoListParagraph" dir="RTL" style="mso-list: l0 level1 lfo1; text-indent: -18.0pt;">
<b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt; line-height: 115%;"><br /></span></b></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">string</span><span style="font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"> MyCellValue =(<span style="color: blue;">string</span>)dataGridView1.Rows[dataGridView1.CurrentRow.Index].Cells[Column2.Index].Value;
</span><span style="font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal" dir="RTL" style="text-align: center;">
<b style="text-align: left;"><i><span style="color: #632423;">---------------------------------------------------------------------------------------------------------------------------------</span></i></b></div>
<div class="MsoNormal" dir="RTL">
<span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt; line-height: 115%;"></span></div>
<div class="MsoNormal" dir="RTL" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<b><i><span lang="AR-EG" style="color: #632423;"><br /></span></i></b></div>
<div class="MsoNormal" dir="RTL" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0cm; mso-layout-grid-align: none; text-autospace: none;">
<span dir="RTL"></span><b><i><span lang="AR-EG" style="color: #632423;"><span dir="RTL"></span>3 – استخدام </span></i></b><b><i><span dir="LTR" style="color: #632423; mso-bidi-language: AR-EG; mso-themecolor: accent2; mso-themeshade: 128;">foreach</span></i></b><span dir="RTL"></span><b><i><span lang="AR-EG" style="color: #632423;"><span dir="RTL"></span> مع </span></i></b><b><i><span dir="LTR" style="color: #632423; mso-bidi-language: AR-EG; mso-themecolor: accent2; mso-themeshade: 128;">DataGridView</span></i></b><span dir="RTL"></span><b><i><span lang="AR-EG" style="color: #632423;"><span dir="RTL"></span> <o:p></o:p></span></i></b></div>
<div class="MsoNormal" dir="RTL">
<span dir="RTL"></span><span lang="AR-EG" style="font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div>
<b style="font-size: 9.5pt; line-height: 115%;"><i><span lang="AR-EG" style="color: #632423;"> </span></i></b> <o:p></o:p><br />
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal" dir="RTL">
<b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt; line-height: 115%;">يمكن استخدام </span><span style="color: #20124d;"><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt; line-height: 115%;"> </span><span dir="LTR" style="font-family: "consolas"; font-size: 9.5pt; line-height: 115%;">foreach</span></span><span dir="RTL"></span></b><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt; line-height: 115%;"><b><span dir="RTL"></span> من اجل معرفة قيمة كل الخلايا في عمود معين
واستخدامها في مصفوفه او لارسالها الي قاعدة البيانات :</b><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">string</span><span style="font-family: "consolas"; font-size: 9.5pt;">[] array = <span style="color: blue;">new</span> <span style="color: blue;">string</span>[dataGridView1.Rows.Count - 1]; <o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">foreach</span><span style="font-family: "consolas"; font-size: 9.5pt;"> (<span style="color: #2b91af;">DataGridViewRow</span> row <span style="color: blue;">in</span> dataGridView1.Rows)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">if</span> (!row.IsNewRow)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
array[row.Index] = (<span style="color: blue;">string</span>)row.Cells[Column2.Index].Value;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: #2b91af;">MessageBox</span>.Show(array[row.Index]);<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-76304996128214871912013-02-16T06:24:00.000-08:002016-11-20T16:22:57.252-08:00فيجوال سي شارب VC# استخدام خاصية الاكمال التلقائي AutoComplete للـ ComboBox مع DataGridView واستدعاء البيانات من SQL Server db<div dir="rtl" style="text-align: right;" trbidi="on">
<br />
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">اولا تقوم بانشاء الاعمده بالضغط علي </span><span dir="LTR"></span><span dir="LTR"></span><span dir="LTR" lang="AR-EG"><span dir="LTR"></span><span dir="LTR"></span> </span><span dir="LTR">Edit Columans</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">من </span></span><span dir="LTR">DataGridView
Tasks</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> كما موضع
بالشكل<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUYse6T3WFthQeAFbK6VU7fVmbFpp1DkjpKhg9CPpoGZ7gKwEks2eyGqlX2R3NjwY116T84uI4OujRaAS_Mhrb23AAiyKJ1jT-9O4YYfhyphenhyphenYDC92Gl1KOd3zn7tPen8pgZA3eGC_jUjp9s/s1600/%25D8%25A7%25D9%2586%25D8%25B4%25D8%25A7%25D8%25A1+%25D8%25A7%25D9%2584%25D8%25A7%25D8%25B9%25D9%2585%25D8%25AF%25D9%2587.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUYse6T3WFthQeAFbK6VU7fVmbFpp1DkjpKhg9CPpoGZ7gKwEks2eyGqlX2R3NjwY116T84uI4OujRaAS_Mhrb23AAiyKJ1jT-9O4YYfhyphenhyphenYDC92Gl1KOd3zn7tPen8pgZA3eGC_jUjp9s/s320/%25D8%25A7%25D9%2586%25D8%25B4%25D8%25A7%25D8%25A1+%25D8%25A7%25D9%2584%25D8%25A7%25D8%25B9%25D9%2585%25D8%25AF%25D9%2587.png" width="320" /></a></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">ثم نقوم بالضغط علي </span><span dir="LTR">Add </span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> من مربع الحوار الذي سيظهر امامك وكما موضح
بالشكل التالي نقوم بكتابه اسم العمود واختيار النوع "</span><span dir="LTR">Type</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>" </span><span dir="LTR" style="color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">DataGridViewComboBoxColumn
</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">ثم نقوم بكتابه اسم العمود الذي
سيظهر للمستخدم </span></span><span lang="AR-EG" style="color: #002060; font-family: "arial" , "sans-serif"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqvVMrwtHkEp4gRSk6EMofeSiVO5gYsHhHxdiglpUxx53rRudsdVcMIRFMm7uR6B-_KgMar72m73YK3Ov1BDSALnpZrrCURvGY_o0cXPa92uKGPk3zsI1DTXK9JwVC3ro9FJEv7VVgJhE/s1600/%25D8%25A7%25D8%25AE%25D8%25AA%25D8%25A7%25D8%25B1+%25D8%25A7%25D8%25B3%25D9%2585+%25D8%25A7%25D9%2584%25D8%25B9%25D9%2585%25D9%2588%25D8%25AF.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqvVMrwtHkEp4gRSk6EMofeSiVO5gYsHhHxdiglpUxx53rRudsdVcMIRFMm7uR6B-_KgMar72m73YK3Ov1BDSALnpZrrCURvGY_o0cXPa92uKGPk3zsI1DTXK9JwVC3ro9FJEv7VVgJhE/s320/%25D8%25A7%25D8%25AE%25D8%25AA%25D8%25A7%25D8%25B1+%25D8%25A7%25D8%25B3%25D9%2585+%25D8%25A7%25D9%2584%25D8%25B9%25D9%2585%25D9%2588%25D8%25AF.png" width="320" /></a></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بعد الضغط علي </span><span dir="LTR" style="color: #002060; mso-bidi-language: AR-EG;">Add</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span>
نقوم باختيار </span><span dir="LTR" style="color: #002060; mso-bidi-language: AR-EG;">NoThing
</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> من الخاصية </span><span dir="LTR" style="color: #002060; mso-bidi-language: AR-EG;">DisplayStyle</span><span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> في </span><span dir="LTR" style="color: #002060; mso-bidi-language: AR-EG;">Column Properties</span><span dir="RTL"></span><span dir="RTL"></span><span style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"><span dir="RTL"></span><span dir="RTL"></span> <span lang="AR-EG">كما هو موضح بالشكل التالي :<o:p></o:p></span></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitQCgy6M7TsCCJOb4Il3Vux_mdARinfmesBjbEVKOxHVkUFcvoyNpeX9GZbX69XZtGbXfYrF4Gfa7wlnv6poFsZqFOe8ekDjdw9EvTX0GGlgkWQ10-IZHaU4Uhh1xCd9F-Kym0n_0B91I/s1600/%25D8%25AE%25D8%25B5%25D8%25A7%25D8%25A6%25D8%25B5+%25D8%25A7%25D9%2584%25D8%25B9%25D9%2585%25D9%2588%25D8%25AF+Nothing.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitQCgy6M7TsCCJOb4Il3Vux_mdARinfmesBjbEVKOxHVkUFcvoyNpeX9GZbX69XZtGbXfYrF4Gfa7wlnv6poFsZqFOe8ekDjdw9EvTX0GGlgkWQ10-IZHaU4Uhh1xCd9F-Kym0n_0B91I/s320/%25D8%25AE%25D8%25B5%25D8%25A7%25D8%25A6%25D8%25B5+%25D8%25A7%25D9%2584%25D8%25B9%25D9%2585%25D9%2588%25D8%25AF+Nothing.png" width="320" /></a></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">بعد الضغط علي Ok , </span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">من </span><span dir="LTR" style="color: #002060;">DatagridView Properties </span><span dir="RTL"></span><span dir="RTL"></span><span style="color: #002060; font-family: "arial" , sans-serif;"><span dir="RTL"></span><span dir="RTL"></span> </span><span lang="AR-EG" style="font-family: "arial" , sans-serif;">نقوم باضافه الحدث <span style="color: #002060;"> </span></span><span dir="LTR" style="color: #002060; font-family: "consolas"; font-size: 9.5pt;">EditingControlShowin</span><span lang="AR-EG" style="font-family: "arial" , sans-serif; font-size: 9.5pt;"> بالضغط عليه بالماوس ليقوم بنقلنا الي الكود</span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3W4QOzQAl0bFnE7Ih7J4p0LkfajdvfBlh2ONiUIUMYdPWQQpvGVvHTX-J5hJONwrst9dxa3lbVab8ZLH_uBNb3LbazPOqGzgcv4mxpoDd-w805pRhtj54qHqQrjx4lnOa_kM6JT4l9ZI/s1600/%25D8%25A7%25D9%2584%25D8%25AD%25D8%25AF%25D8%25AB+editing.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3W4QOzQAl0bFnE7Ih7J4p0LkfajdvfBlh2ONiUIUMYdPWQQpvGVvHTX-J5hJONwrst9dxa3lbVab8ZLH_uBNb3LbazPOqGzgcv4mxpoDd-w805pRhtj54qHqQrjx4lnOa_kM6JT4l9ZI/s320/%25D8%25A7%25D9%2584%25D8%25AD%25D8%25AF%25D8%25AB+editing.png" width="320" /></a></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
<div class="MsoNormal" dir="RTL">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">وسيكون شكل الـ </span><span dir="LTR">Event </span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"> المحتوي للكود كالتالي :</span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">private</span><span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">void</span>
dataGridView1_EditingControlShowing(<span style="color: blue;">object</span>
sender, <span style="color: #2b91af;">DataGridViewEditingControlShowingEventArgs</span>
e)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;">نقوم بالاعلان عن </span><span dir="LTR" style="color: #002060; mso-bidi-language: AR-EG;">ComboBox </span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; mso-ascii-font-family: Calibri; mso-ascii-theme-font: minor-latin; mso-bidi-font-family: Arial; mso-bidi-language: AR-EG; mso-bidi-theme-font: minor-bidi; mso-hansi-font-family: Calibri; mso-hansi-theme-font: minor-latin;"> قبل كتابه الكود وايضا استخدام<span style="color: #002060;"> المجال </span></span><span dir="LTR" style="color: #002060; font-family: "consolas"; font-size: 9.5pt;">System.Data.SqlClient</span></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<span lang="AR-SA" style="font-family: "courier new"; font-size: 9.5pt;">ليكون شكل الكود في النهاية كالتالي :</span></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt; text-align: right;">
<span style="font-family: "arial" , sans-serif; font-size: 9.5pt; text-align: left;"><br /></span></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt; text-align: right;">
<span style="font-family: "arial" , sans-serif; font-size: 9.5pt; text-align: left;">----------------------------------------------------------------------------------------------------------------------------------------------------------------</span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
System;</span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
System.Data;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">using</span><span style="font-family: "consolas"; font-size: 9.5pt;">
System.Data.SqlClient;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">ComboBox</span><span style="font-family: "consolas"; font-size: 9.5pt;"> DataGridProductCombo; <o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">private</span>
<span style="color: blue;">void</span> dataGridView1_EditingControlShowing(<span style="color: blue;">object</span> sender, <span style="color: #2b91af;">DataGridViewEditingControlShowingEventArgs</span>
e)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">if</span> (dataGridView1.CurrentCell.ColumnIndex ==
ColProduct.Index)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">using</span> (<span style="color: #2b91af;">SqlConnection</span>
MyConn = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlConnection</span>(connString))<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
MyConn.Open();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <o:p></o:p></span><span style="color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">DataSet</span><span style="font-family: "consolas"; font-size: 9.5pt;"> Datset = <span style="color: blue;">new</span> <span style="color: #2b91af;">DataSet</span>();</span></div>
<div class="MsoNormal" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> </span><span style="color: #2b91af; font-family: "consolas"; font-size: 13px;">SqlDataAdapter </span><span style="font-family: "consolas"; font-size: 9.5pt;">Adapter = </span><span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">new</span><span style="font-family: "consolas"; font-size: 9.5pt;">
</span><span style="color: #2b91af; font-family: "consolas"; font-size: 9.5pt;">SqlDataAdapter</span><span style="font-family: "consolas"; font-size: 9.5pt;">(</span><span style="color: #a31515; font-family: "consolas"; font-size: 9.5pt;">"if
exists( Select ProName From Products) Select ProName From Products else select
Null as ProName"</span><span style="font-family: "consolas"; font-size: 9.5pt;">, MyConn);</span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> Adapter.Fill(DatSet,
<span style="color: #a31515;">"Products"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
MyConn.Close();<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
DataGridProductCombo = (<span style="color: #2b91af;">ComboBox</span>)e.Control;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
DataGridProductCombo.DropDownStyle = <span style="color: #2b91af;">ComboBoxStyle</span>.DropDown;</span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
DataGridProductCombo.AutoCompleteMode = <span style="color: #2b91af;">AutoCompleteMode</span>.SuggestAppend;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
DataGridProductCombo.AutoCompleteSource = <span style="color: #2b91af;">AutoCompleteSource</span>.ListItems;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
DataGridProductCombo.DataSource = DatSet.Tables[<span style="color: #a31515;">"Products"</span>];<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
DataGridProductCombo.ValueMember = <span style="color: #a31515;">"ProName"</span>;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
DataGridProductCombo.DisplayMember = <span style="color: #a31515;">"ProName"</span>;<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt; text-align: left;">
<span dir="RTL"></span><span dir="RTL"></span><span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt;"><span dir="RTL"></span><span dir="RTL"></span>------------------------------------------------------------------------------------------------------------------------------------------------------------------<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<span lang="AR-EG" style="font-family: "courier new"; font-size: 9.5pt;">نقوم باضافه
الحدث </span><span dir="LTR" style="font-family: "consolas"; font-size: 9.5pt;">CellValidating</span><span lang="AR-SA" style="font-family: "courier new"; font-size: 9.5pt;"> بنفس طريقة اضافه الحدث السابق </span><span dir="LTR" style="font-family: "consolas"; font-size: 9.5pt;">EditingControlShowing</span><span lang="AR-EG" style="font-family: "courier new"; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<span lang="AR-EG" style="font-family: "courier new"; font-size: 9.5pt;">ثم نقوم بكتابه
الكود ليكون كالتالي<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt;">-------------------------------------------------------------------------------------------------------------------------------------------------------------------<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="color: blue; font-family: "consolas"; font-size: 9.5pt;">private</span><span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">void</span> dataGridView1_CellValidating(<span style="color: blue;">object</span> sender, <span style="color: #2b91af;">DataGridViewCellValidatingEventArgs</span>
e)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">if</span> (e.ColumnIndex == ColProduct.DisplayIndex)<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> <span style="color: blue;">if</span> (!ColProduct.Items.Contains(e.FormattedValue))<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> {<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;">
ColProduct.Items.Add(e.FormattedValue);</span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="LTR" style="direction: ltr; margin-bottom: 0.0001pt; text-align: left; unicode-bidi: embed;">
<span style="font-family: "consolas"; font-size: 9.5pt;"> }<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<span lang="AR-EG" style="font-family: "arial" , "sans-serif"; font-size: 9.5pt;">----------------------------------------------------------------------------------------------------------------------------------------------------------------<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<span style="font-family: "consolas"; font-size: x-small;">من المفترض ان تكون النتيجة كما بالشكل ادناه </span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq3lEvdV0iJhOEphKDJQEa06JyrZZnwuEdiVXMj7MtHm8oSzJSfs4ioYxSrsNKVLEK2XfYtTqXr30vIM9GZbiVFvqsSIyHG_yEfFzOT9IsbOi0AzxceZZqXIV_AvwTHWHYUIarUSTS4pc/s1600/Products.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq3lEvdV0iJhOEphKDJQEa06JyrZZnwuEdiVXMj7MtHm8oSzJSfs4ioYxSrsNKVLEK2XfYtTqXr30vIM9GZbiVFvqsSIyHG_yEfFzOT9IsbOi0AzxceZZqXIV_AvwTHWHYUIarUSTS4pc/s320/Products.png" width="194" /></a></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" dir="RTL">
<br /></div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.comtag:blogger.com,1999:blog-8293286852962170264.post-70175126558033916762012-07-03T05:37:00.005-07:002023-02-24T01:01:44.930-08:00مثال علي تحليل وتصميم النظام Analysis and Design System<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7133854016810018"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-7133854016810018"
data-ad-slot="5700254903"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div dir="rtl" style="text-align: right;" trbidi="on">
<span style="background-color: white;"><br /></span>
<span style="background-color: white;">قبل البدء ستجد في هذا </span><a href="http://dotnetwithsqlserver.blogspot.com/2012/07/blog-post.html" style="background-color: white;">الرابط</a><span style="background-color: white;"> مقدمه مختصره عن شرح النظام المستخدم .</span><br />
<br />
<br />
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<b><i><span lang="AR-SA" style="font-size: 16pt;"><span style="color: blue;">مقدمة </span><o:p></o:p></span></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-SA"> مع
تطور نظم أداره قواعد البيانات كان لابد من وجود آداه جيده لاستغلال الإمكانيات
المتاحة في بيئة العمل التي تشتمل على هذه النظم وكانت المشكلة كيفيه ببن هذه
النظم بطريقه علميه صحيحة حيث لتوجد طريقه صحيحة منظمه فكان الحاجة إلى تطوير
البرمجيات وطريقه تطبيق وسهوله التعديل والصيانة فكانت تحليل النظام هي تلك الأداء
التي وفرت كل هذه الطرق لقيام نظام ناجح يمكن الاعتماد عليه حيث إن عمليه التحليل
لاى نظام تتطلب الفهم الصحيح للنظام من حيث المشاكل والبيانات والعمليات التي
تتعامل مع هذه البيانات وفى هذه المرحلة من التحليل يتم تحديد وتعريف العمل الذي
يحدث داخل المنظمة .</span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<b><i><span lang="AR-SA" style="color: blue; font-size: 16pt;">مفهوم.النظام</span></i></b><span style="color: blue;"><span dir="LTR"></span><b><i><span dir="LTR" style="font-size: 16pt;"><span dir="LTR"></span>
(system)</span></i></b><u><span dir="LTR">:</span></u></span><span dir="LTR"><br />
</span><span lang="AR-SA">عبارة عن مجموعة من العناصر مترابطة
ومتحدة مع بعضها البعض لتحقيق</span><span dir="LTR"></span><span dir="LTR" lang="AR-SA"><span dir="LTR"></span> </span><span lang="AR-SA">هذف معين أو عبارة عن مجموعة من المدخلات التي يتم عليها
عمليات حسابية ومنطقية</span><span dir="LTR"></span><span dir="LTR" lang="AR-SA"><span dir="LTR"></span> </span><span lang="AR-SA">لحصول على المخرجات المطلوبة</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>.<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<span dir="LTR"><br />
</span><span style="color: blue;"><b><i><u><span lang="AR-SA" style="font-size: 16pt;">اجزاء النظام</span></u></i></b><span dir="LTR"></span><b><i><u><span dir="LTR" style="font-size: 16pt;"><span dir="LTR"></span>:</span></u></i></b><span dir="RTL"></span><b><i><u><span lang="AR-SA" style="font-size: 16pt;"><span dir="RTL"></span>-</span></u></i></b></span><span dir="LTR"><br />
</span><span lang="AR-SA">هي (المدخلات،المخرجات،نقاط،التشغيل)</span><span dir="LTR"></span><span dir="LTR" lang="AR-SA"><span dir="LTR"></span>
</span><span lang="AR-SA">الدوال</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>.<br />
<br />
</span><span style="color: blue;"><b><i><u><span lang="AR-SA" style="font-size: 16pt;">المدخلات الأساسية:-</span></u></i></b><span dir="LTR"></span></span><span dir="LTR"><span style="color: blue;"><span dir="LTR"></span> </span><br />
</span><span lang="AR-SA">هي المدخلات التي تدخل على النظام
ويتم عليها</span><span dir="LTR"></span><span dir="LTR" lang="AR-SA"><span dir="LTR"></span> </span><span lang="AR-SA">عمليات تتحول إلى مخرجات وليس بالضرورة أن تدخل هذة المخرجات
على هيئة مدخلات مرة</span><span dir="LTR"></span><span dir="LTR" lang="AR-SA"><span dir="LTR"></span> </span><span lang="AR-SA">أخرى. مثل: طلاب الجامعة</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>.<br />
<br />
</span><b><i><u><span dir="LTR" style="font-size: 16pt;"><o:p></o:p></span></u></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<span style="color: blue;"><b><i><u><span lang="AR-SA" style="font-size: 16pt;">المدخلات الاستبدالية</span></u></i></b><span dir="LTR"></span><u><span dir="LTR"><span dir="LTR"></span>: </span></u></span><span dir="LTR"><br />
</span><span lang="AR-SA">وهي المدخلات التي تدخل إلى النظام
وتصبح جزءً</span><span dir="LTR"></span><span dir="LTR" lang="AR-SA"><span dir="LTR"></span> </span><span lang="AR-SA">منها ولا يتم عليها عمليات تشغيلية ولا تتحول إلى مخرجات.
مثل: المعدات</span><span dir="LTR"></span><span dir="LTR" lang="AR-SA"><span dir="LTR"></span> </span><span lang="AR-SA">والأجهزة</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>.<br />
<br />
</span><b><i><u><span dir="LTR" style="font-size: 16pt;"><o:p></o:p></span></u></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<span style="color: blue;"><b><i><u><span lang="AR-SA" style="font-size: 16pt;">المدخلات البيئية</span></u></i></b><span dir="LTR"></span><b><i><u><span dir="LTR" style="font-size: 16pt;"><span dir="LTR"></span>:</span></u></i></b></span><span dir="LTR"><br />
</span><span lang="AR-SA">وهي التي تؤثر تأثيراً خارجياً على
النظام ولا يتم عليها عمليات</span><span dir="LTR"></span><span dir="LTR" lang="AR-SA"><span dir="LTR"></span> </span><span lang="AR-SA">تشغيل وتصبح جزءً من أجزاء النظام ولا تتحول إلى مخرجات. مثل:
الحرارة, المناخ</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>, </span><span lang="AR-SA">الطقس</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>.<br />
<br />
</span><span style="color: blue;"><b><i><u><span lang="AR-SA" style="font-size: 16pt;">أنواع المخرجات</span></u></i></b><span dir="LTR"></span><b><i><u><span dir="LTR" style="font-size: 16pt;"><span dir="LTR"></span>:</span></u></i></b></span><span dir="LTR"><br />
<br />
</span><span dir="RTL"></span><span lang="AR-SA"><span dir="RTL"></span>1-
مخرجات نهائية</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>: </span><span lang="AR-SA">وهي المخرجات التي تخرج
نهائياً من</span><span dir="LTR"></span><span dir="LTR" lang="AR-SA"><span dir="LTR"></span> </span><span lang="AR-SA">النظام. مثل: خريجي الجامعات</span><span dir="LTR"><br />
</span><span dir="RTL"></span><span lang="AR-SA"><span dir="RTL"></span>2-
المخرجات الارتدادية</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>: </span><span lang="AR-SA">وهي التي ترد إلى</span><span dir="LTR"></span><span dir="LTR" lang="AR-SA"><span dir="LTR"></span>
</span><span lang="AR-SA">نفس النظام على هيئة مدخلات. مثال:
المنتج الغير مطابق للمواصفات</span><span dir="LTR"></span><span dir="LTR" lang="AR-SA"><span dir="LTR"></span> </span><span lang="AR-SA">الاستهلاكية</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>.</span></div>
<br />
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<b><i><u><span lang="AR-SA" style="color: blue; font-size: 16pt;">دورة
تطوير"بناء" البرمجيات</span></u></i></b><span dir="LTR"><br />
</span><span lang="AR-SA">وهي " تقنية</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span> " </span><span lang="AR-SA">تستخدم لتطوير وبناء النظم البرمجية والتطبيقات
المختلفة وتحقق الكفاءة وسهولة</span><span dir="LTR"></span><span dir="LTR" lang="AR-SA"><span dir="LTR"></span> </span><span lang="AR-SA">التعديل والصيانة لنظم المعلومات<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<span lang="AR-SA"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfH8Sxjh0cZauE5nlFwIpSOYkGPyXzq7w8ztQwzE9qa5oSyAOyJH6f8oyXavZBct4qjFWpj0hM3mHsfcN1ih05ZjZG6trh4qFTb1u7mSD4XSe3biwTr1YUkAm7Fj0agX8JiPzxLqBVxQ/s1600/%D9%85%D8%B1%D8%A7%D8%AD%D9%84+%D8%AA%D8%B7%D9%88%D9%8A%D8%B1+%D8%A7%D9%84%D9%86%D8%B8%D8%A7%D9%85.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfH8Sxjh0cZauE5nlFwIpSOYkGPyXzq7w8ztQwzE9qa5oSyAOyJH6f8oyXavZBct4qjFWpj0hM3mHsfcN1ih05ZjZG6trh4qFTb1u7mSD4XSe3biwTr1YUkAm7Fj0agX8JiPzxLqBVxQ/s320/%D9%85%D8%B1%D8%A7%D8%AD%D9%84+%D8%AA%D8%B7%D9%88%D9%8A%D8%B1+%D8%A7%D9%84%D9%86%D8%B8%D8%A7%D9%85.jpg" width="320" /></a></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<span lang="AR-SA"><br /></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<span lang="AR-SA"></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<b><i><u><span lang="AR-SA" style="font-size: 16pt;"><span style="color: blue;">خطوات تحليل النظم :
تنقسم إلى </span><o:p></o:p></span></u></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 72pt; mso-list: l2 level2 lfo1; tab-stops: list 72.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
1-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">تحليل متطلبات النظام <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 72pt; mso-list: l2 level2 lfo1; tab-stops: list 72.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
2-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">تجميع البيانات وتحليلها </span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 72pt; mso-list: l2 level2 lfo1; tab-stops: list 72.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
3-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">تنظيم البيانات وتوثيقها </span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 72pt; mso-list: l2 level2 lfo1; tab-stops: list 72.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
4-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">توصيف التصميم المنطقي</span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 72pt; text-align: justify; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<span dir="RTL" style="color: #cc0000;"></span><b><i><u><span lang="AR-SA" style="color: #cc0000; font-size: 16pt;"><span dir="RTL"></span>1) تحليل متطلبات النظام : </span><span lang="AR-SA"><o:p></o:p></span></u></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-SA"> وهى
عمليه تحديد وفهم طبيعة المشكلة الموجودة في المؤسسة أو الهيئة التي سيتم تحليل
النظام لها وتقديم المقترحات لحلها ، ومن
هنا نجد إن طبيعة هذا النظام تحتاج إلى دراسة المشاكل المحيطة بهذا النظام القائم
والتي تتلخص في : <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 32.25pt; mso-list: l4 level1 lfo2; tab-stops: list 32.25pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
1-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">البطء وعدم السرعة في استرجاع البيانات <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 32.25pt; mso-list: l4 level1 lfo2; tab-stops: list 32.25pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
2-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">عدم دقه البيانات المخزونة وذلك من طريقه تخزينها
</span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 32.25pt; mso-list: l4 level1 lfo2; tab-stops: list 32.25pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
3-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">صعوبة التعديل وأضافه البيانات الجديدة </span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 32.25pt; mso-list: l4 level1 lfo2; tab-stops: list 32.25pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
4-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">صعوبة الصيانة الدورية للبيانات </span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 32.25pt; mso-list: l4 level1 lfo2; tab-stops: list 32.25pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
5-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">الحجم الكبير للملفات الاساسيه للبيانات في
الهيئات المختلفة </span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<span dir="RTL" style="color: #cc0000;"></span><b><i><u><span lang="AR-SA" style="font-size: 16pt;"><span style="color: #cc0000;"><span dir="RTL"></span>2) تجميع البيانات وتحليلها : </span><o:p></o:p></span></u></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-SA"> وهناك عده
أساليب مختلفة في جمع المعلومات عن المشكلة ومنها : <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 39pt; mso-list: l5 level1 lfo3; tab-stops: list 39.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
<span lang="AR-SA">أ-<span style="font-size: 7pt;">
</span></span><span dir="RTL"></span><span lang="AR-SA">مقابله
المسؤلين عن النظام المراد تنفيذه <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 39pt; mso-list: l5 level1 lfo3; tab-stops: list 39.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
<span lang="AR-SA">ب-<span style="font-size: 7pt;">
</span></span><span dir="RTL"></span><span lang="AR-SA">المقابلات
الشخصية والاستبيانات </span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 21pt; text-align: justify; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<span dir="RTL" style="color: #cc0000;"></span><b><i><u><span lang="AR-SA" style="color: #cc0000; font-size: 16pt;"><span dir="RTL"></span>* المقابلات الشخصية : </span><span lang="AR-SA"><o:p></o:p></span></u></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 21pt; text-align: justify; unicode-bidi: embed;">
<span lang="AR-SA"> وقد تمت أكثر من مقابله مع عدد من المسؤلين
والذين يحتاجون إلى هذا النظام ومنهم : <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<b><span lang="AR-SA"> وقد تم خلال المقابلات الاستفسار عن مجموعه من الاسئله
مثل</span></b><span lang="AR-SA"> :<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<b><i><span lang="AR-SA">
أولا : الاسئله المحددة <o:p></o:p></span></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 59.25pt; mso-list: l1 level1 lfo6; tab-stops: list 59.25pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
1-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">هل النظام الحالي جيد آم لا ؟<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 59.25pt; mso-list: l1 level1 lfo6; tab-stops: list 59.25pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
2-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">هل تريد استخدام الحاسبات بدلا من الطرق اليدوية
؟ </span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 59.25pt; mso-list: l1 level1 lfo6; tab-stops: list 59.25pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
3-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">هل النظام الحالي يوفر السرعة والسرية للمعلومات
المخزونة ؟ </span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 59.25pt; mso-list: l1 level1 lfo6; tab-stops: list 59.25pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
4-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">هل تفضل أن يكون النظام الجديد يستخدم قواعد
البيانات ؟ </span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span dir="RTL"></span><b><i><u><span lang="AR-SA" style="font-size: 16pt;"><span dir="RTL"></span> ثانيا الاسئلة الغير
محددة الاجابات</span></u><span lang="AR-SA"> : <o:p></o:p></span></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 36pt; mso-list: l3 level1 lfo7; tab-stops: list 36.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
1-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">ماذا تريد من النظام الجديد . <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 36pt; mso-list: l3 level1 lfo7; tab-stops: list 36.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
2-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA"> ما هي
العيوب التي تواجهك في النظام الحالي .</span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 36pt; mso-list: l3 level1 lfo7; tab-stops: list 36.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
3-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">هل لديك اقتراح يمكن أن ننفذها لك في هذا النظام
الذي سيتم إنشاؤه .</span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; text-align: justify; unicode-bidi: embed;">
<span lang="AR-SA">وبعد الاجابة علي الاسئلة
السابقة بدأت تتضح لنا الخطوط الرئيسية لانشاء النظام الجديد .</span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; text-align: justify; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; text-align: justify; unicode-bidi: embed;">
<b><i><u><span lang="AR-SA" style="font-size: 16pt;"><span style="color: #cc0000;">3 – أدوات تحليل النظام </span><o:p></o:p></span></u></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 36pt; mso-list: l6 level1 lfo4; tab-stops: list 36.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
1-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">رسم تخطيطي لتدفق البيانات </span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>(<span style="color: blue;"> data flow diagram </span>) </span><span lang="AR-SA"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 36pt; mso-list: l6 level1 lfo4; tab-stops: list 36.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
2-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">قاموس البيانات </span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>( <span style="color: blue;">data dictionary</span> ) </span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 36pt; mso-list: l6 level1 lfo4; tab-stops: list 36.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
3-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">رسم تخطيطي لبيئة البيابات </span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>( <span style="color: blue;">data structure diagrams</span> ) </span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 36pt; mso-list: l6 level1 lfo4; tab-stops: list 36.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
4-<span style="font-size: 7pt;"> </span><span dir="RTL"></span><span lang="AR-SA">اللغة الانجليزية المنظمة </span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>( <span style="color: blue;">structure English</span> ) </span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 36pt; text-align: justify; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; text-align: justify; unicode-bidi: embed;">
<b><i><u><span lang="AR-SA" style="font-size: 16pt;">بناء رسم تخطيطي لبنية البيانات </span></u></i></b><b><i><u><span dir="LTR" style="font-size: 16pt;"><span style="color: blue;">context diagram</span> </span></u></i></b><span dir="RTL"></span><b><i><u><span lang="AR-SA" style="font-size: 16pt;"><span dir="RTL"></span> <o:p></o:p></span></u></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-EG">عبارة عن رسم تخطيطي
يوضح علاقة نظام البرامج الذي نرغب في تطويره بالمؤسسة أو الادارة التي يتم تطوير
النظام لها . ويوضح الــ </span><span dir="LTR"><span style="color: blue;">context
diagram</span> </span><span dir="RTL"></span><span lang="AR-EG"><span dir="RTL"></span> الاتي : <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 36pt; mso-list: l0 level1 lfo5; tab-stops: list 36.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
<span style="font-family: "wingdings";">v<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><span dir="RTL"></span><span lang="AR-EG">تدقق البيانات من والي النظام </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 36pt; mso-list: l0 level1 lfo5; tab-stops: list 36.0pt; text-align: justify; text-indent: -18pt; unicode-bidi: embed;">
<span style="font-family: "wingdings";">v<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><span dir="RTL"></span><span lang="AR-EG">كل مصادر البيانات ( </span><span dir="LTR">source </span><span dir="RTL"></span><span lang="AR-EG"><span dir="RTL"></span> ) ومصبات البيانات ( </span><span dir="LTR">sinks </span><span dir="RTL"></span><span lang="AR-EG"><span dir="RTL"></span> ) </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; text-align: justify; unicode-bidi: embed;">
<span lang="AR-EG">حيث أن :- المصدر هو الذي يعطي بيانات للنظام . والمصب الذي يأخذ بيانات من
النظام . </span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; text-align: justify; unicode-bidi: embed;">
<span lang="AR-EG">يتم رسم ال<span style="color: blue;"> </span></span><span dir="LTR" style="color: blue;">context
diagram</span><span dir="RTL"></span><span lang="AR-EG"><span dir="RTL"></span> اولا ثم بعد ذلك نقوم برسم الـــ </span><span style="background-color: white; color: blue;">DFD</span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; text-align: justify; unicode-bidi: embed;">
<span style="background-color: white;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; text-align: justify; unicode-bidi: embed;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsItzErkEanaDXkcC7fwgpjOoPenuTRtgsxvrgh_BPSO211SzOeA3BA1JHAWM3GOjKzRMOjPV7aFF7T5O23UR9UvxP5EohuI4bWHuAxrZfKa0dvHsK4rXHmhA9nwg5_I_AbKkZOXfbJYE/s1600/context.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsItzErkEanaDXkcC7fwgpjOoPenuTRtgsxvrgh_BPSO211SzOeA3BA1JHAWM3GOjKzRMOjPV7aFF7T5O23UR9UvxP5EohuI4bWHuAxrZfKa0dvHsK4rXHmhA9nwg5_I_AbKkZOXfbJYE/s320/context.jpg" width="320" /></a></div>
</div>
<br />
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; text-align: justify; unicode-bidi: embed;">
<b style="background-color: white;"><i><u><span lang="AR-SA" style="font-size: 16pt;"><br /></span></u></i></b>
<b style="background-color: white;"><i><u><span lang="AR-SA" style="font-size: 16pt;">الرسم التخطيطي لتدفق البيانات ( </span></u></i></b><b style="background-color: white;"><i><u><span dir="LTR" style="font-size: 16pt;"><span style="color: blue;">DFD</span> </span></u></i></b><span dir="RTL" style="background-color: white;"></span><b style="background-color: white;"><i><u><span lang="AR-SA" style="font-size: 16pt;"><span dir="RTL"></span> )</span></u></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-EG">وتستخدم هذه الاداة لوصف
سريان المعلومات ونقط معالجة البيانات في النظام باستخدام الرسومات حيث من الرسم
التخطيطي نستطيع أن نبين ذلك <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-EG">( أ ) كيف يكون تدفق
البيانات في النظام <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-EG">( ب ) أين يتم معالجة
البيانات في النظام <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-EG">( ج ) اين يتم تخزين البيانات
في النظام <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; tab-stops: 292.3pt; text-align: justify; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; text-align: justify; unicode-bidi: embed;">
<span style="color: blue;"><b><i><u><span lang="AR-SA" style="font-size: 16pt;">تعريف ال </span></u></i></b><b><i><u><span dir="LTR" style="font-size: 16pt;">DFD</span></u></i></b><span dir="RTL"></span></span><b><i><u><span lang="AR-SA" style="font-size: 16pt;"><span style="color: blue;"><span dir="RTL"></span>
:</span><o:p></o:p></span></u></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-SA"> اختصار ل<span style="color: blue;"> </span></span><span dir="LTR" style="color: blue;">Data Flow Diagram</span><span dir="RTL"></span><span lang="AR-SA"><span dir="RTL"></span> اى الرسم التوضيحي لتدفق
البيانات وهو رسم قياسي اى انه لغة موحده على مستوى واسع ويوضح كيفية تدفق
البيانات والمستندات بالمنشاة ويتكون من مجموعه من الرموز التي يدل كل رمز منها
على مكون ما <o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; text-align: justify; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; text-align: justify; unicode-bidi: embed;">
<b><i><u><span lang="AR-SA" style="font-size: 16pt;">كيف يتم رسم<span style="color: blue;"> </span></span></u></i></b><b><i><u><span dir="LTR" style="color: blue; font-size: 16pt;">DFD</span></u></i></b><span dir="RTL"></span><b><i><u><span lang="AR-SA" style="font-size: 16pt;"><span dir="RTL"></span>؟<o:p></o:p></span></u></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-SA">يتم رسم ال </span><span dir="LTR">DFD</span><span dir="RTL"></span><span lang="AR-SA"><span dir="RTL"></span> بناء على فهم كيفية سير العمل فى
المنشاة و المستندات المختلفة المستخدمة بالمنشاة<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-SA">ويوضح التالي:<o:p></o:p></span><br />
<span lang="AR-SA"><br /></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-SA"><span style="color: #cc0000;">1- من أين تأتي البيانات<o:p></o:p></span></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-SA" style="color: #cc0000;">2- كيف يتم التدفق<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-SA" style="color: #cc0000;">3-العمليات المنجزة على هذه البيانات<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-SA"><span style="color: #cc0000;">4- أين تذهب هذه البيانات</span><o:p></o:p></span><br />
<span lang="AR-SA"><span style="color: #cc0000;"><br /></span></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; text-align: justify; unicode-bidi: embed;">
<span style="color: blue;"><b><i><u><span lang="AR-SA" style="font-size: 16pt;">الفرق بين </span></u></i></b><b><i><u><span dir="LTR" style="font-size: 16pt;">DFD</span></u></i></b><span dir="RTL"></span><b><i><u><span lang="AR-SA" style="font-size: 16pt;"><span dir="RTL"></span> وبين </span></u></i></b></span><b><i><u><span dir="LTR" style="font-size: 16pt;"><span style="color: blue;">ERD </span><o:p></o:p></span></u></i></b><br />
<b><i><u><span dir="LTR" style="font-size: 16pt;"><span style="color: blue;"><br /></span></span></u></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<span lang="AR-SA"> - أن </span><span dir="LTR">ERD</span><span dir="RTL"></span><span lang="AR-SA"><span dir="RTL"></span> تمثل البيانات</span><br />
<span lang="AR-SA" style="background-color: white;"> -اما </span><span dir="LTR" style="background-color: white;">DFD</span><span dir="RTL" style="background-color: white;"></span><span dir="RTL" style="background-color: white;"></span><span style="background-color: white;"> تمثل</span><span lang="AR-SA" style="background-color: white;"> العمليات اكثر</span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: justify; unicode-bidi: embed;">
<br />
<br /></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; tab-stops: 292.3pt; text-align: justify; unicode-bidi: embed;">
<span style="color: #cc0000;"><b><span lang="AR-EG" style="font-size: 16pt;">وفيما يلي شكل توضيحي للــــــــــ </span></b><b><span dir="LTR" style="font-size: 16pt;">DFD </span></b><b><span lang="AR-EG" style="font-size: 16pt;">الخاص بسير النظام:-</span></b></span><b><span dir="LTR" style="font-size: 16pt;"><o:p></o:p></span></b><br />
<b><span lang="AR-EG" style="font-size: 16pt;"><br /></span></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; tab-stops: 292.3pt; text-align: justify; unicode-bidi: embed;">
<b><span lang="AR-EG" style="font-size: 16pt;"><br /></span></b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggZ-KyA0cdfcNpwinL9Q8YveuHDe1HKp4MnP92470jDho5RbaO8r-G4wUCEaFOkBi2h8kD4RSF0G6XlXGe7AUWzez3zKv67rUxCNRRt9NZJPHQTrWHxrbzWG-qMBrW77kpRmnw8UK4Z1I/s1600/DFD.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" height="258" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggZ-KyA0cdfcNpwinL9Q8YveuHDe1HKp4MnP92470jDho5RbaO8r-G4wUCEaFOkBi2h8kD4RSF0G6XlXGe7AUWzez3zKv67rUxCNRRt9NZJPHQTrWHxrbzWG-qMBrW77kpRmnw8UK4Z1I/s320/DFD.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">DFD - اضغط للتكبير</td></tr>
</tbody></table>
<div class="MsoNormal" dir="RTL" style="direction: rtl; tab-stops: 292.3pt; text-align: justify; unicode-bidi: embed;">
<b><span lang="AR-EG" style="font-size: 16pt;"><br /></span></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; tab-stops: 292.3pt; text-align: justify; unicode-bidi: embed;">
<b style="color: blue; text-align: right;"><i><u><span lang="AR-SA" style="font-size: 16pt;"> نموذج علاقة الكيانات</span></u></i></b><span dir="LTR" style="color: blue; text-align: right;"></span><b style="color: blue; text-align: right;"><i><u><span dir="LTR" style="font-size: 16pt;"><span dir="LTR"></span>(Entity Relationship
Model)</span></u></i></b></div>
<div align="left" class="MsoTitle" dir="RTL" style="text-align: right;">
<br /></div>
<div align="left" class="MsoTitle" dir="RTL" style="text-align: right;">
<span lang="AR-SA" style="font-size: 12pt;">تعريف نموذج علاقة الكيانات</span><span dir="LTR"></span><span dir="LTR" style="font-size: 12pt;"><span dir="LTR"></span>:</span><span lang="AR-EG" style="font-size: 12pt;"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: right; text-indent: 26.9pt; unicode-bidi: embed;">
<span lang="AR-SA">نموذج
علاقة الكيانات </span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span> (<span style="color: blue;">Entity Relationship Model</span>)</span><span lang="AR-SA">هو أحد الأساليب الشائعة لوضع تصور لقاعدة
البيانات العلاقية وهو يعتمد على</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>:</span><span lang="AR-EG"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; mso-list: l0 level1 lfo1; tab-stops: list 18.0pt left 61.6pt; text-align: right; text-indent: -18pt; unicode-bidi: embed;">
<span style="font-family: "symbol";">·<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><span dir="RTL"></span><span lang="AR-SA">تقسيم النظام إلى ما يسمى كيانات </span><span lang="AR-EG">(</span><span lang="AR-SA">مثل كيان موظف وكيان قسم في نظام شركة</span><span lang="AR-EG">)</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>.<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; mso-list: l0 level1 lfo1; tab-stops: list 18.0pt left 61.6pt; text-align: right; text-indent: -18pt; unicode-bidi: embed;">
<span style="font-family: "symbol";">·<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><span dir="RTL"></span><span lang="AR-SA">كل كيان يحتوى على خصائص معينة تصفه وتحدده </span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>)</span><span lang="AR-SA">مثل الاسم و العنوان
</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>..</span><span lang="AR-SA">الخ لكيان موظف</span><span lang="AR-EG">).</span><span dir="LTR"><o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; mso-list: l0 level1 lfo1; tab-stops: list 18.0pt left 61.6pt; text-align: right; text-indent: -18pt; unicode-bidi: embed;">
<span style="font-family: "symbol";">·<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><span dir="RTL"></span><span lang="AR-SA">تحديد العلاقات بين هذه الكيانات وتوصيف خصائص هذه العلاقات
كما سيتضح فيما بعد</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>.<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; mso-list: l0 level1 lfo1; tab-stops: list 18.0pt left 61.6pt; text-align: right; text-indent: -18pt; unicode-bidi: embed;">
<span style="font-family: "symbol";">·<span style="font-family: "times new roman"; font-size: 7pt;">
</span></span><span dir="RTL"></span><span lang="AR-SA">تمثيل ذلك من خلال رسم يعبر عنه يسمى مخطط علاقة الكيانات</span><span dir="LTR"></span><span dir="LTR"><span dir="LTR"></span>.<o:p></o:p></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; unicode-bidi: embed;">
<span style="color: #cc0000;"><b><i><u><span lang="AR-SA" style="font-size: 16pt;"> أهمية نموذج مخطط</span></u></i></b><span dir="LTR"></span><b><i><u><span dir="LTR" style="font-size: 16pt;"><span dir="LTR"></span>) </span></u></i></b><b><i><u><span lang="AR-SA" style="font-size: 16pt;">علاقة الكيانات</span></u></i></b><span dir="LTR"></span><b><i><u><span dir="LTR" style="font-size: 16pt;"><span dir="LTR"></span>(</span></u></i></b><span dir="RTL"></span></span><b><i><u><span lang="AR-SA" style="font-size: 16pt;"><span style="color: #cc0000;"><span dir="RTL"></span>:</span><o:p></o:p></span></u></i></b></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: right; text-indent: 25.6pt; unicode-bidi: embed;">
<span style="background-color: white; text-indent: 25.6pt;"> هو خطوة
سابقة على تنفيذ قاعدة البيانات بأحد برامج نظم إدارة قواعد البيانات
العلاقية </span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; text-align: right; text-indent: 25.6pt; unicode-bidi: embed;">
<span lang="AR-SA" style="background-color: white; text-indent: 25.6pt;"> <b>(</b></span><span style="color: blue;"><b style="background-color: white; text-indent: 25.6pt;"><u><span dir="LTR">RDBMS </span></u></b><u style="background-color: white; text-indent: 25.6pt;"><span dir="LTR" style="background-color: #f2f2f2; border: 1pt solid windowtext; padding: 0cm;">R</span></u><b style="background-color: white; text-indent: 25.6pt;"><u><span dir="LTR">elational </span></u></b><u style="background-color: white; text-indent: 25.6pt;"><span dir="LTR" style="background-color: #f2f2f2; border: 1pt solid windowtext; padding: 0cm;">D</span></u><b style="background-color: white; text-indent: 25.6pt;"><u><span dir="LTR">ata </span></u></b><u style="background-color: white; text-indent: 25.6pt;"><span dir="LTR" style="background-color: #f2f2f2; border: 1pt solid windowtext; padding: 0cm;">B</span></u><b style="background-color: white; text-indent: 25.6pt;"><u><span dir="LTR">ase </span></u></b><u style="background-color: white; text-indent: 25.6pt;"><span dir="LTR" style="background-color: #f2f2f2; border: 1pt solid windowtext; padding: 0cm;">M</span></u><b style="background-color: white; text-indent: 25.6pt;"><u><span dir="LTR">anagement </span></u></b><u style="background-color: white; text-indent: 25.6pt;"><span dir="LTR" style="background-color: #f2f2f2; border: 1pt solid windowtext; padding: 0cm;">S</span></u></span><b style="background-color: white; text-indent: 25.6pt;"><u><span dir="LTR" style="color: blue;">ystem</span></u><span dir="RTL"></span><span lang="AR-SA"><span dir="RTL"></span>) </span></b><span lang="AR-SA" style="background-color: white; text-indent: 25.6pt;">وهو يساعد في عمل جداول </span><span lang="AR-EG" style="background-color: white; text-indent: 25.6pt;">أ</span><span lang="AR-SA" style="background-color: white; text-indent: 25.6pt;">وملفات قاعدة </span><br />
<span lang="AR-SA" style="background-color: white; text-indent: 25.6pt;"> البيانات والعلاقات بينها على أسس علمية و صحيحة</span><span dir="LTR" style="background-color: white; text-indent: 25.6pt;"></span><span dir="LTR" style="background-color: white; text-indent: 25.6pt;"><span dir="LTR"></span>.</span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; margin-right: 18pt; unicode-bidi: embed;">
<span lang="AR-SA" style="background-color: white; font-size: 16pt;"><span style="color: #cc0000;"><br /></span></span>
<span lang="AR-SA" style="background-color: white; font-size: 16pt;"><span style="color: #cc0000;">تلخيص لأهم الرموز المستخدمة في رسم الـ </span></span><span style="background-color: white;"><u><span dir="LTR" style="font-size: 16pt;"><span style="color: blue;">ERD</span></span></u></span></div>
<br />
<div class="MsoNormal" dir="RTL" style="direction: rtl; tab-stops: 292.3pt; text-align: justify; unicode-bidi: embed;">
<b><span lang="AR-EG" style="font-size: 16pt;"><br /></span></b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; tab-stops: 292.3pt; text-align: justify; unicode-bidi: embed;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPibLXCpxZ64hAxPhNgus_k6aAJ4c0LbUjWPuU9FUAAq8N_pWqEInr7be-B6JztT4hdPljOacj7pxp3GkO63mzco9LnQ4gkwx4f6SJhvhDXUTGPggUGMKPR0kEgvf3uYVAKgWCguAuh48/s1600/%25D8%25B9%25D9%2584%25D8%25A7%25D9%2582%25D8%25A9+%25D8%25A7%25D9%2584%25D9%2583%25D9%258A%25D8%25A7%25D9%2586.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPibLXCpxZ64hAxPhNgus_k6aAJ4c0LbUjWPuU9FUAAq8N_pWqEInr7be-B6JztT4hdPljOacj7pxp3GkO63mzco9LnQ4gkwx4f6SJhvhDXUTGPggUGMKPR0kEgvf3uYVAKgWCguAuh48/s320/%25D8%25B9%25D9%2584%25D8%25A7%25D9%2582%25D8%25A9+%25D8%25A7%25D9%2584%25D9%2583%25D9%258A%25D8%25A7%25D9%2586.jpg" width="320" /></a></div>
<b><span lang="AR-EG" style="font-size: 16pt;"><br /></span></b></div>
<br />
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<span lang="AR-SA"></span></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; tab-stops: 122.1pt; text-align: justify; unicode-bidi: embed;">
<b><span face=""arial" , sans-serif" lang="AR-EG" style="font-size: 16pt;"><br /></span></b>
<b style="background-color: white;"><span face=""arial" , sans-serif" lang="AR-EG" style="font-size: 16pt;"><span style="color: #cc0000;">وفيما يلى شكل توضيحى
للـ</span> </span></b><b style="background-color: white;"><span dir="LTR" face=""arial" , sans-serif" style="color: blue; font-size: 16pt;">ERD</span></b><span dir="RTL" style="background-color: white;"></span><b style="background-color: white;"><span face=""arial" , sans-serif" lang="AR-SA" style="font-size: 16pt;"><span dir="RTL"></span> <span style="color: #cc0000;">الخاص بسير النظام :</span></span></b><br />
<br />
<b><span face=""arial" , sans-serif" lang="AR-SA" style="font-size: 16pt;"><br /></span></b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmQ_F53ZJHcQQ-EdgasnsrrMzwkr2Guzgxen7kZqKmbDl7H4cg6jXeYwkuPACe-M9TYvqi6YwvzqDOrRjrD_5d_G-oXoAOAzECpY7I-wpamf7YG5YaRvhQjtXu28k4zlqhneirIm7NXqc/s1600/erd.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmQ_F53ZJHcQQ-EdgasnsrrMzwkr2Guzgxen7kZqKmbDl7H4cg6jXeYwkuPACe-M9TYvqi6YwvzqDOrRjrD_5d_G-oXoAOAzECpY7I-wpamf7YG5YaRvhQjtXu28k4zlqhneirIm7NXqc/s320/erd.jpg" width="274" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">ERD - اضغط للتكبير</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal" dir="RTL" style="direction: rtl; tab-stops: 122.1pt; text-align: justify; unicode-bidi: embed;">
<b><span face=""arial" , sans-serif" lang="AR-SA" style="font-size: 16pt;"><br /></span></b></div>
<br />
<div class="MsoNormal" dir="RTL" style="direction: rtl; unicode-bidi: embed;">
<br /></div>
</div>
Mohammed Saadhttp://www.blogger.com/profile/17566261648925104598noreply@blogger.com