Step 1: Download Elegant Feedback Form Flat Responsive Widget Template
Step 2: Create a Feedback class, then run add-migration to create a Feedback table
public class Feedback
{
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public int ID { get; set; }
public int? Answer { get; set; }
[StringLength(500)]
public string Comment { get; set; }
[StringLength(100)]
public string FullName { get; set; }
[StringLength(255)]
public string Email { get; set; }
}Open IdentityModels class, then add a Feedback property to the ApplicationDbContext class
public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
{
public ApplicationDbContext()
: base("DefaultConnection", throwIfV1Schema: false)
{
}
public DbSet<Feedback> Feedbacks { get; set; }
public static ApplicationDbContext Create()
{
return new ApplicationDbContext();
}
}Create an Answer class to map data
public class Answer
{
public int ID { get; set; }
public string Name { get; set; }
public string Css { get; set; }
}Create a FeedbackViewModel class to transfer data beween view and controller
public class FeedbackViewModel
{
public string Comment { get; set; }
public string FullName { get; set; }
public string Email { get; set; }
public int? Select { get; set; }
public List<Answer> Answers { get; set; }
}Step 3: Create a Feedback controller as below
public class FeedbackController : Controller
{
ApplicationDbContext context;
public FeedbackController()
{
context = new ApplicationDbContext();
}
// GET: Feedback
public ActionResult Index()
{
return View(context.Feedbacks.ToList());
}
public ActionResult Create()
{
FeedbackViewModel model = new FeedbackViewModel();
model.Answers = Common.GetAnswers();
return View(model);
}
[HttpPost]
public async Task<ActionResult> Create(FeedbackViewModel model)
{
if (ModelState.IsValid)
{
context.Feedbacks.Add(new Feedback() { Answer = model.Select, Comment = model.Comment, Email = model.Email, FullName = model.FullName });
await context.SaveChangesAsync();
return RedirectToAction("Index");
}
model.Answers = Common.GetAnswers();
return View(model);
}
}Right click on Index action, then create an Index view, similar for Create action
@model IEnumerable<MvcDemo.Models.Feedback>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Answer)
</th>
<th>
@Html.DisplayNameFor(model => model.Comment)
</th>
<th>
@Html.DisplayNameFor(model => model.FullName)
</th>
<th>
@Html.DisplayNameFor(model => model.Email)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.Answer)
</td>
<td>
@Html.DisplayFor(modelItem => item.Comment)
</td>
<td>
@Html.DisplayFor(modelItem => item.FullName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Email)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
@Html.ActionLink("Details", "Details", new { id=item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id=item.ID })
</td>
</tr>
}
</table>Add code to Create view
@model MvcDemo.Models.FeedbackViewModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Elegant Feedback Form Flat Responsive Template :: w3layouts</title>
<!-- custom-theme -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Elegant Feedback Form Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //custom-theme -->
<link href="/elegantfeedback/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
</head>
<body class="agileits_w3layouts">
<h1 class="agile_head text-center">Elegant Feedback Form</h1>
<div class="w3layouts_main wrap">
<h3>Please help us to serve you better by taking a couple of minutes. </h3>
@using (Html.BeginForm("Create", "Feedback", FormMethod.Post, new { @class = "agile_form" }))
{
<h2>How satisfied were you with our Product/Service?</h2>
<ul class="agile_info_select">
@for (int i = 0; i < Model.Answers.Count; i++)
{
<li>
@Html.RadioButtonFor(m => Model.Select, Model.Answers[i].ID, new { @id = i })
<label for="@i"> @Model.Answers[i].Name</label>
<div class="@Model.Answers[i].Css"></div>
</li>
}
</ul>
<h2>If you have specific feedback, please write to us...</h2>
@Html.TextAreaFor(m => m.Comment, new { @class = "w3l_summary", @placeholder = "Additional comments" })
@Html.TextBoxFor(m => m.FullName, new { @placeholder = "Your Name" })
@Html.TextBoxFor(m => m.Email, new { @placeholder = "Your Email" })
<input type="submit" value="send" class="agileinfo" />
}
</div>
<div class="agileits_copyright text-center">
<p>© 2017 Elegant Feedback Form. All rights reserved | Design by <a href="//w3layouts.com/" class="w3_agile">W3layouts</a></p>
</div>
</body>
</html>VIDEO TUTORIALS
