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

 

 

 

jQuery Ajax ASP.NET MVC GET/Post Part 2 عربي

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   حتى يسهل قراءة البيلنات منه في كود الجافا سكريبت .

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

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

 

وشكرا ...

jQuery Ajax ASP.NET MVC GET/Post Part 1 عربي

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  , ليكون الامر ممتع اكثر وسهل بنفس الوقت .

 

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