DataTables ASP.NET MVC 5 Part 2

by

Hi, again this is Part 2 from DataTables ASP.NET MVC 2.

In Part 1, I showed you how to add all data required.

Now let's try to finish what we start together.

Now will try to add new Controller and Call it StudentController.

 

The most important one is, what I highlight it (Yellow).

First one is declared our Interface,

  private readonly IStudent repositoryStudent;

building contractor.

 public StudentController(IStudent repoStudent)
        {
            repositoryStudent = repoStudent;
        }

 

This one our main job :)

  public ActionResult DataTablesJQueryJSON()
        {

         } 

ActionRsult will return JSON data to HTML page.

 [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public ActionResult DataTablesJQueryJSON()
        {
            List<Student> model = new List<Student>();
            model = repositoryStudent.GetStudent; 
            var UserData = new object[model.Count];
            int j = 0;
            foreach (var i in model)
            {
                UserData[j] = new object[] {i.ID, i.FirstName ,i.LastName, i.City};
                j++;
            }
           
            return Json(UserData, JsonRequestBehavior.AllowGet);
        }

 

In last ActionResult, we read data from StudentRepository.

Store it in a model variable.

UserData to store our data after convert it to Object (ordering Important).

Create New View Call it DataTablesJQuery.

After adding HTML Table show be same what ActionResult will return,

I mention it before, ordering is important. 

The Big Boss our JavaScript code with AJAX will call DataTablesJQueryJSON method.

All that will be send to the #example HTML table.

To be Shown like this. 

 

Look at the previous Photo,

look, how many free features you add with simple code. 

 

Source Code

Youtube Videos

if you have any question,

Please, write it in the comment.

DataTables ASP.NET MVC 5 Part 1

by

Hi,

Today I'm going to write Article about very useful tool,

DataTables.net, many of us having trouble when trying to display data in  HTML page.

 it's important to have filtering, paging, and searching box.

OK, any developer can write it down, but today there are many tools make it easier same DataTables.net,

what we will show in this tutorial.

its look good, and easier when coding it.

So let's start with new ASP.NET MVC 5 project.

Follow the photos ;) 

 

Choose MVC,

 

Next Step, Add DataTables From NuGet packages.

 

If you don't want o use it from NuGet just add it as CDN.

So, Now we need data to send it to our HTML page and display it in DataTables

First, we need to create new Class in Models folder and call it Student.

 

Next Step, Create Folder Call it Services will put inside it,

a new class (IStudent class).

 

 

After Create our Interface, we need to create Repository Folder with StudentRepository class.

In StudentRepository Class, I have fake data just to show you how it will be in our HTML page.

sure you can Use data from your SQL Server database, using Entry Framework.

 

See you in Part2

 

 

 

Initialize AngularJS in HTML page

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>

 

 

 

Angular First App

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>

 االناتج :

 

Responsive CSS Truncate تقليص العناوين الطويلة .

by

مشكله يصادفها الكثير من المطورين و المصممين ايضا في طول النص ان كان عنوان او مقالة .

يوجد حلول كثير , لهذه المشكلة :

يمكنك استخدام JavaScript  او JQuery  اوCSS  وحتى لغات اخرى مثل C# 

سوف نستخدم اليوم CSS  .

قم بانشاء ملف CSS جديد باسم a.css  واضف الكود التالي له : 

 

.truncate{
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 250px;
    white-space: nowrap;
}
 
.truncate> * {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
}

 

 

وبنفس المجلد الذي قمت بانشاء الملف السابق فيه , قم بانشاء ملف HTML  جديد  واضف الكود التالي :

 

<!DOCTYPE html>
<html>
<head>
	<title>Rest</title>
	<link rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<div class="truncate">
    <span>
       It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </span>
</div>
</body>
</html>

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