Add, Edit, Delete In jq. Grid With ASP. NET Web APIThis post explains how to implement a simple CRUD Create, Read, Update, and Delete in jq. Grid with ASP. NET MVC 4 Web API. If you are beginner to Web API, read this post to create a web API that supports CRUD operations. How To Edit Data In Gridview In Asp Net Using Command' title='How To Edit Data In Gridview In Asp Net Using Command' />Here Mudassar Ahmed Khan has explained how to perform select, insert, edit, update, delete in GridView using a single Stored Procedure in ASP. Net using C and VB. Net. Here Mudassar Ahmed Khan has explained how to Insert, Update, Edit and Delete record in GridView using SqlDataSource control in ASP. Net. In order to perform Insert. Its a simple and yet very useful article on how to edit and delete gridview rows using asp. We have written the codes in C and Vb. Net. I have a gridview that, when in edit mode, I use a dropdown to load all provinces, however, when I change the province and click update, my page crashes. Im not. We will use GET, POST, PUT and DELETE HTTP methods for Select, Insert, Update and Delete operations respectively. Model I am using same model and repository structure as in this post. Product. public int Id get set. Name get set. Category get set. Price get set. Repository Interface. IProduct. Repository. IEnumerablelt Product Get. All. Product Getint id. Product AddProduct item. Removeint id. bool UpdateProduct item. Product. Repository IProduct. Repository. private Listlt Product products new Listlt Product. Id 1. public Product. Repository. Addnew Product Name Tomato soup, Category Groceries, Price 1. M. Addnew Product Name Yo yo, Category Toys, Price 3. M. Addnew Product Name Hammer, Category Hardware, Price 1. M. Addnew Product Name Network Cards, Category Electronics, Price 6. M. Addnew Product Name Spotting Scopes, Category Optics, Price 2. M. Addnew Product Name Biometric Monitors, Category Health Care, Price 1. M. Addnew Product Name Perfume, Category Cosmetics, Price 1. M. Addnew Product Name Hair Coloring, Category Personal Care, Price 1. M. public IEnumerablelt Product Get. All. return products. Product Getint id. Findp p. Id id. Product AddProduct item. Id next. Id. Additem. Removeint id. products. Remove. Allp p. Id id. UpdateProduct item. Find. Indexp p. Id item. Id. if index 1. Remove. Atindex. Additem. Web API Controller Add an empty API controller in your project and add a field that holds an IProduct. Repository instance. Products. Controller Api. Controller. static readonly IProduct. Repository repository new Product. Repository. lets take a look at the JSON format expected by the grid. To display product list in jq. Grid, we implement the above format. See following method. Get. Productsstring sidx, string sord, int page, int rows. Get. All as IEnumerablelt Product. Index Convert. To. Int. 32page 1. Size rows. Records products. Count. var total. Pages intMath. Ceilingfloattotal. Records floatpage. Size. products products. Skippage. Index page. Size. Takepage. Size. Pages. page page. Records. rows. Id. To. String. Id. To. String. Name. product. Category. Price. To. String. To. Array. To add new product, HTTP POST request is used. Http. Response. Message Post. ProductProduct item. Additem. var response Request. Create. Responselt Product Http. Status. Code. Created, item. Url. LinkDefault. Api, new id item. Id. response. Headers. Location new Uriuri. To update existing product, HTTP PUT is used. Put. Productint id, Product item. Id id. if repository. Updateitem. throw new Http. Response. Exceptionnew Http. Response. MessageHttp. Status. Code. Not. Found. To delete a product. Http. Response. Message Delete. Productint id. repository. Removeid. return new Http. Response. MessageHttp. Status. Code. No. Content. View For simplicity, We are going to use same app to consume Web API. First we include jq. Grid library in our project. To install j. Query. Grid from Nu. Get, run the following command in the Package Manager Console Install Package j. Query. jq. Grid 2. Query UI and jq. Grid css files. Styles. RenderContentthemesbasecss, Contentcss. Contentjquery. jq. Gridui. jqgrid. css relstylesheet typetextcss. OR include ui. jqgrid. Scriptsjquery 1. Scriptsjquery ui 1. Scriptsi. 18ngrid. Scriptsjquery. jq. Grid. min. js typetextjavascript lt script. ORyou can add grid. Grid. min. js in the bundle and use it. Make sure, the sequence must be same. HTML Structure 4. You have to add HTML table for jq. Grid and a div for pager in body. Main. lt table. Thats it. To create basic jq. Grid structure. var APIURL apiproducts. Querygrid. Main. Grid. APIURL. GET. pager pagernav. Names Id, Name, Category, Price. Model name Id, index Id, width 4. Name, index Name, editable true, edittype text, width 7. Category, index Category, editable true, edittype text, width 7. Price, index Price, editable true, edittype text, width 5. CRUD With ASP. NET Web API. By default, jq. Grid uses POST HTTP method for adding and editing record. But we have to use different HTTP methods for different operations. Its the most tricky part of this post. I created a method takes HTTP Method type and return parameter for editing. Dialogaction. APIURL., close. After. Add true. After. Edit true. Show. Form function form. Id ., modal true. Submit function params. Main. var selected. Row list. get. Grid. Paramselrow. row. Data list. get. Row. Dataselected. Row. Data. Id. params. Querygrid. Main. Gridnav. Grid, pagernav. DialogPUT. DialogPOST. update. DialogDELETE. Now, In navigation bar, click on add, edit or delete icon to insert, update or delete product respectively. Hope, It helps. Share your opinion, suggestion or queries in comment box. Whats New in ASP. NET and Web Development in Visual Studio 2. Web Camps Team. The new version of Visual Studio introduces a number of enhancements focused on improving the experience and performance when working with Web technologies. Visual Studio Editors for CSS, Java. Script and HTML have been completely revamped to include many of the most in demand code aids, such as Intelli. Sense and automatic indentation. Regarding performance, bundling and minification are now integrated as built in features to easily reduce page load time. Visual Studio enables you to work with the latest website technologies. Microsoft Toolkit 2 4 Beta 1 Blockers. You can use cross browser CSS3 Snippets to make sure your site works regardless of the client platform while also taking advantage of the new HTML5 elements and features. Writing and profiling Java. Script code should be easier with this Visual Studio version. Intelli. Sense lists, integrated XML documentation and navigation features are now available for Java. Script code. You now have the Java. Script catalog at your fingertips. Additionally, you can check ECMAScript. Last but not least, this Visual Studio version implements built in bundling and minification. Your script files and style sheets will be packed and compressed so that the site performs faster. This lab walks you through the enhancements and new features previously described by applying minor changes to a sample Web application provided in the Source folder. All sample code and snippets are included in the Web Camps Training Kit, available at https go. Link. ID2. 48. 29. Objectives. In this hands on lab, you will learn how to Use the new features and improvements in the CSS editor. Use the new features and improvements in the HTML editor. Use the new features and improvements in the Java. Script editor. Configure and use bundling and minification. Prerequisites. Exercises. This hands on lab includes the following exercises Exercise 1 Whats New in the CSS Editor. Exercise 2 Whats New in the HTML Editor. Exercise 3 Whats New in the Java. Script Editor. Exercise 4 Bundling and Minification. Estimated time to complete this lab 6. Exercise 1 Whats New in the CSS Editor. Web developers should be familiar with many of the difficulties related to CSS editing. One of the biggest issues of CSS styling is cross browser compatibility. It often happens that, after applying styles to your site, you notice that it looks different if you open it in another browser or device. Therefore, you may spend a considerable time on fixing those visual issues to realize that, when you finally make it work in one browser, it is broken in the others. Visual Studio now includes features that help developers access, work and organize CSS style sheets effectively. Throughout this exercise, you will meet the new features for an effective organization and edition, as well as the CSS3 Code Snippets for cross browser compatibility. Task 1 New Editor Features. In this task, you will discover the new features of the CSS Editor. This new editor will help you increase your productivity by taking advantage of the new smart indentation, the improved code comments and the enhanced Intelli. Sense list. Start Visual Studio and open the Whats. New. ASPNET. sln solution located in the SourceWhats. New. ASPNET folder of this lab. In Solution Explorer, open the Site. Styles folder. Make sure the Text Editor tools are visible on the toolbar. To do that, select the View Toolbars menu option, and check the Text Editor options. You will notice that, since this new version, the Comment button and the Uncomment button are also enabled for the CSS editor. Enabling Editor and CSS Tools. Scroll the code and select any CSS class definition. Click the Comment button to comment the selected lines. Then, click the Uncomment button to undo the changes. Click the Collapse and Expand buttons located on the left margin of the text. Notice that you can now hide the styles you dont use to have a cleaner view. Collapsing CSS classes. Make sure that the smart indentation feature is enabled. Select the Tools Options menu option, and then select the Text Editor CSS Formatting page in the left pane of the screen. Check the Hierarchical indentation option. Enabling hierarchical indentation. Locate the main class definition. You will notice that the code aligns automatically, helping users to find the parent classes at a glance. CSS. main. padding 0px 1. Hierarchical alignment in CSSInside. Enter to display the Intelli. Sense list. Start typing top and notice how the list is filtered as you type. The list will display the elements that contain top at any part of the word In prior versions of Visual Studio, the list is filtered by the items that begin with the term. Intelli. Sense enhancements in CSSTask 2 The Color Picker. In this task, you will discover the new CSS Color Picker integrated into Visual Studio Intelli. Sense. In Site. css, locate the header class definition. Locating the cursor. Delete the colon and write it again to display the color picker. Notice that the first colors you will see are the most frequent colors of your site. If you click the white color, its HTML color code fff will replace the current color code in the stylesheet. Color picker. Press the Expand button on the color picker to display the color gradient, and then drag the gradient cursor to select a different color. After that, click the Eyedropper button and select any color from the screen. Notice that background color value changes dynamically while you move the cursor. Color picker gradient. In the Opacity slider, move the selector to the center of the bar to reduce the opacity. Notice that background color value now changes its scale to RGBA. Color picker Opacity. Note. The RGBA Red, Green, Blue, Alpha color definition in CSS3 enables you to define the color opacity value for a single item. Unlike opacity a similar CSS attribute RGBA colors are also compatible with the latest browsers. Task 3 CSS Compatible Code Snippets. In this task, you will learn how to use cross browser compatible CSS3 snippets in order to implement some features in your website. In the Site. css file, locate the header CSS class definition. Press Enter to display the Intelli. Sense list and type radius to filter the list. Select the border radius option from the list with a double click, and then press the TAB key to insert the snippet. Then, type a radius size in pixels and press Enter. For instance, type 1. The CSS3 attributes added by the snippet will render rounded borders in most HTML5 compliance browsers, including Mozilla and Web. Kit based browsers. Using a border radius snippet. Apply the same border snippets in the page style. CSS. page. width 9. Press F5 to run the solution. Notice that each page now has rounded borders. Rounded corners. Close the browser and return to Visual Studio. Open the Custom. css file located under the Styles folder and place the cursor inside div. Press enter to display the Intelli. Sense list, type box shadow and press the TAB key twice to insert the default shadow code snippet inside the class definition. Set the shadow values to 1. Then, type border radius and insert the code snippet. Type 1. 5px to set radius size and press ENTER. Rounded corners with shadow. Note. At this moment, the shadow attribute is inserted with the corresponding prefix moz, webkit, o to support Mozilla and Webkit Chrome, Safari, Konkeror browsers. Create a new class div. CSSdiv. images ul li img.