ASP.NET MVC: Create Elegant Feedback Form Flat Responsive

By Tan Lee Published on May 29, 2017 16.3K

How to Create a Feedback Form Flat Responsive with ASP.NET MVC 5 using C#, Entity Framework Code First

Step 1: Download Elegant Feedback Form Flat Responsive Widget Template

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

ASP.NET MVC: Create Elegant Feedback Form Flat Responsive

By Tan Lee Published on May 29, 2017 16.3K

Related

Categories

Popular Posts

Entity Framework Code First vs Database First vs Model First Approach

RuangAdmin Template

11 Things You Didn't Know About Cloudflare

AdminKit Bootstrap 5 HTML5 UI Kits Template

Modular Admin Template