查看隐藏/显示控件

我正在将我从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中完成，所以我可以试试看？

来源

2012-04-01 DotNetDeveloper

我将首先建议您开始为您的javascript/ajax函数使用JQuery。 ASP.Net MVC3很好地支持JQuery。现在我将忽略对电子邮件的验证，因为如果没有它，将会容易得多。高度概括为：

添加jQuery脚本到您的网页
JQuery的vsdoc脚本添加到您的网页，让你有一些智能感知
创建一个局部视图来显示电子邮件和提交按钮
创建执行你提到
创建一个div接受最近返回电子邮件更新形式
使用jQuery覆盖您的用户名查找提交执行电子邮件查找一个控制器的动作一个ajax更新，而不是（和填充电子邮件更新形式格）

1. jQuery脚本添加到您的网页

这应该是很容易 - 只需从你的脚本文件夹拖动。我认为mvc3带有jquery-1.5.1.js。在发布到产品时使用min（缩小）版本。

2.添加JQuery的vsdoc脚本到你的网页，让你有一些智能感知

没有这么容易在这里 - 你将要使用if语句始终计算为false，这样的脚本是不实际包含在您的内容中。虽然它在页面上，但会导致VS将其用于智能感知。把这个贴近你的视角：

@if (false) { <script src="../../Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script> }

希望你使用剃刀。如果没有，开始使用它。起初我对它似乎有些陌生，但它需要的标记少得多。

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找到表单和按钮。（如果我们需要的话，如果我们想要“更新”更新电子邮件的行为，我们会这样做）。我没有在这里详细讨论这个细节，但是它的工作原理与原始用户名查找）

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); 
}

确保在此处返回部分视图而不是视图。

5.创建一个div接受最近返回电子邮件更新形式

确保这个div不包含在您的用户名查找表（只要你想隐藏它）。我们将以两种不同的形式进行工作。如果你喜欢（但会被置空反正）我叫它emailFormDiv

6.使用jQuery覆盖您的用户名查找提交执行AJAX的更新，而不是

JQuery的这个div可以隐藏将允许您将函数附加到...以及很多东西，但是我们将使用它来覆盖用户名查找表单上的提交按钮。假设您的原始用户名查找表单的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（如控制器和发布到控制器）的水平做出太多的假设，但无论如何，请问您是否需要进一步的帮助。

来源

2012-04-01 18:52:16 jlnorsworthy

jlnorsworthy，这是一个非常有用的答案 - 感谢您花时间解释它。我可以看到，这正是我想要实现的目标 - 我将努力将其融入到我的解决方案中。谢谢！ – DotNetDeveloper 2012-04-01 22:32:50

没问题 - 如果您需要进一步的帮助，请使用lmk – jlnorsworthy 2012-04-02 01:08:54

查看隐藏/显示控件

回答

相关问题