Tools used in each scenario are:
- Visual Studio 2015
- jQuery JavaScript Library v2.1.3
- jQuery UI - v1.11.1
- Entity Framework 6.0
- ASP.NET MVC 5
- Bootstrap
I) Operation Process
In this section we will good explain the mechanism adopted to implement a such process.
Before we start speak about the process, i want to do a reminder about MVC pattern and Ajax concept.
a) Reminder :
1. MVC :
(Model View Controller) is a pattern model most useful for developping web application.
The pattern model is tried and porven solution to separate information display, user actions and data access.where it improves the testability and code maintenance.
We can well understand the principle of this pattern through the next diagram.
MVC is composed by three layers :
- Model : dispose of the source data.
- View : represent a user interface.
- Controller : handles a request from a view, updates the model and view state.
2. AJAX :
AJAX (Asynchronous JavaScript And XML) is concept of programming that combine different technologies such as the javaScript and XML.
The main idea of AJAX, is to ensure the communication between server and web page without causing a page reload.
To better understand the AJAX concept, we will show you a diagram that present the difference between classic web application and AJAX web application.
Ajax is used to :
- reduce latency,
- avoid reloading web page,
- increase the reactivity of web page.
b) Dynamic load diagram
In this section we will detail the different interaction and tasks acheived between Client and Server to give a dynamic rendering.
the dynamic load can goes through the following basic steps :
1) constuction of data (html + css) whatever from client or server side,
2) insert the data into html tag with the help of javaScript.
Let see an example of code :
to use this example you must import the Jquery library
1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
JavaScript Code
1 <script>
2 $(document).ready(function(){
3 //detect the clic event on the button
4 $("button").click(function(){
5 //intialize html data as string
6 var htmlData = "NASRI";
7 //insert data into span block
8 $("#span1").html(htmlData );
9 });
10 });
11 </script>
Html code to insert into Body tag
1 My name is </br><button>clic to display name</button>
the result will be :
the next diagram, explain better the mechanism of dynamic display, where the HTML data are composed in server side and returned to client for only display through javaScript instructions.
II) Example of Implementation
In this level, we will explain how implement the dynamic load through an ASP.NET MVC example.
a) About :
The adopted example, allow a user when he clic on a button, to load dynamic data (HTML + CSS) from a local DataBase.
The HTML block is composed by : 'static image', 'Product Label' and 'Product description' loaded from the Product Table.
In this example we used a local DataBase (.mdf)
b) Steps :
1) Creation of Local DataBase (.mdf)
We will show the differents steps to create the local dataBase (.mdf) through printed screen :
2) Using Entity Framework
After creation of dataBase , we will use an ORM (object-relational mapping (Entity = Table) ) framework for ADO.NET named Entity Framework (EF) .
EF gives a possibility to query a database through instance of entities without write any sql statement.
In our example we will use EF Database First approch (we start from an existing DataBase to have entities (object)) :
3) Implementation
In this section, we start the coding part, at the begining we comment the javascript code, then html and c# Asp.net MVC code.
- JavaScript Code :
1 function initContent() {
2 //Clear Screen by putting the following message
3 $("#idDivProducts").html("Empty Content, clic on Scan Button to load products");
4 }
5 $(document).ready(function () {
6 initContent();
7 });
8 //JQuery code that detect the click on Scan Button
9 $(document).on("click", "#idBtResetProducts", function () {
10 initContent();
11 });
12 //JQuery code that detect the click on Scan Button
13 $(document).on("click", "#idBtScanProducts", function () {
14 //url of service
15 var url = "/Home/GetProducts";
16 $.ajax({
17 type: "POST",//choose your HTTP request type ('POST' or 'GET')
18 url: url,
19 success: function (data) {
20 //display data (HTML+CSS) into html block
21 $("#idDivProducts").html(data);
22 },
23 error: function (xhr, ajaxOptions, thrownError) {
24 //display error message into html block
25 $("#idDivProducts").html("Echec Loading");
26 }
27 });
28 });
- HTML Code :
1 <div class="col-lg-12">
2 <button class="btn btn-default" id="idBtScanProducts">Scan Products</button>
3 <button class="btn btn-default" id="idBtResetProducts">Rest Products</button>
4 </div>
5 <hr>
6 <div id="idDivProducts" class="row">
7 <!--Our container : will get the output result (html data)-->
8 </div>
- C# Asp.net MVC Code :
1 public string GetProducts()
2 {
3 StringBuilder dataHTML = new StringBuilder();
4 //Entity framework
5 //Create Data Context of Data Base
6 WebApplicationDynamicDataLoad.Models.Database1Entities1 dataBaseEntities =
7 new Models.Database1Entities1();
8 //Get All Product
9 var listProduct = dataBaseEntities.Product.ToList();
10 //Fetch all product
11 foreach (var product in listProduct)
12 { //For each product create a html block
13 dataHTML.Append("<div class='col-lg-3'>");
14 dataHTML.Append("<div class='panel panel-default'>");
15 dataHTML.Append(string.Format("<div class='panel-heading'>{0}</div>", product.productLabel));
16 dataHTML.Append("<div class='panel-body'><center><img src='/Content/images/image.jpg'/></center>");
17 dataHTML.Append(string.Format("<p>{0}</p></div></div></div>", product.productDescription));
18 }
19 return dataHTML.ToString();
20 }
3) Scenario
- Initial State :
- After clicking on Scan button :
No comments:
Post a Comment