Example of a web project on VS2010
The output of VS 2010 for me, first of all, is the ability to work with .Net 4, Entity Framework 4, ASP.NET MVC 2.
All theoretical knowledge obtained, in my opinion, should be expressed in practical experience. Therefore, as soon as the opportunity presented itself, I implemented the project using VS 2010. And now I am ready to share my impressions of the new features.
The article is designed for sophisticated developers)
Not so long ago at one of the interviews I was offered a task that I decided to do with VS 2010, since under the conditions has not been agreed otherwise. First of all, this task was a good reason for me to get acquainted with the proposed opportunities.
Briefly about the conditions: Write a web application for searching and displaying data from the Customers table of the MS SQL Server NorthWind database . The search should be carried out according to the following criteria: country (country), city (city), company name (company name). Consider that the search terms may be partially specified.
')
I like most to create user-friendly solutions. In my opinion the best solution for a user on the web is ajax. That is, the work site without reloading the page. This is the interface I set as my goal to create.
I decided to choose what I like most of the tools with which I work all the time.
First, it is jQuery . Because I often have to develop rich interfaces and because I love this framework. Long before his hit in VS, and his popularization. Thanks to his flexibility, you feel like a Jedi)
Secondly, this is the Entity Framework 4. I am familiar with it not so long ago, from version 3.5. MS recommends EF for developers, and reading the EF developer blog convinced me that EF 4 would be what was expected of him. Finally, there is a built-in ability to separate adapters from date objects. I will definitely write about this later, I mean Poco object generation based on t4 templates . And the presence of Linq to Entity adds to this framework the same feeling of lightness.Light sword to me! )
Thirdly, ASP.NET MVC 2 is the foundation of our application. When it was not, I did something very similar with the help of available tools (rewrite of the paths, my client views, controllers in the form of web services, ...) and threw it all away with pleasure when the MS solution came out. I was lucky to use mvc since releases. This is another one of my love)
And finally, for ajax, I decided to use web services. The fact is that I am engaged in the development of heterogeneous applications in which the web is only part of the system, but there is also a bunch of other software. Yes, I am hinting at WCF). our web service exchange DTO, we can add data attributes to them and make service contracts out of them and our application can be used by others.Well, isn't it lovely? )
As for architecture, I adhere to generally accepted standards . I am very pleased that MS unequivocally expressed its point of view on this matter. What is enough to remember for our project:
By layers is meant
they communicate with each other using a Data Transfer Object (DTO)
I have a habit - always start with View)
I changed Index.aspx
There probably everything is clear. I will explain only the name of the classes in th. They will be used as tags to display the selection. In the project, I decided to add a few plugin's to jQuery:
Add links to the connected plugins in Site.Master and add our js file, I called it customer-list.js
I know what a closure is , so we add at the beginning and end:
at the same time adding the start of our code to download. Because we have one view, I did not do jQuery plugin
Configure Ajax to connect to web services:
We find what we will work with:
The question probably causes $ at the beginning of the variables) PHP has nothing to do with it) I call the variables that are wrapped in jQuery, so that they can be immediately seen. And it is clear what to expect from them.
Next, I configure Autocomplete . Because we will have three fields and three corresponding services, it is easier to combine the settings into one object, and then use:
Here you should pay attention to the queryParams function in the standard delivery Autocomplete does not allow you to change your parameters like this. In order for this code to work, I slightly modified this plugin, of course leaving the option of working by default:
This is how the 348 line in it looks, where the Ajax request occurs. This is done for compatibility with web services.
We connect Autocomplete:
We collect the fields that will be displayed:
Next, we must configure the DataTable to work with our data source - web services.
If I could, I would write this DataTable in a completely different way. Too many movements he requires to work with him, and heavy. This piece of code I do not like the most, very cumbersome. DataTable allows you to implement the same functionality using its internal mechanisms, but the code, I suppose, will be even less enjoyable.
Add submit processing to the form
With JS we are done. The first thing you can pay attention to in VS is to become comfortable with JS code. There are no more jumps with not clear indents, brakes with code validation. The presence of tips on jQuery functionality and the added Lint JS make VS one of the best JavaScript code editors.
Create web service Customers.asmx, uncomment [ScriptService], add using System.Web.Script.Services;
create methods:
Add the necessary attributes:
[WebMethod]
[ScriptMethod (ResponseFormat = ResponseFormat.Json)]
They are necessary for work in the Json format, it is more suitable for transmitting text data to the web for many reasons: more concisely, easier to read, faster to parse.
The first three methods are filled in the same way, I will give an example of only one of them:
We open the context, we find, we give what is expected of us. Linq to Entities will turn this into a select and it will materialize only when we call ToArray. By the way, why I use ToArray. The reason is that it will be easier to get this service to work under WCF. Because arrays can be described in contracts.
The search is harder:
What you should pay attention to here: Order, Paginate. I described them as extensions for IQueryable:
We create ADO.NET Entity Data Model (edmx), we add there a label of Customers.
"Poke" the right mouse button into the white area of the screen of our model and select Add Code Generation Item
And here we use another feature of VS 2010, loading the Online Template. open, select ADO.NET C # POCO Entity Generator, drive in a name, for example Northwind.tt, click Add )
Go to the properties of the model (F4), choose:
Now we have a set of Data Object (DO) and the context of working with them. And they do not lie together, as it was in EF3.5)
Voila! )
In spite of the large volume of the article, I grasped not so much, much concerns not only VS2010, but without it this project would have been completely different)
I started my work in VS from version 5, still a student. The studio has changed a lot since then. And I am glad that the attention to improving the quality and convenience of the programmer’s work remains at the proper level. And also the fact that MS, I hope finally, turned to the web developers. HTML5 is declared in IE9 , but that's another story).
What I deliberately missed from the review, so as not to litter trifles, you can see in the project itself .
ps: If you like the article, vote for it, it participates in the competition )
All theoretical knowledge obtained, in my opinion, should be expressed in practical experience. Therefore, as soon as the opportunity presented itself, I implemented the project using VS 2010. And now I am ready to share my impressions of the new features.
The article is designed for sophisticated developers)
Not so long ago at one of the interviews I was offered a task that I decided to do with VS 2010, since under the conditions has not been agreed otherwise. First of all, this task was a good reason for me to get acquainted with the proposed opportunities.
Briefly about the conditions: Write a web application for searching and displaying data from the Customers table of the MS SQL Server NorthWind database . The search should be carried out according to the following criteria: country (country), city (city), company name (company name). Consider that the search terms may be partially specified.
')
I like most to create user-friendly solutions. In my opinion the best solution for a user on the web is ajax. That is, the work site without reloading the page. This is the interface I set as my goal to create.
Selection of parts
I decided to choose what I like most of the tools with which I work all the time.
First, it is jQuery . Because I often have to develop rich interfaces and because I love this framework. Long before his hit in VS, and his popularization. Thanks to his flexibility, you feel like a Jedi)
Secondly, this is the Entity Framework 4. I am familiar with it not so long ago, from version 3.5. MS recommends EF for developers, and reading the EF developer blog convinced me that EF 4 would be what was expected of him. Finally, there is a built-in ability to separate adapters from date objects. I will definitely write about this later, I mean Poco object generation based on t4 templates . And the presence of Linq to Entity adds to this framework the same feeling of lightness.
Thirdly, ASP.NET MVC 2 is the foundation of our application. When it was not, I did something very similar with the help of available tools (rewrite of the paths, my client views, controllers in the form of web services, ...) and threw it all away with pleasure when the MS solution came out. I was lucky to use mvc since releases. This is another one of my love)
And finally, for ajax, I decided to use web services. The fact is that I am engaged in the development of heterogeneous applications in which the web is only part of the system, but there is also a bunch of other software. Yes, I am hinting at WCF). our web service exchange DTO, we can add data attributes to them and make service contracts out of them and our application can be used by others.
Puzzle piece
As for architecture, I adhere to generally accepted standards . I am very pleased that MS unequivocally expressed its point of view on this matter. What is enough to remember for our project:
- less cohesiveness principle
- each layer knows only about the previous one
By layers is meant
- View (xHtml + js)
- (Web) Application (asp.net vew, web services)
- Data Access Layer (Entity Framework)
- Database (SQL Server)
they communicate with each other using a Data Transfer Object (DTO)
I have a habit - always start with View)
Do view
I changed Index.aspx
< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .< form id ="customer-search-form" action ="/" enctype ="application/x-www-form-urlencoded" method ="get" > < label > Company Name < input name ="name" /></ label > < label > City < input name ="city" /></ label > < label > Country < input name ="country" /></ label > < input type ="submit" value ="search" /> </ form > < div id ="customer-search-result" > < table > < thead > < tr > < th class ="CustomerID" > id </ th > < th class ="CompanyName" > name </ th > < th class ="ContactTitle" > contract </ th > < th class ="City" > city </ th > < th class ="Country" > country </ th > < th class ="Phone" > phone </ th > < th class ="Fax" > fax </ th > </ tr > </ thead > < tbody ></ tbody > </ table > </ div > * This source code was highlighted with Source Code Highlighter .
There probably everything is clear. I will explain only the name of the classes in th. They will be used as tags to display the selection. In the project, I decided to add a few plugin's to jQuery:
- DataTable is needed to display the grid, page'nator, sort.
- Autocomplete for convenient selection of search options in the form.
- Json in order to correctly send a request to web services.
Add links to the connected plugins in Site.Master and add our js file, I called it customer-list.js
Javascript
I know what a closure is , so we add at the beginning and end:
( function (){
$( function (){
//.... ...
});
})();
* This source code was highlighted with Source Code Highlighter .at the same time adding the start of our code to download. Because we have one view, I did not do jQuery plugin
Configure Ajax to connect to web services:
$.ajaxSetup({
type: 'post' ,
contentType: 'application/json; charset=utf-8' ,
dataType: "json"
});
* This source code was highlighted with Source Code Highlighter .We find what we will work with:
var $result = $( '#customer-search-result' );
var $form = $( '#customer-search-form' );
* This source code was highlighted with Source Code Highlighter .The question probably causes $ at the beginning of the variables) PHP has nothing to do with it) I call the variables that are wrapped in jQuery, so that they can be immediately seen. And it is clear what to expect from them.
Next, I configure Autocomplete . Because we will have three fields and three corresponding services, it is easier to combine the settings into one object, and then use:
var paramsAutocomplete = {
name: '' ,
queryParams: function (info){
var res = {};
res[ this .name] = info.q;
return $.toJSON(res);
},
formatItem: function (row, i, max, term) {
return row.replace( new RegExp( "(" + term + ")" , "gi" ), '$1' );
},
parse: function (data) {
var parsed = [];
$.each(data.d, function (){
parsed.push({data: this , value: this , result: this });
});
return parsed;
}
};
* This source code was highlighted with Source Code Highlighter .Here you should pay attention to the queryParams function in the standard delivery Autocomplete does not allow you to change your parameters like this. In order for this code to work, I slightly modified this plugin, of course leaving the option of working by default:
data: options.queryParams ? options.queryParams({
q: lastWord(term),
limit: options.max
}) : $.extend({
q: lastWord(term),
limit: options.max
}, extraParams),
* This source code was highlighted with Source Code Highlighter .This is how the 348 line in it looks, where the Ajax request occurs. This is done for compatibility with web services.
We connect Autocomplete:
var $name = $form.find( '[name=name]' )
.autocomplete(
'Services/Customers.asmx/CompanyNames' ,
$.extend(paramsAutocomplete, {name: 'name' }));
var $city = $form.find( '[name=city]' )
.autocomplete(
'Services/Customers.asmx/Cities' ,
$.extend(paramsAutocomplete, {name: 'city' }));
var $country = $form.find( '[name=country]' )
.autocomplete(
'Services/Customers.asmx/Countries' ,
$.extend(paramsAutocomplete, {name: 'country' }));
* This source code was highlighted with Source Code Highlighter .We collect the fields that will be displayed:
var $table = $result.find( 'table' );
var labels = ( function (){
var res = [];
$table.find( 'thead th' ).each( function ()
{
res.push($( this ).attr( 'class' ));
});
return res;
})();
* This source code was highlighted with Source Code Highlighter .Next, we must configure the DataTable to work with our data source - web services.
var lastLength = 10;
var dataTable = $table.dataTable({
bProcessing: true ,
bServerSide: true ,
sPaginationType: 'full_numbers' ,
sAjaxSource: 'Services/Customers.asmx/Search' ,
fnServerData: function ( sSource, aoData, fnCallback ) {
// aoData
var findByLabel = function (o, name)
{
var res = null , find = false ;
$(o).each( function (){
if (!find && this .name === name)
{
find = true ;
res = this .value;
}
});
return res;
};
// dataTable'
var convert = function (list)
{
var res = [];
$(list).each( function (){
var item = [];
var row = this ;
$(labels).each( function ()
{
item.push(row[ this ]);
});
res.push(item);
});
return res;
};
var onPage = aoData ? findByLabel(aoData, 'iDisplayLength' ) : lastLength;
var start = aoData ? findByLabel(aoData, 'iDisplayStart' ) : 0;
var sortField = aoData ? findByLabel(aoData, 'iSortCol_0' ) : 0;
var sortIsAsc = aoData ? findByLabel(aoData, 'sSortDir_0' ) === 'asc' : true ;
lastLength = onPage;
//
//
$.ajax( {
url: sSource,
data: $.toJSON({
name: $name.val(),
city: $city.val(),
country: $country.val(),
order: {
Field: labels[sortField],
Dir: sortIsAsc ? 'Ascending' : 'Descending'
},
start: start,
onPage: onPage
}),
success: function (data){
fnCallback({
iTotalRecords: data.d.Count,
iTotalDisplayRecords: data.d.Count,
aaData: convert(data.d.List)
});
}
} );
}
});
* This source code was highlighted with Source Code Highlighter .If I could, I would write this DataTable in a completely different way. Too many movements he requires to work with him, and heavy. This piece of code I do not like the most, very cumbersome. DataTable allows you to implement the same functionality using its internal mechanisms, but the code, I suppose, will be even less enjoyable.
Add submit processing to the form
$form.submit( function (){
dataTable.fnDraw( true );
return false ;
});
* This source code was highlighted with Source Code Highlighter .With JS we are done. The first thing you can pay attention to in VS is to become comfortable with JS code. There are no more jumps with not clear indents, brakes with code validation. The presence of tips on jQuery functionality and the added Lint JS make VS one of the best JavaScript code editors.
Web services
Create web service Customers.asmx, uncomment [ScriptService], add using System.Web.Script.Services;
create methods:
- string [] CompanyNames (string name)
- string [] Cities (string city)
- string [] Countries (string country)
- Result <VS2010.Customers> Search (string name, string city, string country, Sort order, int start, int onPage)
Add the necessary attributes:
[WebMethod]
[ScriptMethod (ResponseFormat = ResponseFormat.Json)]
They are necessary for work in the Json format, it is more suitable for transmitting text data to the web for many reasons: more concisely, easier to read, faster to parse.
The first three methods are filled in the same way, I will give an example of only one of them:
using ( var context = new NorthwindEntities())
{
return context.Customers
.Where(c => c.CompanyName.Contains(name))
.Select(c => c.CompanyName)
.Distinct()
.OrderBy(n => n)
.ToArray();
}
* This source code was highlighted with Source Code Highlighter .We open the context, we find, we give what is expected of us. Linq to Entities will turn this into a select and it will materialize only when we call ToArray. By the way, why I use ToArray. The reason is that it will be easier to get this service to work under WCF. Because arrays can be described in contracts.
The search is harder:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Result<VS2010Lab.Customers> Search( string name, string city, string country, Sort order, int start, int onPage)
{
//
if (order == null || ! typeof (VS2010Lab.Customers).GetProperties().Any(f => f.Name == order.Field))
order = new Sort {Field = "CompanyName" , Dir = SortDirection.Ascending};
using ( var context = new NorthwindEntities())
{
//
var res = context.Customers
.Where(c => string .IsNullOrEmpty(name) || c.CompanyName.Contains(name))
.Where(c => string .IsNullOrEmpty(city) || c.City == city)
.Where(c => string .IsNullOrEmpty(country) || c.Country == country)
//
.Order(order);
// , DTO
return new Result<VS2010Lab.Customers>
{
// pagenator'
Count = res.Count(),
List = res.Paginate(
new ListFilter
{
Start = start,
Count = onPage
}
).ToArray()
};
}
}
* This source code was highlighted with Source Code Highlighter .What you should pay attention to here: Order, Paginate. I described them as extensions for IQueryable:
public static IQueryable Order( this IQueryable query, Sort sort)
{
return sort.Dir == SortDirection.Ascending ?
query.Order(sort.Field) :
query.OrderDescending(sort.Field);
}
public static IQueryable Order( this IQueryable query, string name)
{
return query.ApplyOrder(name, "OrderBy" );
}
public static IQueryable OrderDescending( this IQueryable query, string name)
{
return query.ApplyOrder(name, "OrderByDescending" );
}
public static IQueryable Paginate( this IQueryable query, IListFilter filter)
{
return filter.Count > 0 ? query.Skip(filter.Start).Take(filter.Count) : query;
}
* This source code was highlighted with Source Code Highlighter .Entity Framework 4
We create ADO.NET Entity Data Model (edmx), we add there a label of Customers.
"Poke" the right mouse button into the white area of the screen of our model and select Add Code Generation Item
And here we use another feature of VS 2010, loading the Online Template. open, select ADO.NET C # POCO Entity Generator, drive in a name, for example Northwind.tt, click Add )
Go to the properties of the model (F4), choose:
- Code Generaion Strategy None
- DDL Generation Template Northwind.tt
Now we have a set of Data Object (DO) and the context of working with them. And they do not lie together, as it was in EF3.5)
Voila! )
findings
In spite of the large volume of the article, I grasped not so much, much concerns not only VS2010, but without it this project would have been completely different)
I started my work in VS from version 5, still a student. The studio has changed a lot since then. And I am glad that the attention to improving the quality and convenience of the programmer’s work remains at the proper level. And also the fact that MS, I hope finally, turned to the web developers. HTML5 is declared in IE9 , but that's another story).
What I deliberately missed from the review, so as not to litter trifles, you can see in the project itself .
ps: If you like the article, vote for it, it participates in the competition )
Source: https://habr.com/ru/post/93331/
All Articles