FluentUI equivalent of autogenerated CRUD

[coderdnewbie]

I have worked out the starting point of converting the auto generated CRUD feature that was added in VS2022, into the FluentUI equivalent. As part of giving back to the community I want to share the solution. The purpose of doing this is so people using the auto generated CRUD feature can still use FluentUI.

This uses Dan Roths Movie example, as there are lots of Youtube demos from Dan showing how to do auto generated CRUD (the youtube video I used is in a comment in Movie_cs.txt). However as FluentUI does not use bootstrap, the generated code does not look good.

The attached files show the original CRUD razor files and the FluentUI equivalents.

I also added this css to the FluentUI css:

dl {
    display: grid;
    grid-gap: 4px 16px;
    grid-template-columns: max-content;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0;
    grid-column-start: 2;
}

.fluent-control {
    appearance: none;
    color: inherit;
    background: transparent;
    border: 0px;
    height: calc(100% - 4px);
    margin-top: auto;
    margin-bottom: auto;
    padding: 0 calc(var(--design-unit) * 2px + 1px);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    width: 100%;
    outline: none;
    box-sizing: border-box;
    position: relative;
    color: inherit;
    border: calc(var(--stroke-width) * 1px) solid transparent;
    border-radius: calc(var(--control-corner-radius) * 1px);
    height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: padding-box linear-gradient(var(--neutral-fill-input-rest),var(--neutral-fill-input-rest)),border-box var(--neutral-stroke-input-rest);
}

The files have all got the extension .txt so that they can be attached to this issue.

Hope this helps the community.

Orig_Index_razor.txt
FluentUI_Create_razor.txt
FluentUI_Delete_razor.txt
FluentUI_Details_razor.txt
FluentUI_Edit_razor.txt
FluentUI_Index_razor.txt
Movie_cs.txt
Orig_Create_razor.txt
Orig_Delete_razor.txt
Orig_Details_razor.txt
Orig_Edit_razor.txt

[coderdnewbie]

Re-open this discussion if there are any questions