#4 Create data, update and delete using JS APIs
Requirements
Use the sxc data API to create/edit/delete data
This page uses the sxc data API to create data for the backend.
In this tutorial you'll learn how to:
- Create data using the
.create(...)
method - Update data using the
.update(...)
method - Delete data using the
.delete(...)
method
Look at the content below to see the effect.
Name | Birth date | Poems | Actions |
---|---|---|---|
SuperPoet 426 | 1/1/2021 | 15 | |
SuperPoet 602 | 1/1/2021 | 23 | |
SuperPoet 31 | 1/1/2021 | 97 | |
SuperPoet 314 | 1/1/2021 | 150 |
#4 Create data, update and delete using JS APIs
Source Code of this file
Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code
@using ToSic.Razor.Blade; @inherits Custom.Hybrid.Razor14 @{ // Tell the page that we need the 2sxc Js APIs Kit.Page.Activate("2sxc.JsCore"); var randomName = "SuperPoet " + new Random().Next(1000); } <!-- unimportant stuff, hidden --> <div @Sys.PageParts.InfoWrapper()> @Html.Partial("../shared/DefaultInfoSection.cshtml") <div @Sys.PageParts.InfoIntro()> <h2>Use the sxc data API to create/edit/delete data</h2> <p>This page uses the sxc data API to create data for the backend.</p> <br> In this tutorial you'll learn how to: <ul> <li>Create data using the <code>.create(...)</code> method</li> <li>Update data using the <code>.update(...)</code> method</li> <li>Delete data using the <code>.delete(...)</code> method</li> </ul> <br> Look at the content below to see the effect. </div> </div> <table id="example-content" class="table"> Name Birth date Poems Actions <tbody> @foreach (var poet in AsList(App.Data["PoetsToEdit"])) { <tr> <td>@poet.Name</td> <td>@poet.BirthDate.ToShortDateString()</td> <td data-poet="@poet.EntityId">@poet.Poems</td> <td> <button type="button" class="btn btn-primary" onclick="window.editPoets.updateCount(@poet.EntityId)">Update Poems</button> <button type="button" class="btn btn-primary" onclick="window.editPoets.delete(@poet.EntityId)">Delete Poet</button> </td> </tr> } </tbody> </table> <div class="row"> <div class="col-md-3"> <input id="name" class="form-control" placeholder="Name" value="@randomName"> </div> <div class="col-md-3"> <input type="date" id="birthdate" class="form-control" min="1938-01-01" max="1949-01-01" placeholder="Birthdate" value="2021-01-01"> </div> <div class="col-md-3"> <input type="number" id="poems" min="0" class="form-control" placeholder="Poems" value="@(new Random().Next(999))"> </div> <button type="button" class="btn btn-primary" onclick="window.editPoets.add()" >Add poet</button> </div> @* This tutorial uses turnOn, see turnOn tutorials *@ @{ var data = new { moduleId = CmsContext.Module.Id }; } @Kit.Page.TurnOn("window.editPoets.init()", data: data) <script src="@CmsContext.View.Path/300-edit.js"></script> @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })