Asp. Net MVC4 + Oracle + EasyUI + Bootstrap Chapter 2 mvc4easyui

Asp. Net MVC4 + Oracle + EasyUI + Bootstrap Chapter 2 mvc4easyui
Asp. Net MVC4 + Oracle + EasyUI + Bootstrap Chapter 2-Use Ajax to improve website performance

Link: http://www.cnblogs.com/likeli/p/4236723.html

Article set: http://www.cnblogs.com/likeli/category/651581.html

1. Partial MVC rendering View

Request HTML tags from the server to update the webpage content. This method is called "partial rendering", which is the basic process of Ajax.

Some rendering techniques include sending asynchronous requests to the server, and the server returns data containing HTML code and inserts it into the specified page area. This method is very efficient and simple.

In Asp. Net MVC, partial rendering is treated as a common request: the request is routed to a specific controller, and the Controller executes the specific operation logic.

 Differences between common rendering and partial rendering:The usual rendering method is to use the controller. View () Help method to return ViewResult; while some rendering needs to call the Controller. Partial () Help method to return the PartialViewResult object. This is similar to ViewResult. PartialViewResult only renders the content containing the view and does not render the peripheral layout.

1) The Controller calls the Controller. View () method:

1 return View("Auction",auction);

In the end, the whole page is rendered.

2) The Controller calls the Controller. PartialVIew () method:

1 return PartialView("Auction",acution);

In addition to changing VIew () to PartialView (), partial rendering is the same as other rendering methods. The only difference is that PartialViewResult only renders the HTML Tag content, and does not contain the content of the peripheral layout and master page. Others include the Razor syntax. HTML and URL help classes are all used in the same way.
Note: because some views do not contain peripheral la S, CSS or Javascript external files must be referenced directly in some views.

This classification feature can be quickly implemented using Jquery's load () method.

1 function showAuctino(id)2 {3      $("#content").load("/Auction/PartialAuction/"+id);  4 }

If the above Code uses URLHelper, you can write it like this: '@ Url ("PartialAuction", "Auction")' + id

2. JavaScript Rendering

In fact, from some of the above views, we can see that this rendering method is a waste of resources, obviously, some content does not need to be created and transmitted on the server, js is enough to complete.

However, client rendering has two required conditions:

1) The server can generate serialized data

2) The client knows how to convert the serialized data into standard HTML code.

Here we use Ajax to request data. Asp. Net MVC provides support for native Json and uses JsonResult to operate the result object. Therefore, we can directly use the Controller. Json () method to create an includeSerializable object.

1 return Json(action,JsonRequestBehavior.AllowGet);

The response message returned by this controller contains serialized Json format data.

The second parameter in the above code is required, because by default, MVC does not allow HTTP requests for Json data in get mode. This avoids the Json hijacking risk. Therefore, you must set to allow the Get request Json.
However, the best practice is to use Attribute tag to restrict the use of the POST method to submit requests to avoid such security vulnerabilities.

1 [HttpPost]2 public ActionResult JsonAuction(int id)3 {4     ...5     return Json(acution);6 }

3. Client Template

Here, the Json data request has been returned, so we need to process it on the client. Here we use the client template, that is, the template engine for rendering. Of course, if there is no complicated content, you can splice strings to output it yourself.

Here I am using the laytpl template rendering engine (http://sentsin.com/layui/laytpl/) of xianxin ):

1 // Step 1: Compile the template. You can use a script tag to store templates, such as: 2 <script id = "demo" type = "text/x-template"> 3 

So here, the above Code completes an Ajax performance improvement function, but it can be improved here. Let's continue...
As an MVC framework, it is very important to separate the focus. Under normal circumstances, the application logic of MVC should not be bound to the view. In the example code written above, this situation exists. In the output content of the same View, we use PartialView, View, we are doing the same action-output HTML Tag content. The only difference is that the returned content is different.
Therefore, we can find a way to subtract the repeated logic code. Fortunately, MVC provides the Request. isAjaxRequest () extension method. This method can help us verify whether the current request is Ajax. So inspiration comes.
1 Public ActionResult Auction (int id) 2 {3 // obtain the data source 4... 5 if (Request. isAjaxRequest () 6 {7 return PartialView ("Auction", auction); 8} 9 else10 {11 return View ("Auction", auction); 12} 13}
Then, after the modification, the Auction controller can respond to two types of requests simultaneously: HTTP get and Ajax, while the logic code remains unchanged.
4. Process Json
Here, my requirements have changed a bit. When I request, I want to be able to request the complete HTML code and Json data. What should I do?
There is no way for MVC to do this. It does not provide a method similar to the method used to verify the request for Json. However, it's hard to find a clever programmer. In an Ajax request, add a parameter to specify the request content as Json. Example:/Auctions/Auction/1? IsJson = Json

View the source code and find that AjaxRequestExtensions is a static class and cannot be inherited.
Then, extend the self-defined method for verifying whether to request Json:
1     public static class JsonRquestExtensions2     {3         public static bool IsJsonRquest(this HttpRequestBase request)4         {5             return string.Equals(request["IsJson"], "Json");6         }7      }
1     if (Request.IsJsonRquest())2     {3         return Json(auction);4     }5     else6     {7         return View("Auctino", auction);8     }
Then we can integrate the previously written content:
1 if (Request. isJsonRquest () 2 {// Json Request 3 return Json (auction); 4} 5 else if (Request. isAjaxRquest () 6 {// Ajax request 7 return PartialView ("Auxtion", auction ); 8} 9 else10 {// request for layout by default 11 return View ("Auctino", auction); 12}
Through the above logic judgment, a controller Action completes partial view rendering and judgment of the judgment logic of the Json request returned data.
Here, we need to introduce a new thing: filter. Specifically, it should beOperation Filter.

Forgive me for being shamelessly stealing a picture (although it was my own picture). This figure references the figure of Asp. Net MVC5 framework secrets, which illustrates the execution process of this filter.
The operation filter involves the use of the ActionFilter type. As shown in, all ActionFilter types implement the IActionFilter interface. The two methods OnActionExecution and OnActionExecuted of this interface are called before and after the execution of the target Action method respectively.

Since there is a call before the Action method is executed, we can post it here.
Rewrite the OnActionExecuted method and add the Ajax, Json, and other request method judgment logic to it.

In this way, an operation filter is constructed. The role of this operation filter isReuse Unified logic rules on multiple controllers.
5. Final
Good idea. Here Ajax is used to improve website performance and interaction. Of course, the actual operation is not so simple. Here we will only get started.
For example, if the Json format is complex, a lot of work is required. In the next chapter, we will continue to discuss how to operate complex Json, how to improve the sending and receiving efficiency of Json, and cross-origin Ajax requests.
6. References
Secrets of Asp. Net MVC5 framework and Asp. Net MVC4 Web Programming