Data Editing
- 6 minutes to read
The ASP.NET MVC CardView provides a built-in data editing functionality. This topic describes how to enable data editing operations within the CardView.
Note
To follow the steps described in this topic, you will need a data-bound CardView extension in your project.
Enabling Data Editing within the CardView
You can enable data editing operations within your CardView in the following way.
Add the controller action method that will add new records to a data source.
This controller action method obtains a newly added object as a parameter. The action method should implement the functionality to add a new record and return the CardView’s Partial View.
Controller code (“HomeController”):
// Handle CardView callbacks for adding a new record. [HttpPost, ValidateInput(false)] public ActionResult CardViewPartialAddNew(WebApplicationEFTest.Models.Customer item) { var model = db.Customers; // Performs server-side model validation based on data annotation attributes. if (ModelState.IsValid) { try { // Adds a new item to a data source via the Entity Framework. model.Add(item); db.SaveChanges(); } catch (Exception e) { // If an exception occurs, ViewBag passes an error message to the CardView's partial view and defines the error text. ViewBag.EditError = e.Message; } } else ViewBag.EditError = "Please, correct all errors."; // Return the CardView's Partial View with a data model. return PartialView("_CardViewPartial", model.ToList()); }Add the controller action method that will save the updated records to a data source.
This controller action method obtains an edited object as a parameter. The action method should implement the functionality to update records and return the CardView’s Partial View.
Controller code (“HomeController”):
// Handle CardView callbacks for updating an edited record. [HttpPost, ValidateInput(false)] public ActionResult CardViewPartialUpdate(WebApplicationEFTest.Models.Customer item) { var model = db.Customers; // Performs server-side model validation based on data annotation attributes. if (ModelState.IsValid) { try { // Updates an item within a data source via the Entity Framework. var modelItem = model.FirstOrDefault(it => it.CustomerID == item.CustomerID); if (modelItem != null) { this.UpdateModel(modelItem); db.SaveChanges(); } } catch (Exception e) { // If an exception occurs, ViewBag passes an error message to the CardView's partial view and defines the error text. ViewBag.EditError = e.Message; } } else ViewBag.EditError = "Please, correct all errors."; // Return the CardView's Partial View with a data model. return PartialView("_CardViewPartial", model.ToList()); }Add the controller action method that will delete existing records from a data source.
This controller action method obtains the key value of the record to delete. The action method should implement the functionality to delete records and return the CardView’s Partial View.
Controller code (“HomeController”):
// Handle CardView callbacks for deleting a record. [HttpPost, ValidateInput(false)] public ActionResult CardViewPartialDelete(System.String CustomerID) { var model = db.Customers; if (CustomerID != null) { try { // Removes an item from a data source via the Entity Framework. var item = model.FirstOrDefault(it => it.CustomerID == CustomerID); if (item != null) model.Remove(item); db.SaveChanges(); } catch (Exception e) { // If an exception occurs, ViewBag passes an error message to the CardView's partial view and defines the error text. ViewBag.EditError = e.Message; } } // Return the CardView's Partial View with a data model. return PartialView("_CardViewPartial", model.ToList()); }Define the callback route values within the PartialView.
Navigate to the Partial View that contains the CardView code. In the CardView settings, define the callback route values to the action methods (created above), which will handle CardView callbacks for adding, updating and deleting records.
Partial View code (“_CardViewPartial”):
@{ var CardView = Html.DevExpress().CardView(settings => { settings.Name = "CardView"; settings.CallbackRouteValues = new { Controller = "Home", Action = "CardViewPartial" }; // Callback route values to the action methods, which will handle CardView callbacks for adding, updating and deleting records. settings.SettingsEditing.AddNewCardRouteValues = new { Controller = "Home", Action = "CardViewPartialAddNew" }; settings.SettingsEditing.UpdateCardRouteValues = new { Controller = "Home", Action = "CardViewPartialUpdate" }; settings.SettingsEditing.DeleteCardRouteValues = new { Controller = "Home", Action = "CardViewPartialDelete" }; // ... }); if (ViewBag.EditError != null) { CardView.SetEditErrorText(ViewBag.EditError); } } @CardView.Bind(Model).GetHtml()Add the command layout item and the required buttons.
To allow end-users to manipulate CardView data, add the CardView’s command layout item in the MVCxCardViewFormLayoutProperties.Items collection with the MVCxCardViewLayoutItemCollection.AddCommandItem method. Add the required command buttons (New, Edit, Delete) using the corresponding properties.
Partial View code (“_CardViewPartial”):
@{ var CardView = Html.DevExpress().CardView(settings => { settings.Name = "CardView"; settings.CallbackRouteValues = new { Controller = "Home", Action = "CardViewPartial" }; settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "Home", Action = "CardViewPartialAddNew" }; settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "Home", Action = "CardViewPartialUpdate" }; settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "Home", Action = "CardViewPartialDelete" }; // Adding a command layout item with the required buttons. settings.CardLayoutProperties.Items.AddCommandItem(i => { i.ShowNewButton = true; i.ShowDeleteButton = true; i.ShowEditButton = true; }); settings.KeyFieldName = "CustomerID"; settings.Columns.Add("CompanyName"); settings.Columns.Add("ContactName"); settings.Columns.Add("ContactTitle"); settings.Columns.Add("Phone"); }); if (ViewBag.EditError != null) { CardView.SetEditErrorText(ViewBag.EditError); } } @CardView.Bind(Model).GetHtml()Note that in addition to the built-in edit form, you can add, edit and delete CardView records using the CardView’s client-side API.
Editing CardView via the Client-Side API
CardView provides a full-featured client-side API that allows you to manipulate the edit form via JS code. The table below lists the available data editing-related methods.
| Method | Description |
|---|---|
| ASPxClientCardView.AddNewCard (via MVCxClientCardView.AddNewCard) | Adds a new card. |
| ASPxClientCardView.StartEditCard (via MVCxClientCardView.StartEditCard) | Opens an edit form for editing a specified row. |
| ASPxClientCardView.StartEditCardByKey (via MVCxClientCardView.StartEditCardByKey) | Opens an edit form for editing a row with the specified key. |
| ASPxClientCardView.SetEditValue (via MVCxClientCardView.SetEditValue) | Sets the value of the specified edit cell. |
| ASPxClientCardView.IsNewCardEditing (via MVCxClientCardView.IsNewCardEditing) | Indicates whether or not a new card is being edited. |
| ASPxClientCardView.IsEditing (via MVCxClientCardView.IsEditing) | Indicates whether or not the CardView extension is in edit mode. |
| ASPxClientCardView.UpdateEdit (via MVCxClientCardView.UpdateEdit) | Saves all changes made and switches the CardView extension to browse mode. |
| ASPxClientCardView.CancelEdit (via MVCxClientCardView.CancelEdit) | Cancels all changes made and switches the CardView extension to browse mode. |
| ASPxClientCardView.DeleteCard (via MVCxClientCardView.DeleteCard) | Deletes the specified card. |
| ASPxClientCardView.DeleteCardByKey (via MVCxClientCardView.DeleteCardByKey) | Deletes a card with the specified key value. |
Example
In this example, the ASPxClientCardView.CardDblClick (via MVCxClientCardView.CardDblClick) client-side event is handled to switch the CardView to edit mode by double-clicking a data row. The event handler calls the ASPxClientCardView.StartEditCard (via MVCxClientCardView.StartEditCard) method. This method receives the visible index of the double-clicked card and invokes an edit form.
@{
var CardView = Html.DevExpress().CardView(settings => {
settings.Name = "CardView";
settings.CallbackRouteValues = new { Controller = "Home", Action = "CardViewPartial" };
settings.SettingsEditing.AddNewCardRouteValues = new { Controller = "Home", Action = "CardViewPartialAddNew" };
settings.SettingsEditing.UpdateCardRouteValues = new { Controller = "Home", Action = "CardViewPartialUpdate" };
settings.SettingsEditing.DeleteCardRouteValues = new { Controller = "Home", Action = "CardViewPartialDelete" };
settings.CardLayoutProperties.Items.AddCommandItem(i => {
i.ShowNewButton = true;
i.ShowDeleteButton = true;
i.ShowEditButton = true;
});
settings.KeyFieldName = "CustomerID";
settings.Columns.Add("CompanyName");
settings.Columns.Add("ContactName");
settings.Columns.Add("ContactTitle");
settings.Columns.Add("Phone");
// When an end-user double-clicks a CardView card, the edit form appears, allowing an end-user to edit the card.
settings.ClientSideEvents.CardDblClick = "function(s, e) { s.StartEditCard(e.visibleIndex); }";
});
if (ViewBag.EditError != null)
{
CardView.SetEditErrorText(ViewBag.EditError);
}
}
@CardView.Bind(Model).GetHtml()