Skip to content
SMS/
/
/
Creating the UI
Last updated

Creating an appointment reminder app with .NET SDK

Creating the UI

In the .NET MVC framework, web pages, known as Views, live in the Views folder.

Modifying the _ViewStart.cshtml file

We'll provide all the styling files required for this app below. Because we provide that content, we'll need to prevent the prevent it from being overridden by the default layout. To do so:

  1. Navigate to the Views folder.

  2. Open the _ViewStart.cshtml file.

  3. Replace the contents of that file with the following code:

    @{
Layout = null;
}

Creating the Appointment directory

In order to manage the UI, we'll need to modify the directory:

  1. Navigate to the Views folder.
  2. Create a new folder called Appointment.
  3. In the Appointment folder you created in the last step, create the following files:
    • Submit.cshtml
    • Success.cshtml

Creating the submission page

First, we'll create the submisstion page. Open Submit.cshtml and add the following code:

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML//EN">
<html>

<head>
  <meta charset="utf-8" />
  <title>Sinch Appointment Confirmation</title>
  <link href="/css/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <!--If form submission results in error, flash error message -->
  <div flashes></div>
  <div>
    <h1>Sinch Hospital Appointment Scheduler</h1>
  </div>
  <div class="container">
    <form action="submit" method="POST" onsubmit="">
      <div class="row">
        <div class="col-25">
          <label for="name">Patient: </label>
        </div>
        <div class="col-75">
          <input type="text" name="patient" placeholder="Patient name" required />
        </div>
      </div>
      <div class="row">
        <div class="col-25">
          <label for="treatment">Doctor: </label>
        </div>
        <div class="col-75">
          <input type="text" name="doctor" placeholder="Name of doctor" required />
        </div>
      </div>
      <div class="row">
        <div class="col-25">
          <label for="appointment-date">Appointment date: </label>
        </div>
        <div class="col-75">
          <input type="date" id="appointment_date" name="appointment_date" required />
        </div>
      </div>
      <div class="row">
        <div class="col-25">
          <label for="appointment_time">Appointment time: </label>
        </div>
        <div class="col-75">
          <input type="time" id="appointment_time" name="appointment_time" required />
        </div>
      </div>
      <div class="row">
        <div class="col-25">
          <label for="phone">Patient mobile number: </label>
        </div>
        <div class="col-75">
          <input type="tel" id="phone" name="phone" placeholder="01234..." required />
        </div>
      </div>
      <div>
        <input type="submit" value="Make Appointment" />
      </div>
    </form>
  </div>
</body>
</html>

Creating the success page

Now, we'll create a success page. Open Success.cshtml and add the following code:

@using sinch_appointment_reminder.Models;
<html>
  <head>
    <title>Sinch Appointment Confirmation</title>
  </head>
<body>
    <p><em>@TempData["patient"]</em> has been scheduled for an appointment Dr <em>@TempData["doctor"]</em>.</p>
    <p>The appointment is set for @TempData["appointment_datetime"].</p>
    <p>A reminder message will be sent to the following phone number: @TempData["phone"].</p>
  </body>
</html>

Modifying the stylesheet

To give your app an appropriate look and feel, we'll add a stylesheet. In the .NET MVC framework, CSS is typically located in the wwwroots folder, in site.css. Open site.css and add the following code.

html {
  font-family: sans-serif;
  background:  rgb(9, 9, 49);
  padding: 1rem;
}
form {
  max-width: 900px;
  height: 22rem;
  padding: 10px;
  margin: 0 auto;
  background: white;
}
h1 {
  font-family: Helvetica, Arial, sans-serif;
  color: #eeeeee;
  margin: 1rem 0;
  text-align: center;
  font-weight: normal;
}

input[type="submit"] {
  align-self: start;
  min-width: 10rem;  
  background-color: lightgray;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float:right;  
}

input[type="submit"]:hover {
  background-color: rgb(9, 9, 49);
  color: white;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

.container {
  border-radius: 5px;
  background-color: rgb(255, 190, 60);;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.alert{
  height:3rem;
  background-color: red;
  color: white;
  list-style-type: none; 
}


Previous page
Next page