Talent without working hard is nothing.
by

السلام عليكم ورحمة الله وبركاته .

اليوم سنحاول اكمال سلسلة AngularJS  . 

في هذا المقالة سنتحدث على طرق تهيئة صفحة الويب , كي تكون جاهزه او قابلة لقراءاة كود Angular  .

هناك ثلاث طرق , من اجل تعريف Angular في تطبيقك .

الطريقة الاولى يتم التهيىة بشكل اتومتيكي , وهي الطريقة الاسهل .

اما الطريقة الثانية وهي ايضا بشكل اوتومتيكي , لكن اصعب بالتعامل من الطريقة الاولى .

الطريق الثالثة وهي الاصعب , ويتم كل شي فيها بشكل يدوي . 

سوف نتعرف على كل طريقه على حدها , والتعرف متى يجب ان نختار اي طريقة مناسبة لمشروعنا .

ملاحظة:

الشي الموجود في كل الطرق هو اضافة او تضمين ملف AngularJS  من الموقع الرسمي, كرابط CDN  او تحميل نسخة منه على جهازك .

 

الطريقة الاولى :

في هذه الطريقة يتم فقط اضافة ng-app  في ترويسة الصفحة بالتحديد في اول Tag  , كما في التالي 

<HTML ng-app>

ويتم تعرف الــ Controller  كتابع ضمن كود JAVASCRIPT  , كما التالي :

<script >
    function HelloWorld($scope){
        $scope.text="World";
    }
</script>

Code:

<html ng-app>
<head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <script >
    function HelloWorld($scope){
        $scope.text="World";
    }
</script>
</head>
<body>

<div ng-controller="HelloWorld">
<input type="text" ng-model="text" placeholder="Your Nmae">
<hr/>
Hello {{text}}
</div>

</body>
</html>

 

الطريقة الثانية : 

في الطريقة الثانية يتم اعطاء قيمة لــ ng-app  من خلال كود الجافاسكريب بستخدام 

 

Angular.modile 

اسم الكنترولر , يتم تعريفه ايضا كاسم تابع في جافاسكريبت Controller()  .

 

كود :

<html ng-app="Test">
<head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <script >
 angular.module('Test',[]).controller('HelloWorld',function HelloWorld($scope){
        $scope.text="World";
    });
    
</script>
</head>
<body>

<div ng-controller="HelloWorld">
<input type="text" ng-model="text" placeholder="Your Nmae">
<hr/>
Hello {{text}}
</div>

</body>
</html>

 

الطريقة الثالثة :

من الاعتياد ان يكون هناك تطبيق Angular  واحد  في صفحة HTML  , لكن اذا اردت ان يكون هناك اكثر من تطبيق Angular  في صفحة واحده ,

تحتاج لاستخدام طريقة BootStrap في تهيىه مشروعك بشكل يدوي .

 

كود :

 

<html ng-app="Test">
<head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <script >
  angular.element(document).ready(function(){
      angular.module('Test',[]).controller('HelloWorld',function($scope){
          $scope.text='World'
      });
      angular.bootstrap(document,['Test']);
  });
    
</script>
</head>
<body>

<div ng-controller="HelloWorld">
<input type="text" ng-model="text" placeholder="Your Nmae">
<hr/>
Hello {{text}}
</div>

</body>
</html>

 

 

 

Read more..
On
by

السلام عليكم ورحمة الله وبركاتة .

المقالة التالية سوف نتحدث عن منصة Angular  , التي لقت رواج كبير من قبل المبرمجين , لما تقدمة من ميزات وسهوله ديناميكي في العمل .

طبعا هي احد منصات TypeScript  , التي تساعدنا في برمجة صفحات الويب  مثل (JavaScript , jQuery ….) ,و الكثير .

الاصدار الحالي هو Angular 4  ,

سوف نتعرف اكثر على محتواها وميزاتها بمثال صغير .

طبعا كما قلنا هي JavaScript Framework   .

يتم تعريفها على النحو التالي , في راس الصفحة يتم اضافة الـــ CDN  , من موقع Angular  .

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

االخطوة التالية , وهي تعرف الجزء الدي سيعمل على Angular  , على سبيل المثال

<div ng-app="">
   </div>

يجب اضافة ng-app=""  حتى يتم التعرف عليها من قبل Angular     .

يتم اضافة نص , من اجل ادخال الاسم كما التالي :

 <p>Name: <input type="text" ng-model="name"></p>

 مع ذكر  ng-model="name"  , الذي يعتبر كمرجع للقراءه منه في ما بعد .

