如何使用引导程序和HTML创建联系表单

Question

我在尝试建立网站时正在尝试建立联系表单，但不确定自己是否做对了。 我正在使用引导程序模板，并且在页面底部有联系表。 我有一个代表我的课堂的模型，并且有一个控制器，从我在线上收集的数据来看，该控制器应该处理按钮的单击，但是显然有些错误。 我的背景是C ++和Java，所以这是一个不同的游戏，所以有人可以告诉我要使其正常工作需要做什么吗？ 下面的代码。 谢谢！

HomeController.cs：

namespace WebPlay.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(ContactInfo ci)
        {
            try
            {
                MailMessage mail = new MailMessage();
                mail.To.Add(ci.Email);
                mail.From = new MailAddress("email@gmail.com");
                mail.Subject = "New Request";

                string userMessage = "";
                userMessage = "<br/>Name :" + ci.FirstName + " " + ci.LastName;
                userMessage = userMessage + "<br/>Phone No: " + ci.ContactInfoID;
                userMessage = userMessage + "<br/>Message: " + ci.Comments;

                mail.Body = userMessage;
                mail.IsBodyHtml = true;

                SmtpClient smtp = new SmtpClient();
                //SMTP Server Address of gmail
                smtp.Host = "smtp.gmail.com";
                smtp.Port = 587;
                smtp.Credentials = new System.Net.NetworkCredential("xxxxxxx", "xxxxxxx");

                // Smtp Email ID and Password For authentication
                smtp.EnableSsl = true;
                smtp.Send(mail);
                ViewBag.Message = "Thank you for contacting us.";
            }
            catch
            {
                ViewBag.Message = "Fail";
            }

            return View();
    }
}

Index.cshtml：

@{
    ViewBag.Title = "Home Page";
}

<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand page-scroll" href="#page-top">
            </a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
            <nav class="navbar navbar-dark bg-inverse">
                <a class="page-scroll" href="#about">About</a>

                <a class="page-scroll" href="#download">Download</a>

                <a class="page-scroll" href="#contact">Contact</a>
            </nav>

        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>
<!-- Intro Header -->
<header class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h1 class="brand-heading">Greetings...</h1>
                    <p class="intro-text">I'm Jon. This is my site.<br>Ya know what's up.</p>
                    <i class="fa fa-angle-double-down animated"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- About Section -->
<section id="about" class="container content-section text-center">

    <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
            <h2>About Me</h2>
            <p>I'm a programmer, crossfitter, and taco lover. The last 2 don't go togther so well.</p>
        </div>
    </div>
</section>
<!-- Download Section -->
<section id="download" class="content-section text-center">
    <div class="download-section">
        <div class="container">
            <div class="col-lg-8 col-lg-offset-2">
                <h2>Download Grayscale</h2>
                <p>You can download Grayscale for free on the preview page at Start Bootstrap.</p>
                <a href="http://startbootstrap.com/template-overviews/grayscale/" class="btn btn-default btn-lg">Visit Download Page</a>
            </div>
        </div>
    </div>
</section>
<!-- Contact Section -->
<section id="contact" class="container content-section text-center">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
            <h2>3...2...1...Contact Me</h2>
            <p>Feel free to contact me for a quote or to just say hello!</p>
            <form class="form-horizontal" role="form" method="post" action="index.php">
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">First Name:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="name" name="name" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">Last Name:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="name" name="name" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label for="phone" class="col-sm-2 control-label">Phone:</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="email" name="email" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label for="email" class="col-sm-2 control-label">Email:</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="email" name="email" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label for="exampleSelect1">Reason for contacting me:</label>
                    <select class="form-control" id="exampleSelect1">
                        <option>Quote on work</option>
                        <option>Just for fun</option>
                        <option>I might have a job for you</option>
                    </select>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio">I need a web app</label>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio">I need a Windows app</label>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio">I need a phone app</label>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio">I need nothing</label>
                </div>
        <div class="form-group">
            <label for="message" class="col-sm-2 control-label">Message:</label>
            <div class="col-sm-10">
                <textarea class="form-control" rows="4" name="message"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
            </div>
            <button class="btn btn-danger" type="reset">Reset</button>
        </div>
        <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                <! Will be used to display an alert to the user>
            </div>
        </div>
        </form>
    </div>
    </div>
</section>
<!-- Map Section -->
<div id="map"></div>
<!-- Footer -->
<footer>
    <div class="container text-center">
        <p>Copyright &copy; Your Website 2014</p>
    </div>
</footer>

ContactInfo类：

namespace PellegriniP3_1.Models
{
    public class ContactInfo
    {
        public string Comments { get; set; }
        public int ContactInfoID { get; set; }
        public string Email { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public bool IsPhoneApp { get; set; }
        public bool IsWebApp { get; set; }
        public bool IsWindowsApp { get; set; }
        public string TypeOfRequest { get; set; }
    }
}

Answer 1

<form class="form-horizontal" role="form" method="post" action="index.php">
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
            <?php echo "<p class='text-danger'>$errName</p>";?>
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
            <?php echo "<p class='text-danger'>$errEmail</p>";?>
        </div>
    </div>
    <div class="form-group">
        <label for="message" class="col-sm-2 control-label">Message</label>
        <div class="col-sm-10">
            <textarea class="form-control" rows="4" name="message"><?php echo htmlspecialchars($_POST['message']);?></textarea>
            <?php echo "<p class='text-danger'>$errMessage</p>";?>
        </div>
    </div>
    <div class="form-group">
        <label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
            <?php echo "<p class='text-danger'>$errHuman</p>";?>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <?php echo $result; ?>  
        </div>
    </div>
</form> 

请检查此链接： -https : //bootstrapbay.com/blog/working-bootstrap-contact-form/

Answer 2

请从以下网址检查演示，其工作原理：1. https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form