Drag drop builder for ASP mvc core 8 / 9 LTS

[papyr]

Hello I have managed with some help, but need to persist as structured content so its easy to recreate and version the pages like wordpress in our .net core CMS.

I think this will also help others, but its just an initial cut, I wanted to get the richer structured aspects of the content like imaged and formatting capture/rendered/options etc stored, can you you please help. I will make it a nuget package

---

using Microsoft.AspNetCore.Mvc;
using System.Text.Json;

namespace MyAspCMS.Controllers
{
    public class VvvebController : Controller
    {
        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public IActionResult SaveContent(string content)
        {
            // Save the content to the database or file system
            // For example:
            var vvvebContent = new VvvebContent
            {
                Content = content
            };
            _dbContext.VvvebContents.Add(vvvebContent);
            _dbContext.SaveChanges();

            return RedirectToAction("Index");
        }
    }
}


namespace MyMvcApp.Models
{
    public class VvvebContent
    {
        [Key]
        public int Id { get; set; }
        public string Content { get; set; }
    }
}

---

//Index.cshtml

@{
    ViewData["Title"] = "ASP with Vvveb Editor";
}

<div id="vvveb-editor"></div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vvveb.min.js"></script>
<script>
    var vvvebEditor = new VvvebEditor(document.getElementById('vvveb-editor'), {
        // Options for the editor
    });

    // Save the content when the user clicks the save button
    document.getElementById('save-button').addEventListener('click', function() {
        var content = vvvebEditor.getJson();
        fetch('/Vvveb/SaveContent', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(content)
        })
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Error:', error));
    });
</script>



///# Startup.cs
namespace MyCMSVvvebJs
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
            services.AddDbContext<MyDbContext>(options =>
                options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseRouting();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }
}

[givanz]

Thank you for the C# example.

I wanted to get the richer structured aspects of the content like imaged and formatting capture/rendered/options etc stored

The editor only exports the page html it does not export other states like changed component properties or assets.

If you want to save page assets like images, css, javascript files you can check the jszip plugin code https://github.com/givanz/VvvebJs/blob/master/libs/builder/plugin-jszip.js#L29-L43 that gets all page assets and generates a zip file with the page and all assets.

[papyr]

ok thanks, I need some help and I can map it on my own, and share if you want.

I need to store newly created forms in the Vvvebjs as tables, and table data.

how do I get the table/div or dom structure as a json object for the user created forms, so that I can save the fields of the form in a table.

My plan is to auto script (new table, from form Json structure, date, text, input etc), the save user data from the forms.

[givanz]

You can use Vvveb.Builder.frameBody to access page body and iterate over form elements and serialize fields to json.

Vvveb.Builder.frameBody.querySelectorAll("form").forEach(f => {
   console.log( JSON.stringify(Object.fromEntries(new FormData(f))) ); 
});