CKEditor ASP.NET MVC 5

by

السلام عليكم , 

اليوم سوف  نقوم بشرح كيفية تركيب CKEditor   على ASP.NET MVC 5

 سوف نستخدم الجدول التالي , على SQL Server  .كما هو مبين في الصوره .

الجدول كما هو مبين , فقط ID  و Titile  و Post_Content وهو المهم في مشروعنا .

- الخطوه التاليه هي في Visual Studio , وهي انشاء مشروع MVC  .

- من Nuget  نقوم باضافة مكتبة CKEDITOR  اي اصدرا منها .

 

- اضافة الكود التالي في Controller  , عباره عن كود اضافة او حذف من الداتا بير SQL Server  .

 

الجزء الاهم في موضوعنا هو كيف نقوم بستبدال  EditorFor  التى يتم توليدها من Razor   ب TextAreaFor  .

حتى يتم التعرف عليها من CKEDITOR TOOL  . مع التغيير التالي للاشاره إليها 

 

  new { @class = "ckeditor" }  

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

 

عند تشغيل المشروع يتم استبدال النص باداة CKEDITOR .

كما في الصوره التاليه :

 

 

 ملاحظة : 

طبعا عند كتابة اي سطر في CKEDITOR  , سيتم حفظها في SQL Server Database  , على انها HTML Code  .

لذلك عند عمل جلب للداتا مره اخرى من الداتا بيز لعرضها , يجب ان تكون Raw  كما هو في الصوره التاليه :

بعض عيوب الاداة CKEDITOR  هي عدم دعمها الكامل للASP.NET  من جانب دعم رفع الصور ..

اغلب ال Plugin  تدعم PHP  فقط .

 

تحميل الكود 

Code

 GitHub

 

 

 

 

Onion Architecture in ASP.Net MVC ????? ??????

by

Database initialize class

???? ?? ???? ?????? ????? ???????? ?? ?????? ?????? .

??? ?? ????? ?????? :

 

Repository class implementation

 

?????? ??????? ????? ???? ?????? ??????? ?? ???? ?????????? repository class , ????? ????? ??????? ??? ????? ???????? ??????? LINQ ??? Entity  .

?????? BloodDonorRepository  , ???? ?? ???? ??? ???? ?????? ??  IBloodDonorRepository interface

 

?????? ??????? ?? ?????????? , ??? ?????? LINQ to Entity  ?? ??? ???????? ?? ????? ???????? , ??? ???? ?????? ?????

a blood donor

 

  1. Create object of context class
  2. Use context.entiy.Add(entity)
  3. Use context.SaveChnages()

 

 

???? ?????? ????? ??? ????? ???? ?????????? ????????? ?? ??????? , ????? ??? ??? ????? ??? Build  ??????? , ??????? ?? ????? ????? .

 

Web Project 


??? ???? ?????? ????? MVC  , ???? ????? ??????? ?? ???????? ??????? Core and Interface  , ?? ?????? ??????? ??????? ??? ?????? .

  1. infrastructure project
  2. core project
  3. Entity Framework package

 

??? ????? ?? ??????? , ?? ???? Build ????? ?? ?? ?? ?? ???? .

?? ??????  New Controller  ?? Entity Framework  .??? ?????? ??????  BloodDonorsController  .

????? ????? ?????? ???????? ??????? :

  1. BloodDonor class from the core project as the Model class
  2. BloodDonorContext class as the data context class from the Infrastructure project

Start With AngularJS

by

AngularJS is a client-side JavaScript framework developed by Google and the community for developing single-page applications that only require CSS, HTML and JavaScript on the client side.

Features

  • Directives
  • Data Binding
  • Filters
  • Modules
  • Routes
  • Controllers

AngularJS Directives

AngularJS Directives are commands that allow the developer to specify custom and reusable HTML tags that moderate the behavior of certain elements as in the following:

  • ng-app: It will load the dependencies and the module.
  • ng-bind: Automatically changes the text of an HTML element to the value of a given expression.
  • ng-model: Similar to ng-bind, but allows two-way data binding between the view and the scope.
  • ng-class: Allows class attributes to be dynamically loaded.
  • ng-controller: Specifies a JavaScript controller class that evaluates HTML expressions.
  • ng-repeat: Angular control structure act as for loop.
  • ng-click: Angular on click event

Install: Open the website angularjs.

 

Download

Now select Branch and build if you want to uncompress or Zip. And click Download. 

Getting Started

  • Start Visual Studio
  • Create a new website
  • Provide the name and location of website
  • Click "Next"

Add angular.min.js to the scripts directory.

Now let's work on the view part.

To begin let's see how to do data binding using AngularJS:

First of all add a new HTML page and provide a relevant name, now add a angularjs reference to the page.

<script src="Scripts/angular.min.js"></script>

Now add the ng-app directive on the top root of the page or in any div like this.

<html ng-app=""><div class="container" ng-app="">Let's<div class="container" ng-app="">        <h3>AngularJS Data Binding Template </h3>               Name: <input type="text" ng-model="name" placeholder="Type something" />&nbsp;&nbsp; {{ name }}        <br />        Country: <input type="text" data-ng-model="country" placeholder="Type something" />&nbsp;&nbsp; {{ country }}</div>

One more example that calculates 2 numbers:

<div>        <h3>AngularJS Data Binding Template</h3>        <input type="number" ng-model="FirstValue" value="0" placeholder="Enter First value here">        +        <input type="number" ng-model="SecondValue" placeholder="Enter Second value here">        ={{FirstValue+SecondValue}}</div><script src="Scripts/angular.min.js"></script>

Output

 

 

Source :csharpcorner,AngularJS

Total Number of Visitor ASP.NET MVC

by

 

will explain the code to get the total visitors website using Application variable.

this way depends on how many current sessions on your website.

So , First :

  • after Create an ASP.NET MVC website ,write the below code in Global.asax file.

  • In Application_Start() method declare the variable like below code.
  • Application["TotalofVisitor"] = 0;

  • Write the session_Start() method like below:

protected void Session_Start()  {        Application.Lock();        Application["TotalofVisitor"] = (int)Application["TotalofVisitor"] + 1;        Application.UnLock();  }  

Now to Your main Layout.cshtml or the View where you want to show the total count put the below code.

<p>Total Number of visitors: @ApplicationInstance.Application["TotalofVisitor"]</p>

 

Write text over Image

by

HTML - CSS 

How to write Text over Image Using HTML and CSS.

It's very simple , just you need a bit of CSS  coding .

our HTML Code will be Image and text 

<div class="imagestyle">    <img src="Your Image Path" />    <div class="textstyle">You Text</div></div>

as we see in the code first dive is the continner for both of the Image and Text .

CSS code :

.imagestyle {       position: relative;}.textstyle {   position: absolute;   top: 45%;   text-align:center;   width: 100%;   margin: 0 auto;   width: 100%;   height: auto;   color: white;    font-size: 1.6vw;}

 

 

Example :