如何使用bootstrap和HTML创建联系表单

时间：2016-10-26 01:26:11

标签： javascript html twitter-bootstrap

我正在尝试建立一个联系表单，因为我正在建立一个网站，但我不确定我做得对。我使用了引导程序模板，并在页面底部显示了联系表单。我有一个代表我班级的模型，并且有一个控制器，根据我在网上收集的内容，应该处理点击按钮，但有些事情显然是错误的。我的背景是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; }
    }
}

2 个答案:

答案 0 :(得分：0)

val spark = SparkSession
    .builder()
    .appName("SparkParallelizeExample")
    .master("local[2]")
    .getOrCreate()
  val seqExam = Seq(1,2,3,4,5,6,7,8,9,10)
  val employeeRDD = spark.sparkContext.parallelize(seqExam)
  employeeRDD.foreach { x => println(x) }

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

答案 1 :(得分：-1)

请从以下网址查看演示，其工作情况如下： 1。https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form

相关问题
最新问题