如何使用引导程序和HTML创建联系人表单
How to create a contact form using bootstrap and HTML
在创建网站的过程中，我正在尝试创建一个联系人表单，但我不确定我做得对。我使用的是一个引导模板，在页面底部有联系人表格。我有一个代表我的类的模型，并且有一个控制器，根据我在网上收集的信息，它应该处理按钮的点击，但显然出了问题。我的背景是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.chtml:
@{
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 © 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; }
}
}
<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/
请从以下url查看演示，它的工作原理：1.https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form
相关文章：
- 创建一个类似链接的按钮，并通过Javascript函数打开一个新的弹出窗口
- 为effect Composer创建GodRays效果过程
- 从javascript创建一个列表
- onkeyup无法动态创建多个文本区域
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何访问声音管理器2创建的声音对象
- 我已经创建了一个jquery转盘，并使用if条件来运行和停止转盘
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- 使用Facebook live API创建实时视频对象时的隐私设置
- 发布JSON以创建新联系人
- 创建一个联系人数据数组的已清理联系人对象
- 从localhost使用谷歌联系人api创建联系人时出现CORS错误
- 我想在php脚本中创建带有联系人表单的自动弹出窗口
- Iron router，试图创建一个联系人应用，每个联系人都有单独的页面
- 如何在rails 4中创建一个联系人表单电子邮件，当网页在客户端
- 创建一个类似于outlook电子邮件/联系人查找的组件
- 我可以从javascript在Eloqua中创建联系人吗?
- 如何使用引导程序和HTML创建联系人表单
- 我如何在不使用任何插件的情况下创建Wordpress联系人页面
- Magento-我需要一个“;好的"关于如何创建自定义联系人表单的教程
