MVC 小demo

Posted 2020-10-24 vichin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了MVC 小demo相关的知识，希望对你有一定的参考价值。

.field-validation-error {
    color: #f00;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid {
    display: none;
}

Style.css

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace PartyInvites.Models
{
    public class GuestResponse
    {
        [Required(ErrorMessage = "Please enter your name")]
        public string Name { get; set; }
        [Required(ErrorMessage="Please enter your email address")]
        [RegularExpression(".+\\@.+\\..+",ErrorMessage="Please enter a valid email address")]
        public string Email { get; set; }
        [Required(ErrorMessage="Please enter your phone number")]
        public string Phone { get; set; }
        [Required(ErrorMessage="Please specify whether you‘ll attend")]
        public bool? WillAttend { get; set; }
    }
}

Model__GuestResponse.cs

在view文件夹中，Home控制器内存在3个主视图

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.css" rel="stylesheet" />
    <title>Index</title>
    <style>
        .btn a {
            color: white;
            text-decoration: none;
        }

        body {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div class="text-center">        
        <h2>We‘re going to have an exciting party.<br />(To do: sell it better. Add pictures or something.)</h2>
        <h3>And you are invited</h3>
        <div class="btn btn-success">
            @Html.ActionLink("RSVP Now", "RsvpForm")
        </div>
    </div>
</body>
</html>

View→Home→Index.cshtml

@model PartyInvites.Models.GuestResponse

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="~/Content/style.css" rel="stylesheet" />
    <title>RsvpForm</title>
</head>
<body>
    <div class="panel panel-success">
        <div class="panel-heading text-center"><h4>RSVP</h4></div>
        <div class="panel-body">
            @using (Html.BeginForm())
            {
                @Html.ValidationSummary()
                <div class="form-group">
                    <label>Your name:</label>    @Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
                </div>
                <div class="form-group">
                    <label>Your email:</label> @Html.TextBoxFor(x => x.Email, new { @class = "form-control" })
                </div>
                <div class="form-group">
                    <label>Your phone:</label> @Html.TextBoxFor(x => x.Phone, new { @class = "form-control" })
                </div>
                <div class="form-group">
                    <label>Will you attend?</label>
                    @Html.DropDownListFor(x => x.WillAttend, new[]{
               new SelectListItem(){Text="Yes,I‘ll be there",Value=bool.TrueString},
               new SelectListItem(){Text="No,I can‘t come",Value=bool.FalseString}
               }, "Choose an option", new { @class = "form-control" })
                </div>
               <div class="text-center"><input class="btn btn-success"  type="submit" name="name" value="Submit RSVP" /></div> 
            }
        </div>
    </div>
</body>
</html>

View→Home→RsvpForm.cshtml

@model PartyInvites.Models.GuestResponse

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Thanks</title>
</head>
<body>
    <div>
        <h1>Thank you,@Model.Name!</h1>
        @if (@Model.WillAttend == true) { 
        @:It‘s great that you‘re coming.The drinks are already in the fridge.
        }
        else { 
            @:Sory to hear that you can‘t make it,but thanks for letting us know.
        }
    </div>
</body>
</html>

View→Home→Thanks.cshtml

以上是关于MVC 小demo的主要内容，如果未能解决你的问题，请参考以下文章

Spring MVC小DEMO

Asp.Net Mvc后台数据验证自测小Demo

Asp.Net Mvc+Angular.Js自测小Demo

[Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作

Struts2 -- 登录表单入门小Demo

ASP.net MVC 代码片段问题中的 Jqgrid 实现