To the PresenterDetails table, I added into the table tag a dataview:oncommand attribute with a value of onSessionCommand, which is the name of the function that will handle any command events that occur in the PresenterDetails Dataview:
I added an extra column and a footer to the table displaying the session names, and in the footer I put a input element of type text, and a button:
As we have seen before, the sys:command attribute, when added to a button within a Dataview, causes a click of that button to fire the oncommand event of the Dataview. The value of the sys:command attribute is passed to the handling function as the command name:
The handler, onSessionCommand, first checks the command name equals Add, which is the only possible value at this stage. The sender argument is a reference to the PresenterDetails Dataview, and its data is retrieved with its get_data method. The ASP.NET AJAX $get method is then used to find the textbox containing the name of the session to be added. The code to add a session is longer than one might expect, because as well as creating new objects, one has to tell the datacontext how the objects are related. The createEntity method of the datacontext creates an object with metadata corresponding to the value specified in its parameter. In this case, a Links entity and a Sessions entity are created. With the application in its current state, only the Name property of the session can be set, although it can also be given a description property. The properties of the Links entity are a primary key and two foreign keys. The primary key and at least one of the foreign keys will only be determined once the data has been submitted to the database. Therefore, instead of setting keys directly, the objects, once they have been added to the datacontext with the insertEntity method, are associated with the setLink and addLink methods. The parameters accepted by both methods are similar: a parent object, a property name, and a child object. The addLink method, however, is used for one to many relationships, whereas the setLink method is used for one to one relationships. One Presenter (represented in the code by data) can have many Links, but one Link can have only one Session. The addLink method is therefore used to associate a Presenter with a Link, and the setLink method is used to associate a Link with a Session.
Sessions can now be added to existing Presenters. To allow Sessions to be added at the same time as a new Presenter is created, a further change is necessary. Previously, a new Presenter entity was only added to the datacontext when the OK button of the details popup was clicked. For the current scenario, however, it is easier to create the new entity when the popup is displayed, and then delete it if the Cancel button in the popup is clicked:
Once again, the datacontext’s createEntity method is used to create a Presenters entity, and the insertEntity method is used to add the entity to the datacontext. It proved necessary to set the Links property of the newly created Presenters entity to an empty array, as otherwise submission to the database caused an error when no sessions had been added.
To allow Sessions to be deleted, I added a Delete button to each row in the table displaying the list of sessions:
This time, I set the command name to Delete, and the command argument to the Link entity to which the row is bound. I again used the $dataItem parameter, which is described in an earlier post. The click event of the Delete button is handled by the same onSessionCommand function we have just examined:
As expected, the Link entity and the Session entity have to be deleted, and this is done with the datacontext’s removeEntity method. The connection between the Link entity and the Presenter entity with which it is associated must also be severed. This is accomplished with the datacontext’s removeLink method. In essence, this performs the opposite function to the addLink method that we saw above.
The Details view is now as follows: