Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

LowCode projesinde; LDP sayfasının Razor Layout içinde kullanılmasını sağlayan bir yapı da desteklenmektedir. Razor layout ile oluşturulan cshtml içinde istenilen kod yazılır. LDP sayfası da RenderBody kısmında gösterilir. 

1. Bir LDP projesi oluşturulur. Projeye sağ tıklanır. Add→ New Item tıklanır. "Razor Layout" seçilir.

Image AddedImage Added

3."_Layout.cshtml" sayfasında istenilen tasarım için kodlama gerçekleştirilir.

Image Added

Code Block
languagexml
title_Layout.cshtml kod örneği
linenumberstrue
collapsetrue
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <style>
    /* Style the header */
    header {
        background-color: #C4CDF6;
        padding: 18px;
        font-size: 15px;
        color: whitesmoke;
    }
    </style>
</head>
<body>
    <h2>Low Code Application</h2>
    <p>In this example, LDP pages are used in razor layout.</p>
    <header>
        <h2>LDP Page Header</h2>
    </header>
    <div>
        @RenderBody()
    </div>
</body>
</html>



4. .Yeni bir LDP sayfası oluşturulur. "DesignLayout" özelliklerinden "LayoutName" özelliği seçilir. 

Image Added


5. Proje çalıştırıldığında aşağıdaki şekilde Layout içinde ldpf sayfası görüntülenmektedir.

Image Added

Sayfa tek başına da çalıştırıldığında aşağıdaki şekilde bir görünüm elde edilir. 

http://localhost:5000/Page1Image Added