وايضا يتم اضافة <p> لعرض محتوى صندوق النص name  .

<p ng-bind="name"></p>

يدل الكود السابقة للـ p  على انها تعمل bind  من name  التي هي من نوع Text  .

الكود كامل :

 
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>

 االناتج :

 

Read more..
On
by

مره اخرى مع JQuery AJAX ASP.NET MVC   .

اليوم سوف نتحدث في المقالة التالية عن POST  . 

وكيف يتم استخدامها في ASP.NET MVC  .

POST

الشكل العام :

.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

هي على عكس Get  التي كانت تجلب البيانات من مكتن معين (قاعدة بيانات الخ..).

Post  ترسل البيانات إلى مكان محدد من صفحة الويب . 

الكوج التالي هو كود ارسال Name and Address  بشكل وهمي من ادارء إلى اخرى , عبر التابع التالي .

[HttpPost]
public string Submit(string Name, string Address)
{
    if (!String.IsNullOrEmpty(Name) && !String.IsNullOrEmpty(Address))
        //TODO: Save the data in database
        return "Thank you " + Name + ". Record Saved.";
    else
        return "Please complete the form.";
}

بعد التاكد من عدم ارسال بيانات فارغه . يتم اظهار الرسالة التالية :

Thank you   Name  . Record Saved.

وفي حال كان لا يوجد بيانات , تظهر رساله تطلب بادخالها :

Please complete the form.

 

الكود التالي من اجل صفحة الويب :

 

<p>
    Enter your name
    <br />
    @Html.TextBox("Name")
</p>
<p>
    Enter your address
    <br />
    @Html.TextBox("Address")
</p>
 
<input type="button" value="Save" id="Save" />
<span id="msg" style="color:red;"/>
 
<script type="text/javascript">
    $('#Save').click(function () {
        var url = "Subscription";
        var name = $("#Name").val();
        var address = $("#Address").val();
        $.post(url, { Name: name, Address: address }, function (data) {
            $("#msg").html(data);
        });
    })
</script>

لنحاول هذا المره , ان يكون الكود اكثر احترافيه .

ونستخدم Form  . كما في الشمل التالي : 

يجب علينا تعريف الحقول التاليه و في كلاس منفصل .

public class Subscription
{
    public string Name { get; set; }
    public string Address { get; set; }
}

 

والتعديل على الكود , ليستقبل من كلاس Subscrption  , .

[HttpPost]
public string SubmitSubscription(Subscription subs)
{
    if (!String.IsNullOrEmpty(subs.Name) && !String.IsNullOrEmpty(subs.Address))
        //TODO: Save the data in database
        return "Thank you " + subs.Name + ". Record Saved.";
    else
        return "Please complete the form.";
}

 

كود الويب سكون مختلف قليلا , حيث انه سيتم استخدام From  كما في الشكل التالي :

<form id="subscriptionForm" action="/Home/SubmitSubscription" method="post">
<p>
    Enter your name
    <br />
    @Html.TextBox("Name")
</p>
<p>
    Enter your address
    <br />
    @Html.TextBox("Address")
</p>
 
<input type="button" value="Save" id="Save" />
<span id="msg" style="color:red;"/>
</form>
 
@section Scripts{
    <script type="text/javascript">
        $('#Save').click(function () {
 
            var form = $("#subscriptionForm");
            var url = form.attr("action");
            var formData = form.serialize();
            $.post(url, formData, function (data) {
                $("#msg").html(data);
            });
        })
    </script>
}
 

تم اعطاء الفورم اسم subscriptionForm   حتى يسهل قراءة البيلنات منه في كود الجافا سكريبت .

لن يختلف شي عندي في وقت التنفيذ والناتج كما في الكود السابق . 

لكن هذه الطريقه جيدة من اجل قواعد البيانات ....

 

وشكرا ...

Read more..
On
by

في هذه المقالة سوف نتحدث عن JQuery  ومميزاتها في ASP.NET MVC  .

من اهم المميزا تالرائعه في JQuery Ajax  هي عند عمل تحميل (GET,POST ) للبيانات من السيرفر , لا تحتاج لعمل تحديث لكامل الصفحة , فقط الجزء المستخدم للكود (على سبيل المثال DIV  معينه ) .

GET

تستخدم GET  عند الحاجة لجلب بيانات من السيرفر على سبيل المثال تحميل بيانات مستخدم من قاعدة البيانات .

الشكل العام ل GET  :

.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] ).done/.fail

لنقوم بعمل مثال يوضح كيف يمكننا الاستفادة من GET  في MVC App  .

