Insert, Update and Delete MVC Web. Grid Data using JQuery. Introduction. If you are an ASP . NET developer, you are familiar with editing (Insert, Update and Delete) Grid. View. You will be surprised, when you find that Web. Grid of MVC does not have Edit Template and does not allow user to edit row data of Web. ![]() Single row selection using checkbox in radgrid. But here I need to select only a single row in the grid.While checking a checkbox,I need to. This example shows how the client-side row selection feature is built-in in Telerik ASP.NET AJAX Grid. Single row can be selected by clicking the row. Editing Data using ASP.NET GridView. ASP.NET Grid - Built in AJAX, ASP.NET AJAX compatible. Detail Grid inside Row Template . Expand a single detail grid. Updating single row in gridview using asp.net ajax. Updating single row in. Bulk Edit Update Multiple Rows in ASP.Net GridView. Telerik MVC grid without refreshing the grid. Add Edit Update Delete and Paging the AJAX way.ASP.NET AJAX Control Toolkit. For the single page master. Detail Using a Selectable Master GridView with a Details. Performing Batch Updates. ![]() ![]() Grid. Using JQuery, you can allow user to edit data in Web. Grid. In this topic, I will walk you through: How to populate data in Web. Grid. Using JQuery, edit data in Web. Grid. Please note that I am concentrating on the functionality instead of making it nice. In this demonstration, I am going to use Student object for student information. Create MVC 4 Web Application. Using Visual Studio 2. MVC 4 Web Application. Select the template either Internet or Intranet application. I have selected the Internet Application Template. Make sure Razor is selected in the View Engine. By default, Visual Studio creates several files for Controllers, Models and Views. In this tutorial, you are going to modify the landing page of the application. In other words, you are going to use the Index. Student data. 2. 0 Add JQuery Scripts to Project. Open the . Then select Class option and name it Student. Now, the Models folder should have the Student. Open Student. cs and add fields as shown below. You may add validation and others attribute. To concentrate only on the editing, keep it simple. Drill. Down. Demo. Models. . To accomplish this, you are going to use the CSS file. Right click on the Content folder and select New Item from the Add context menu. Select Style Sheet from the Add New Item dialog box. Name it Student and click on Add button. Open the Student. CSS statements in the Student. Row. Style. . Add the following lines inside the HEAD tag of . In real life application, you may need to display the data in different view. In that case, you will need to add/modify the corresponding controller. For simplicity, use static data, instead of using backend data storage. Add a static list of Student object in the Home. Controller. publicstatic List< Models. Student> Students = new List< Models. Student> (). . The line of code is as follows: public Action. Result Index(). . You need to specify the Data Model for this view. At the first line of the Index. IEnumerable< Manipulate. Web. Grid. Demo. Models. Student> This updates the Model property of the associated System. Web. Mvc. View. Data. Dictionary with the list of student objects. The Model property will be used in the Web. Grid constructor as a parameter. If you like, you may add the View. Bag. Title as follows: @. Define a < div> with ID and refer the div. As there are only 3 records of Student in the data and if you would like to see the behavior of the Web. Grid in different page, define the rows. Per. Page with value 2.< divid=. In the first column, define different Actions (Edit, Save, Cancel and Delete). There are two different modes for view . Hence, you can see Edit and Delete actions have . Those classes will be used in JQuery to determine the active mode. To capture user. Please, note that those classes do not need to be in the CSS file. Those are only used in the JQuery to find controls and capture the event. IEnumerable< Web. Grid. Column> cols =. List< Web. Grid. Column> . Label controls will be visible for display mode and Input controls will be visible for edit mode. Those controls need to be defined under the FORMAT attributes of Web. Grid. Column definition. Label control does not have class attributes, hence it is wrapped with < span> tag. Next call the Get. Html method of Web. Grid, so that Razor Engine can generate corresponding HTML for it. After the end of < div> tag, add the following statement: @grid. Get. Html(columns: cols, row. Style. Here is a sample image of it. In the next section, you are going to add JQuery fuctionalities to handle active mode of either display or edit. Full Code Segment@model IEnumerable< Manipulate. Web. Grid. Demo. Models. Student>. @. After adding all of the HTML mentioned above, add a < script> section as follows: < script type=. In the following sections, you will find JQuery and Home. Controller code for all of the three actions. Insert Record. Web. Grid does not have method to access footer section during the defining of it. As a result, you need to add a footer section into the HTML code generated by Razor for Web. Grid using JQuery. Footer section will be used to insert records. Section for insert, should be above of the page index. Define a variable (tfoot. Add) with the row and all columns. First column contains all three action commands. Rest of the three columns define the fields of Student object. Fields of Student objects do not need to be visible at display mode. Hence, you can use < span> tags without any information and have class attribute . After that, based on user selection, it should switch between display and edit mode for each row. To accomplish this, add the following JQuery which will find all controls with . In the edit mode, if user clicks on Cancel button, then that row should go back to display mode. Capture the click event of Insert, Edit and Cancel button by using the . In the click event, find the parent row of Insert, Edit or Cancel. Toggle function of JQuery will switch the display mode. First, define the click method of the Save button (inssave- btn). Inside this function, grab the data for ID, Name and Email. Using the data, you need to create a Student object, which will be used to send data to the Insert. Data method (described in a later section) of the Home. Controller. Insert. Data method of Home. Controller will be called using Ajax function of JQuery. Insert. Data method will return 1 for success and 0 for error. Those values are going to capture in the is. Success variable. When the process of insert is completed, Ajax function will call the done event. If Insert. Data method returns success, then it will show success message, go back to display mode and refresh the page. Otherwise, it will show the error message and stay in edit mode. Please, check the data. This is a simple method, where it checks for duplicate id. If the id is duplicate, it will return error (0) value otherwise the student object will be added to the Students list. As Ajax function is calling using POST, you need to setup method attribute of the Insert. Data method to Http. Post. After editing data, when user clicks on the Save button, you need to call the Save. Data method of Home. Controller using Ajax function. First, define the click method of the Save button (save- btn). Inside this function, grab the data for ID, Name and Email. Using the data, create a Student object, which will be used to send data to the Save. Data Method (described in a later section) for the Home. Controller. Now call Save. Data method of Home. Controller using the Ajax function. Save. Data method will return 1 for success and 0 for error. Those values are going to capture in the is. Success variable. When the process of update is completed, Ajax function will call the done event. If Save. Data method returns success, then we need to go back to display mode and refresh the page. Otherwise, we will show the error message. Please, check the data. This is a simple method, where it finds the existing Student object using id. If the Student object does not exist, it will return error otherwise the student object will be updated. As Ajax function is calling using POST, you need to setup method attribute of the Save. Data method to Http. Post. This will call the Delete (delete- btn) method. Inside this function, grab the data for ID, Name and Email. Using the data, create a Student object, which will be used to send data to the Delete. Data method (described in a later section) for the Home. Controller. Call Delete. Data method of Home. Controller using the Ajax function. Delete. Data method will return 1 for success and 0 for error. Those values are going to capture in the is. Success variable. When the process of delete is completed, Ajax function will call the done event. If Delete. Data method returns success, then we need to refresh the page. Otherwise, we will show the error message. Please, check the data. This is a simple method, where it finds the existing Student object using id. If the Student object does not exist, it will return error otherwise the student object will be deleted. As Ajax function is calling using POST, you need to setup method attribute of the Delete. Data method to Http. Post. The same logic you may use to edit data in table instead of Web. Grid. However, if you use table, then you need to maintain the page index from your code. Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
November 2017
Categories |