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

Process on selected Table Rows in Asp.Net MVC application

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 a new feature that processes selected table rows using jQuery in an 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 those rows. For further assistance with integrating such features, our Java development company can provide the necessary expertise and support to ensure seamless functionality within your application.

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

• Download the Latest release jQuery-min.js.
• To give the JQuery reference of javascript we need to write below code in view, and then use it where we need to see it as per below code.

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

As per above cde 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 (xmlHttxmpquest, 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:

• 1. Using JQuery we can find any rows of table and perform any action on that rows that we have to perform.
• 2. It is using jQuery and Ajax call so performance is faster in application.

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.