how to integrate with asp mvc core/blazor and show brackets for leagues and sports (custom teams, golf, pickelball, soccer)

[papyr]

integrate with asp mvc core/blazor and show Brackets for leagues and sports (custom teams, golf, pickelball, soccer)

---

The nodes in C#

public class Node
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int? ParentId { get; set; }
    public string Description { get; set; }
    public bool IsExpanded { get; set; }
}

public class Connection
{
    public int FromId { get; set; }
    public int ToId { get; set; }
    public string Label { get; set; }
}

public class OrgChartModel
{
    public List<Node> Nodes { get; set; }
    public List<Connection> Connections { get; set; }
}

---

Controller

[ApiController]
[Route("api/[controller]")]
public class OrgChartController : ControllerBase
{
    private readonly OrgChartContext _context;

    public OrgChartController(OrgChartContext context)
    {
        _context = context;
    }

    [HttpGet]
    public async Task<ActionResult<OrgChartModel>> GetOrgChart()
    {
        var nodes = await _context.Nodes.ToListAsync();
        var connections = await _context.Connections.ToListAsync();

        var model = new OrgChartModel
        {
            Nodes = nodes,
            Connections = connections
        };

        return model;
    }

    [HttpPost]
    public async Task<ActionResult<Node>> AddNode(Node node)
    {
        _context.Nodes.Add(node);
        await _context.SaveChangesAsync();
        return node;
    }

    [HttpDelete("{id}")]
    public async Task<ActionResult> DeleteNode(int id)
    {
        var node = await _context.Nodes.FindAsync(id);
        if (node == null)
        {
            return NotFound();
        }

        _context.Nodes.Remove(node);
        await _context.SaveChangesAsync();
        return NoContent();
    }
}

---

cshar p Razor View, how do I do all the options you had and do bracket layout?

@model OrgChartSportBracketModel

<div id="org-chart-container">
    <svg id="org-chart-svg" width="800" height="600"></svg>
</div>

<script>
    var nodes = @Json.Serialize(Model.Nodes);
    var connections = @Json.Serialize(Model.Connections);

    var margin = { top: 20, right: 20, bottom: 30, left: 40 };
    var width = 800 - margin.left - margin.right;
    var height = 600 - margin.top - margin.bottom;

    var svg = d3.select("#org-chart-svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var tree = d3.tree()
        .separation((a, b) => (a.parent === b.parent ? 1 : 2) / a.depth);

    var root = d3.hierarchy(nodes[0], function(d) { return d.children; });

    tree(root);

    var node = svg.selectAll(".node")
        .data(root.descendants())
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("circle")
        .attr("r", 4.5)
        .style("fill", function(d) { return d.children ? "lightsteelblue" : "#fff"; });

    node.append("text")
        .attr("dy", ".31em")
        .attr("x", function(d) { return d.children ? -6 : 6; })
        .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
        .text(function(d) { return d.data.name; });

    var link = svg.selectAll(".link")
        .data(root.links())
        .enter()
        .append("path")
        .attr("class", "link")
        .attr("d", function(d) { return "M" + d.source.x + "," + d.source.y + "L" + d.target.x + "," + d.target.y; });

    // Add connections
    connections.forEach(function(connection) {
        var fromNode = nodes.find(function(node) { return node.id === connection.fromId; });
        var toNode = nodes.find(function(node) { return node.id === connection.toId; });

        if (fromNode && toNode) {
            var fromX = fromNode.x;
            var fromY = fromNode.y;
            var toX = toNode.x;
            var toY = toNode.y;

            var path = svg.append("path")
                .attr("class", "connection")
                .attr("d", function() { return "M" + fromX + "," + fromY + "L" + toX + "," + toY; });

            path.append("text")
                .attr("dy", ".31em")
                .attr("x", function() { return (fromX + toX) / 2; })
                .attr("y", function() { return (fromY + toY) / 2; })
                .text(connection.label);
        }
    });
</script>

[bumbeishvili]

Hi, I have no idea how Blazor/Asp mvc core works, but I've seen some examples of org charts working within that framework, so I am sure it's possible.

it should work within any environment, as long as DOM is available