في الكود التالي شوف يتم ارجاع الوقت من التابع GetTime  .

public string GetTime()
{
    return DateTime.Today.ToString();
}

 

لنقم باضافة السكريبت التالي في صفحة الويب .

 

<p id="DisplayHere">
</p>

 

<script type="text/jscript">
    var url = "GetTime";
    $.get(url, null, function (data) {
        $("#DisplayHere").html(data);
    });
</script>

 

 

 الناتج كما في الصوره السابقة . 

لو اردنا ان يكون التنفيذ عند النقر على Button  .

يتم تعديل الكود السابق كما التالي :

<script type="text/jscript">
    $('#btnID').click(function () {
        var url = "GetTime";
        $.get(url, null, function (data) {
            $("#Displayhere").html(data);
        });
    })
</script>

لنتعمق اكثر في استخدام Get  , ولنقوم بارسال بيانات من صفحة الويب إلى كود ال C#  ويتم ارجاعه ليظهر في اداة اخرى .

الكود التالي يقوم بانشاء صندوق نص باسم txtName  (الاسم هذا مهم جدا لانه وقف التنقيذ Razor  سيحول الاسم اي ID ) .

input  هي عباره عن button  من نوع Submit  . 

<p>
    Enter you name @Html.TextBox("TXTName")
    <input type="submit" id="SubmitName" value="Submit"/>
</p>
 
<script type="text/jscript">
    $('#SubmitName').click(function () {
        var url = "MsgFromRazro";
        var name = $('#TXTName').val();
        $.get(url, { input: name }, function (data) {
            $("#Displayhere").html(data);
        });
    })
</script>

كود ال C# , تابع يستقبل متحول من نوع string  يتاكد من انه غير فارع او NULL  .

يتم ارجاع نص  Please Welcome Name 

public string MsgFromRazro(string input)
{
    if (!String.IsNullOrEmpty(input))
        return "Please welcome " + input + ".";
    else
        return "Please enter your name.";
}

لنتعمق اكثر في JQuery AJAX   . 

هذه المره مع DataBase  , جلب البيانات من قاعدة بياانات واظهارها في صفحة الويب .

اضافة الكود التالي في C#  .

يتم ارسال اسم البلد  من صفحة الويب , والتابع بدوه يقوم بجلبه كل العملاء من DataBase  وارساله على شكل JSON  .

يتم ارجاع البيانات على انها JSON  .

public JsonResult Customer(string Id)
{
    NorthwindEntities db = new NorthwindEntities();
    var result = from r in db.Customers
                    where r.Country == Id
                    select new { r.ContactName, r.Address };
    return Json(result, JsonRequestBehavior.AllowGet);
}

 

كود صفحة الويب , 

 

<p id="DisplayHere">
</p>
 
<p>
    Enter country name @Html.TextBox("Country")
    <input type="submit" id="Get" value="Submit"/>
</p>
 
<script type="text/jscript">
    $('#GetCustomers').click(function () {
        $.getJSON('Customer' + $('#Country').val(), function (data) {
 
            var items = '<table><tr><th>Name</th><th>Address</th></tr>';
            $.each(data, function (i, country) {
                items += "<tr><td>" + country.ContactName + "</td><td>" + country.Address + "</td></tr>";
            });
            items += "</table>";
 
            $('#DisplayHere').html(items);
        });
    })
</script>
 

 

باختصار هذه  احدا ميزات Jquery AJAX wtih ASP.NET MVC 

ساحاول تسجيل فيديو ونشره على Youtube  , ليكون الامر ممتع اكثر وسهل بنفس الوقت .

 

Read more..
On
by

The Model-View-Controller is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller. Each of these components are built to handle specific development aspects of an application. MVC is one of the most frequently used industry-standard web development framework to create scalable and extensible projects.

MVC Components

 

Model

The Model component corresponds to all the data-related logic that the user works with. This can represent either the data that is being transferred between the View and Controller components or any other business logic-related data. For example, a Customer object will retrieve the customer information from the database, manipulate it and update it data back to the database or use it to render data.

View

The View component is used for all the UI logic of the application. For example, the Customer view will include all the UI components such as text boxes, dropdowns, etc. that the final user interacts with.

Controller

Controllers act as an interface between Model and View components to process all the business logic and incoming requests, manipulate data using the Model component and interact with the Views to render the final output. For example, the Customer controller will handle all the interactions and inputs from the Customer View and update the database using the Customer Model. The same controller will be used to view the Customer data.

Read more..
On