Quick Inquiry

Home >> Articles >> How to Process on Selected Rows of Table Using MVC / jQuery?

To process MVC based applications build on asp.net development platform, Aegis developers are using jQuery. The development team members were working on the project and have found successful way to process multiple table rows with MVC/jQuery. You can learn the steps for processing the selected table rows by reading this article further thoroughly.

We are introducing new feature that process on selected table rows using jQuery in MVC based application. For that we have to find the particular table row and particular td where we have to update the status or anything that we have to process on that rows.

Below are the steps to process on selected table rows in MVC based application.

<script type="text/javascript" src="~/js/jquery.min.js"></script> <script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>

As per above code we can give the reference for jQuery from project location. Now, for example we have table as per below MVC Razor view. In which we have give the header from resource File and data display from model as we done in MVC as per below code.

@model IEnumerable<ProcessRecordmodel> <table class="gridtbl" style="width: 100%;"> <tr> <th style="width: 20%;"> @Resource.Product </th> <th style="width: 25%;"> @Resource.Description </th> <th style="width: 20%;"> @Resource.Service </th> <th style="width: 20%;"> @Resource.Status </th> <th style="width: 15%; text-align: center;"> @Html.CheckBox("SelectAll", new { @class = "chkSelectAll" }) </th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.ProductCod) </td> <td> @Html.DisplayFor(modelitem => item.Description) </td> <td> @Html.DisplayFor(modelitem => item.ServiceCod) </td> <td> <span class="statusMsg"></span> </td> <td style="text-align: center;"> @Html.CheckBoxFor(modelitem => item.isSelectdRow, new { @class = " SelectedRows'", data_val = item.ProductCod }) </td> </tr> } </table>

As Per above Code we got the records in grid as per below screenshot.

Now From above List we can select single or multiple rows. We can checked all the checkbox from header checkbox as per below code for javascript.

$('input.chkSelectAll').click(function() { $this = $(this); $('input.SelectedRows').each(function() { var chk = $(this); if($this.is(':checked')) chk.prop('checked', true); else chk.prop('checked', false); }); });

For example we have to find the table rows in which we have process using jQuery, we have take checkbox column in our table as per above code. We can use some JQuery functions to perform such actions for find that like parents or parentTr as per below code. Here we have to Process button on click of that button we have to do the Record Create Process which Rows are selected. Below is the code for process button and process of the button after click on that.

<div class="function_button"> <input type="submit" value="@Resource.Process" name="Process" class="uibutton" onclick="return validate();" /> </div>

Above is the code for Process Button on click on button we have to process the table Rows. As per above code we can call the validate() function on click of process Button.

<script type="text/javascript"> function validate() { var r = false; $('#ajax-loader').show(); $('input.SelectedRows').each(function() { $this = $(this); var parentTr = $(this).parents('tr'); var spanTag = parentTr.find('span.statusMsg'); if($this.is(':checked')) { r = true; $this.prop('checked', false); var dataToSend = { pSerialNumber: $this.attr('data-val') }; $.ajax({ url: "@Url.Action("YourMethod", "YourController")", data: dataToSend, type: "POST", async: false, error: function (xmlHttpRequest, errorText, thrownError) { spanTag.html(errorText).css('color','red'); }, success: function (data) { if(data) { if(data[0] == 'True') spanTag.html(data[1]).css('color','green'); else spanTag.html(data[1]).css('color','red'); } } }); } }); $('#ajax-loader').hide(); if(!r) { alert('@Resource.Selection_Error'); } return false; } } </script>

As per above code using $('input.SelectedRows').each(function() using this function we can check in loop for all data and using $(this).parents('tr') we can find the rows and from that row we can check for checkbox that is checked or not as per ($this.is(':checked') code.

If we found that row is selected then we can perform the ajax call on that rows using Url.Action method and process on that rows. In our case we update the status that we got from the Ajax call and print that status on same row.

Result of Process selected table rows:

1. Table Rows for selecting for process:

2. After Process on row and result display in Red and Green Color in status Column:

Advantages of Process selected Rows:

Aegis team of asp.net MVC (model–view–controller) development has shared this article to help and assist global developers in understanding the latest features with which they can process selected table rows with jQuery in MVC based app. If you have any doubt, contact Aegis developers and get the answers for your queries.

For further information, mail us at info@aegissofttech.com

Copyright © 2017 - aegisisc, All rights reserved