Once again about asp.net and jQuery

In my article ListView from different sides, I described some techniques that help in working with ListView in asp.net projects. In this article I would like to describe another solution to the task associated with the ListView . The article also plays an important role jQuery .

Description of the problem

The project database has a table with an updateDate field that contains the date (and time) of the last record update. For the convenience of the user and for the purpose of centralization, there is a trigger that automatically updates the value of this field every time the record is updated. Accordingly, on the data editing page for the user there is no possibility to set the updateDate value. This eliminates the possibility of erroneous user input and simplifies his work.

Everything works well. After a certain period of work with the resource, the user wished to introduce into the project the possibility of “installing a check mark” to update the recording date alone without changing other data, that is, the updateDate field.

Formulation of the problem

Display on the edit page a checkbox element for each entry in the table. When saving the data, take into account that the selected items must update updateDate. Solve the problem without removing the trigger.
')

Decision

In fact, it took me about a working day to find a solution to a problem. Through reflections and some samples, I refused the solution on the server side. There was an option to solve the problem on the client side. In the solution, I used jQuery.

For the solution, I used such a feature of asp.net as data binding (databinding). In the markup of the page, except for the required checkbox, I added the TextBox element, which I attached to the updateDate field.

So, in the end I got the following description of the column in ListView:

< td >
< input type ="checkbox" class ="updateDate" />
< asp:Label runat ="server" Text ='<%# ((DateTime)Eval("updateDate")).ToShortDateString() %>' ></ asp:Label >
< asp:TextBox ID ="txtUpdateDate" CssClass ="hide" runat ="server" Text ='<%# Bind("updateDate") %>' />
</ td >
* This source code was highlighted with Source Code Highlighter .

< td >
< input type ="checkbox" class ="updateDate" />
< asp:Label runat ="server" Text ='<%# ((DateTime)Eval("updateDate")).ToShortDateString() %>' ></ asp:Label >
< asp:TextBox ID ="txtUpdateDate" CssClass ="hide" runat ="server" Text ='<%# Bind("updateDate") %>' />
</ td >
* This source code was highlighted with Source Code Highlighter .

For a user, the date information is displayed via the Label element, and the entered TextBox element is hidden through the css- hide class, which contains only one property: visibility: hidden; . Here it should be noted that the installation for TextBox fields ReadOnly and Enabled did not lead to the desired result. That is why this element had to be hidden through CSS.

For multiple saving changes to the ListView in this project, I use the technique described by me under the title “Editing and saving several lines at once” in the ListView article from different sides . Saving data occurs when the user clicks on the “Save All” page, represented by the LinkButton element. To handle clicks on the client side, I used the standard OnClientClick property.

< asp:LinkButton ID ="SaveList" runat ="server" OnClientClick ="return UpdateDates();"
CommandName ="Update" OnCommand ="OnSaveAll_Command" > </ asp:LinkButton >

* This source code was highlighted with Source Code Highlighter .

< asp:LinkButton ID ="SaveList" runat ="server" OnClientClick ="return UpdateDates();"
CommandName ="Update" OnCommand ="OnSaveAll_Command" > </ asp:LinkButton >

* This source code was highlighted with Source Code Highlighter .

The essence of the solution is to implicitly change the data obtained by the binding on the client side. This will force ListView to send such data for an update, and then the trigger will do its work. ListView's unchanged linked data will not update, even if you force the UpdateItem method on the ListView. Updating also will not occur if the associated control contains the set properties ReadOnly = “True” or Enabled = “False” .

Lastly, I will give the main code, which deals with the problem. Here all the laurels go to jQuery:

function UpdateDates () {
$ ( "Input: checkbox.updateDate" ) .each ( function () {
if ( this . checked == true ) {
var today = new Date ();
$ ( this ) .parent (). find ( "input: text [@ id $ = txtUpdateDate]" ) [0] .value = today.getDate () + "." + today.getMonth () + "." + today.getFullYear ();
}
});
return true ;
}

* This source code was highlighted with Source Code Highlighter .

After clicking “Save all”, jQuery bypasses all checkboxes with the updateDate class. Checks if checkbox is selected. In the positive case, the search for a hidden adjacent element occurs next to it and the resulting value of the current date is assigned to it.

Conclusion

The article provides a solution to one of the tasks in real life related to ListView. As practice has shown, the jQuery library was a great fit for solving the problem. The decision, however, does not pretend to perfection and I will be happy to hear alternative ways.