我将首先建议您开始将 JQuery 用于您的 javascript/ajax 函数。 ASP.Net MVC3 很好地支持 JQuery。我现在将忽略电子邮件的验证，因为没有它会让你更容易开始。高级概述将是：
- 将 JQuery 脚本添加到您的页面中
- 将 JQuery vsdoc 脚本添加到您的页面，这样您就有了一些智能感知
- 创建局部视图以显示电子邮件和提交按钮
- 创建一个控制器操作来执行您提到的电子邮件查找
- 创建一个 div 以接受新返回的电子邮件更新表单
- 使用 JQuery 覆盖用户名查找上的提交以执行 ajax 更新（并填充电子邮件更新表单 div）
1.将 JQuery 脚本添加到您的页面
这应该很容易 - 只需将其从脚本文件夹中拖出来即可。我认为 mvc3 带有 jquery-1.5.1.js。发布到生产环境时使用最小（缩小）版本。
2。将 JQuery vsdoc 脚本添加到您的页面，这样您就有了一些智能感知
这里没那么简单——您需要使用一个总是评估为 false 的 if 语句，这样脚本实际上不会包含在您的内容中。但是，将它放在页面上会导致 VS 将其用于智能感知。将其放在视图顶部附近：
@if (false) { <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script> }
希望您使用的是 Razor。如果没有，请开始使用它。起初对我来说似乎有点陌生，但它需要的标记要少得多。
3。创建部分视图以显示电子邮件和提交按钮
您可以使用 ViewBag 传递电子邮件地址和用户名（现在我们忽略验证），但继续从上面将其强类型化到您的模型中。您的视图可能如下所示：
@model ChangeEmailModel
@{using (Html.BeginForm("UpdateEmail", "Home", FormMethod.Post, new { id = "UpdateEmailForm" }))
{
<input type="hidden" name="userName" value="@Model.UserName" />
@Html.EditorFor(m => m.Email)
<button id="submitEmailUpdate" type="submit">Submit</button>
}
}
请注意，我们为表单和提交按钮提供了 ID。 JQuery 将根据这些 id 找到表单和按钮。 （如果我们需要，如果我们想“ajaxify”更新电子邮件的操作，我们会这样做。我没有在这里详细介绍，但它与原始用户名的工作过程相同查找）
4.创建执行您提到的电子邮件查找的控制器操作
我不会在这里过多地介绍控制器（因为您询问 ajax 类型更新），但它可能看起来像：
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult LookupEmail(string userName)
{
//connect to db and lookup email based on passed in username
//create a new instance of your model
var changeEmailModel = new ChangeEmailModel(.....)
//return a partial view
return PartialView("EmailUpdateForm", changeEmailModel);
}
确保在此处返回 PartialView 而不是 View。
5.创建一个 div 以接受新返回的电子邮件更新表单
确保此 div 不包含在您的用户名查找表单中（因为您想隐藏它）。我们将使用两种不同的表格。如果您愿意，可以隐藏此 div（但无论如何都会开始为空）我称之为 emailFormDiv
6.使用 JQuery 覆盖用户名查找上的提交以执行 ajax 更新
JQuery 将允许您将函数附加到...以及很多东西，但我们将使用它来覆盖您的用户名查找表单上的提交按钮。假设您的原始用户名查找表单的 id 为“formUserNameLookup”，其提交按钮的 ID 为“submitUserNameLookup”。然后，您将创建一个如下所示的脚本标记：
<script type="text/javascript" language="javascript">
$(document).ready(function () { //The document.ready function will fire when the html document is... ready
$('#submitUserNameLookup').click(function (ev) { //fires when the submit button is clicked
ev.preventDefault(); //prevent the normal action of the button click
$.post($('#formUserNameLookup').attr('action'), //get the url from the form's action attribute. Could be hard coded for simplicity
$('#formUserNameLookup').serialize(), //serialize the data in the form
function (response, status) {
$('#emailFormDiv').html(response); //replace the html of your div with the response
$('#formUserNameLookup').hide(); //hide the original form
}, 'html'); //states that we are expecting html back from the post
});
});
</script>
上面的代码附加了一个在点击提交按钮时运行的函数。当然，在实际单击按钮之前，它不会运行。绝对首选使用 JQuery/Javascript 将函数附加到 html 元素，而不是将它们直接嵌入到元素中，这被称为不显眼的 javascript。如果您继续 ajaxifying 更多页面，您将需要查看 JQuery 的实时和/或委托功能。请注意，一旦您开始关注性能和/或最佳实践，就有很多事情可以改变。以上应该可以让你继续前进。我希望我没有对您当前对 ASP.Net MVC 的熟悉程度（如控制器和发布到控制器）做出太多假设，但无论如何，请询问您是否需要进一步的帮助。