Question

我正在将我从ASP.NET webforms编写的网站移植到MVC3并需要一些指导，如下所述。我是MVC3的新手。

在我现有的ASP.NET Web表单项目中，我有一个简单的页面，用户输入用户名，然后单击一个导致回发的按钮，在回发时有一些基本代码检查输入的用户名是否存在于用户存储库 - 如果是，则显示包含用户电子邮件的文本框，并使用户名文本框不可见。使用ajax会发生这种情况，因此在输入用户名时，会显示包含电子邮件的文本框以及“更新”按钮，而不会刷新整页。

我创建了一个模型，如：

public class ChangeEmailModel
{
    [Required]
    public string Username { get; set; }

    [Required]
    public string Email { get; set; }
}

问题是当用户第一次进入页面时，他们应该只看到一个文本框，提示他们输入用户名。输入用户名并单击更新按钮后，只显示其电子邮件（从数据库中检索）。显示电子邮件后，他们可以编辑电子邮件并单击更新，然后需要发送到保存更新的电子邮件的控制器操作。我还没有完全习惯于以MVC的方式思考，所以我不确定我是否已经开始使用上面的模型做错了...

有人可以给我一些关于如何在MVC3中完成此操作的指导，以便我可以尝试一下吗？

Answer 1

我将首先建议您开始使用JQuery来实现javascript / ajax功能。 ASP.Net MVC3很好地支持JQuery。我现在将忽略对电子邮件的验证，因为如果没有它，将会更容易让您入门。高级概述将是：

将JQuery脚本添加到您的页面
将JQuery vsdoc脚本添加到您的页面，以便您有一些intellisense
创建部分视图以显示电子邮件和提交按钮
创建执行您提到的电子邮件查找的控制器操作
创建一个div以接受新返回的电子邮件更新表单
使用JQuery覆盖用户名查询上的提交以执行ajax更新（并填充电子邮件更新表单div）

<强> 1。将JQuery脚本添加到您的页面

这应该很简单 - 只需将其从脚本文件夹中拖出即可。我认为mvc3附带了jquery-1.5.1.js。在发布到生产时使用min（缩小）版本。

<强> 2。将JQuery vsdoc脚本添加到您的页面，以便您有一些intellisense

这里不那么容易 - 您将希望使用始终求值为false的if语句，以便脚本实际上不包含在您的内容中。虽然它在页面上，将导致VS用于intellisense。把它放在视图的顶部附近：

@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>
  }
}

请注意，我们已将Ids提供给表单和提交按钮。 JQuery将根据这些ID找到表单和按钮。（如果我们需要，如果我们想要“更新”更新电子邮件的行为，我们将会这样做。我没有在这里详细说明，但是这将是同样的过程，因为它是原始用户名的工作查找）

<强> 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。如果您继续更多地调整页面，您将需要查看JQuery的实时和/或委托功能。请注意，一旦开始考虑性能和/或最佳实践，就有很多事情可以改变。以上应该让你去。我希望我没有对你目前对ASP.Net MVC（如控制器和发布到控制器）的熟悉程度做出太多假设，但无论如何，请问你是否需要进一步的帮助。

查看隐藏/显示控件

1 个答案: