Programare cu răbdare – Edusoft

Introducere la aplicații web folosind Visual Studio .Net

  • Instalare Visual Studio IDE:
  • [New Project]
  • [.NET Core – App]
  • [ASP.NET Core Web App]
  • Project Name=ColorsApp
  • [Create]
  • <<BUILD>>
  • Create a new page:
    • Copy Page About->Color
      • copy both About files and rename
      • change model: AboutModel -> ColorModel
  • Add page in navigation:
    • Add Color in navigation Layout page
  • <<BUILD>>
  • Modify color page and test
    • color.cshtml.cs: change message
    • color.cshtml: change title, and add “Hello World”
  • <<BUILD>>
  • <<PUBLISH>>
  • _Layout: change body tag into:
    • <body style=“background-color:@Program.myColor“>
  • Add Program Variable myColor:
    • public static string myColor = “blue”;
  • <<BUILD>>
  • Add form on Color Page:
    • <div class=“col-lg-1”>
          <form asp-page-handler=“view” method=“post”>
              <button class=“btn btn-default” style=“background-color:green“>GREEN</button>
              <input type=“hidden” name=“color” value=“green” />
          </form>
      </div>
  • Add Post Processing:
    • public void OnPostView(string color)
              {
                  Message = $”Color Choosen {color}“;
                  Program.myColor = color;
              }
  • <<BUILD>>
  • Add AutoRefresh
    • <script type=“text/javascript”>
        setTimeout(function () { location.reload(true); }, 1000);
      </script>
  • Extend Colors:
    • <div class=“col-lg-1”>
          <form asp-page-handler=“view” method=“post”>
              <button class=“btn btn-default” style=“background-color:white“>WHITE</button>
              <input type=“hidden” name=“color” value=“white” />
          </form>
          <form asp-page-handler=“view” method=“post”>
              <button class=“btn btn-default” style=“background-color:green“>GREEN</button>
              <input type=“hidden” name=“color” value=“green” />
          </form>
          <form asp-page-handler=“view” method=“post”>
              <button class=“btn btn-default” style=“background-color:red“>RED</button>
              <input type=“hidden” name=“color” value=“red” />
          </form>
          <form asp-page-handler=“view” method=“post”>
              <button class=“btn btn-default” style=“background-color:blue“>BLUE</button>
              <input type=“hidden” name=“color” value=“blue” />
          </form>
          <form asp-page-handler=“view” method=“post”>
              <button class=“btn btn-default” style=“background-color:yellow“>YELLOW</button>
              <input type=“hidden” name=“color” value=“yellow” />
          </form>
      </div>
  • <<BUILD>>

Download Solution File