七天学会ASP.NET MVC (1) - 深入理解

七天学会ASP.NET MVC (1) - 深入理解MVC

多 ASP.NET 开发人员开始接触 MVC，都认为 MVC 与 ASP.NET 完全没有关系，是一个全新的 Web 开发。

事实上 ASP.NET 是创建 WEB 应用的框架，而 MVC 是一种能够用更好的方法来组织并管理代码的体系，所以可以称之为 ASP.NET MVC。

因此，我们可以将原来的 ASP.NET 称为 ASP.NET Webforms，新的 MVC 称为 ASP.NET MVC。

ASP.NET Webforms

ASP.NET 在过去的十几年里，已经服务并成功实现Web 应用的开发。那么，我们先了解一下为什么ASP.NET能够如此流行，并成功应用？

微软编程语言从 VB 开始就能够成为流行并广泛应用，都源于其提供的强大的 Visual studio 能够进行可视化的编程，实现快速开发。

使用 VS 时，开发人员能够通过拖拽 UI 元素，并在后台自动生成这些界面的代码，称为后台代码。在后台代码中，开发人员可以添加操作这些UI元素的逻辑代码。

因此微软的可视化 RAD 架构体系有两方面组成，一方面是 UI，一方面是后台代码。

ASP.NET WebForms 存在的问题

响应时间

如图所示，每一次 WebForms 请求都有转换逻辑，运行并转换服务器控件为 HTML 输出。如果页面使用表格，树形控件等复杂控件，转换就会变得很糟糕，HTML 输出也是非常复杂的。由于这些不必要的转换从而增加了响应时间。上图是 ASP.Net MVC 和 Webforms 的响应时间对比，我们会发现 Webforms 的响应时间是 MVC 的两倍左右。

带宽消耗

ASP.NET 开发人员都非常熟悉 Viewstates，因为它能够自动保存 post 返回的状态，减少开发时间。但是这种开发时间的减少会带来巨大的消耗，Viewstate增加了页面的大小。

从上图中，我们可以看到与 MVC 对比，Viewstate 增加了两倍的页面存储。

MVC是怎么弥补这些问题的？

Asp.Net MVC 由 Model，View，Controller 三部分组成。Controller 中包含后台代码逻辑，View 是ASPX，如纯 HTML 代码，Model 是中间层。

不使用服务器控件，直接编写 HTML 代码，并且将后台代码迁移到独立的类库中，是 MVC 解决 Webforms 问题的方法。

直接编写HTML代码的好处在于，web设计者可以与开发人员紧密合作及时沟通，设计人员也可以使用他们喜爱的设计工具来设计HTML代码。

将后台代码迁移到独立的简单的类库，执行效率也会大大提高。

ASP.NET Webform 和 MVC 比较，如上图所示。

深入理解 ASP.NET MVC 今天就讲到这里，后续还会更新 “七天学会 ASP.NET MVC” 的其它篇章。

敬请期待！

相关开发工具

要进行 ASP.ET MVC 的开发，不但需要具备 MVC 的知识，还需要高效的工具来帮助开发。

使用 ComponentOne Studio Enterprise 中提供的 ComponentOne Studio ASP.NET MVC，您能获取快速的轻量级控件来满足用户所有需求，大大减轻工作量。

快人一步，免费试用

如果您想试用 ComponentOne Studio ASP.NET MVC，请联系我们：

微信：GrapeCityDT

邮件：marketing.xa@grapecity.com

官网：www.gcpowertools.com.cn

关于葡萄城控件

葡萄城是一家跨国软件研发集团，专注控件领域近30年，是全球最大的控件提供商，也是微软认证的金牌合作伙伴

数据输入需要一些验证时，每个人都需要一点帮助。今天，我们提供了一种方法，根据用户的输入给用户一些数据提示。

获得高级管理人员手册的重要趋势、技巧和战略，以竞争和赢得数字经济。

当数据输入需要一些验证时，每个人都需要一点帮助。今天，我们提供了一种方法，根据用户的输入给用户一些数据提示。

在最近的一个项目中，我被要求创建一个带有“永久占位符”的文本框。

whaaaaa吗?

所以我决定继续跟进，询问他们是什么意思。

“你知道……因此，当用户不知道公司的正确名称时，他们可以得到提示。

“当他们打字时，会在文本框中显示一个可能的公司名称。”

在搜索之后，我从Geoff Graham的CSS技巧中找到了这个例子。这正是他们所谈论的，但无济于事。

看到的第一个名字吗?他们输入第一个字母，建议把剩下的字母作为突出的文本显示出来。

它所做的唯一一件事就是给我提供我所需要的功能。

GIF动画是最终的目标，但如何做到这一点是一个难题。

要求自动填充

让我们检查一下如何让这个文本框起作用。

当他们开始键入公司名称时，他们可能会停下来考虑拼写，并要求提示。
我们应该检查数据库的部分公司名称。
在文本框中显示高亮显示或灰色显示的建议。
一旦他们对自己的输入感到满意，他们就会点击tab进入下一个领域，他们的公司名称就会被接受。

1 2和4并不难。3是这个问题。

为什么?

如果我们想要使用灰色的文本，而不是突出显示的文本，那么文本框中就没有一种方法可以将文本显示为一种颜色，而另一种颜色的建议则是另一种颜色。

高亮文本可能是实现这一点的更好方法，但是当我们到达它的时候，我们会跨越那个灰色的桥。

概述

首先，我们需要一个文本框。

@using (Html.BeginForm())
{
<div class="form-group">
<div class="row">
<div class="col-md-4">
@Html.Label("Company", "Company:")
<span class="autofill">
@Html.TextBox("CompanyTextBox", String.Empty, new
{
@class="form-control input-sm"
})
</span>
<p class="help-block">Enter the company name (i.e. Apple, Microsoft).</p>
</div>
</div>
</div>
}

繁荣!完成了!

进行呼叫!

接下来，我们需要一个API来根据输入检索我们的公司。我使用一个假的数据库调用创建了一个服务控制器(您可以根据您认为合适的方式修改它)。

我添加了一个名为ServicesController的新项目(Web API控制器类)。

using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
namespace AutofillDemo
{
[Route("api/[controller]")]
public class ServicesController : Controller
{
// GET api/<controller>/5
[HttpGet("{id}")]
public List<string> Get(string id)
{
var partialCompanyName=id;
// Create a repository to access your database here.
// For now, we'll create a small list
// of companies for demonstration purposes.
var list=new List<string>
{
"Apple",
"Microsoft",
"Google",
"MicroCenter",
"Microtek",
"MicroSystems"
};
var company=list.OrderBy(e=> e).FirstOrDefault(e=>
e.StartsWith(partialCompanyName));
// if company is null, use an empty string.
// Else, use the company. :-)
return new List<string> { company ?? "" };
}
}
}

我从API中删除了附加的HTTP谓词，因为我们现在不需要它们。

由于我们已经构建了web服务，您可以通过运行应用程序并在浏览器中输入http://localhost:/api/Services/Micro，来测试它。我们的服务应该还回来。“MicroCenter。”

完美!

一些(JavaScript)组装要求

现在我们已经有了HTML和web服务，我们需要JavaScript来实现这个奇迹。

我们的一个要求是，我们需要给用户足够的时间来完成输入。一旦他们停下来，给他们一两秒钟想想。

对于这个功能，我们需要在某个延迟之后执行一个函数。

我们还需要一个函数来突出(或选择)其余的字符，这样我们就可以继续输入提示信息了。

$.fn.delayKeyup=function (n, t) {
var i=0;
return $(this).keyup(function () {
clearTimeout(i);
i=setTimeout(n, t);
}),
$(this)
};
$.fn.selectRange=function (start, end) {
return this.each(function () {
if (this.setSelectionRange) {
this.focus();
this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range=this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};

当然，您需要jQuery来实现这些功能。

selectRange检查我们在if语句中使用哪个浏览器。

让我们设置事件来使用这些函数。

$(function() {
var company=$("#CompanyTextBox");
$(company).delayKeyup(function() {
var partialCompanyName=$(company).val();
// if there's nothing there, don't do anything.
if (partialCompanyName.length===0) {
return false;
}
// grab company names based on the partial
$.getJSON("/api/Services/" + partialCompanyName)
.done(function(data) {
if (data) {
var returnedCompany=data[0];
// Remaining highlighted characters
$(company).val(returnedCompany);
$(company).selectRange(partialCompanyName.length,
returnedCompany.length);
}
})
.fail(function() {
console.log("error");
});
}
, 1000);
});

获取用户输入后，我们检查它是否为空。如果是的话，停止你正在做的事情，然后返回false。

在验证输入之后，我们通过我们的API请求返回公司名称。

我们将返回的公司名称设置在文本框中，并根据用户的输入设置所选字符的范围。

底部的1000是1秒超时。你可以自行决定，但不要让他们等待太久。

结论

虽然我们可以使用建议下拉，但我觉得这是一个挑战，给用户提供提示，而不需要点击下拉菜单。

这种特殊的技术让我思考——我们可以通过把突出显示的字符(如本文开头所提到的)，让它们变得更透明，就像一个占位符吗?

怎么可能呢?我有个主意，请继续。

你认为你知道如何做透明的占位符吗?我们需要CSS吗?在下面发表你的评论，让我们讨论一下。

系列文章将为大家介绍如何实现和应用模板，模板允许您自定义控件部分（标题、单元格、项目等）的呈现方式。

DevExtreme Complete Subscription官方最新版免费下载试用，历史版本下载，在线文档和帮助文件下载-慧都网

使用 *Template() 方法定义模板，例如：

DataGridColumnBuilder.CellTemplate - 为DataGrid控件中的列单元格指定模板。
ListBuilder.ItemTemplate - 为 List 控件中的项目指定模板。
PopupBuilder.ContentTemplate - 为 Popup 控件的内容指定模板。

模板语法

模板由 Razor 标记和可以使用参数的 ERB 样式构造 (<% %>) 组成，要定义模板，请在控件的 *Template(RazorBlock templateContent) 方法中使用 @<text>? 块。

注意：Razor VB：当您使用 @<text> 块时：

用@Code/End Code 附上控件配置；
使用 Render() 结束控件配置。

Razor C#

@(Html.DevExtreme().List()
.DataSource(DataSource)
.ItemTemplate(@<text>
<div><%- Name %></div>
</text>)
)

Razor VB

@Code
Html.DevExtreme().List() _
.DataSource(DataSource) _
.ItemTemplate(Sub()
@<text>
<div><%- Name %></div>
</text>
End Sub) _
.Render()
End Code

List 控件绑定到以下数据源：

object[] DataSource=new[] {
new { Name="John" },
new { Name="Jane" }
};

Dim DataSource={
New With {.Name="John"},
New With {.name="Jane"}
}

您还可以在模板中使用 @Html，例如嵌套控件或访问标准 HTML 帮助程序。

如果模板很短且不使用 Razor 构造（以 @ 开头），则可以使用带有 String 参数的 *Template 方法的速记重载：

Razor C#

@(Html.DevExtreme().List()
.DataSource(DataSource)
.ItemTemplate("<div><%- Name %></div>")
)

Razor VB

@(Html.DevExtreme().List() _
.DataSource(DataSource) _
.ItemTemplate("<div><%- Name %></div>")
)

外部模板

您可以在控件声明之外定义模板，这在以下情况下很有用：

模板很大；
想重用一个模板；
需要嵌套模板（下面的代码演示了如何将 List 控件嵌套在 Popup 控件中）。

Razor C#

@(Html.DevExtreme().Popup()
.ID("myPopup")
.ContentTemplate(@<text>
@Html.Partial("_MyPopupContentTemplate")
</text>)
)

Razor VB

@Code
Html.DevExtreme().Popup() _
.ID("myPopup") _
.ContentTemplate(Sub()
@<text>
@Html.Partial("_MyPopupContentTemplate")
</text>
End Sub) _
.Render()
End Code

Shared/_MyPopupContentTemplate.cshtml

@(Html.DevExtreme().List()
.DataSource(ListDataSource)
.ItemTemplate(@<text>
<div><%- Name %></div>
</text>)
)

Shared/_MyPopupContentTemplate.vbhtml

@Code
Html.DevExtreme().List() _
.DataSource(ListDataSource) _
.ItemTemplate(Sub()
@<text>
<div><%- Name %></div>
</text>
End Sub) _
.Render()
End Code

使用命名模板。

在 using(Html.DevExtreme().NamedTemplate(...)) 块中定义模板。
在 *Template(TemplateName name) 方法中指定模板名称。

Razor C#

@(Html.DevExtreme().Popup()
.ID("myPopup")
.ContentTemplate(new TemplateName("myPopupContentTemplate"))
)

@using (Html.DevExtreme().NamedTemplate("myPopupContentTemplate")) {
@(Html.DevExtreme().List()
.DataSource(ListDataSource)
.ItemTemplate(@<text>
<div><%- Name %></div>
</text>)
)
}

Razor VB

@Code
Html.DevExtreme().Popup() _
.ID("myPopup") _
.ContentTemplate(New TemplateName("myPopupContentTemplate")) _
.Render()
End Code

@Using (Html.DevExtreme().NamedTemplate("myPopupContentTemplate"))
@Code
Html.DevExtreme().List() _
.DataSource(ListDataSource) _
.ItemTemplate(Sub()
@<text>
<%- Name %>
</text>
End Sub) _
.Render()
End Code
End Using

可以在声明控件或布局的同一 Razor 文件中声明命名模板。

注意：

模板名称在整个应用程序中应该是唯一的。
命名模板应该在顶层定义，它们不能在另一个模板中声明。

使用 Razor @helper 指令将模板标记提取到函数中。

Razor C#

@(Html.DevExtreme().Popup()
.ID("myPopup")
.ContentTemplate(@<text>
@MyPopup_List()
</text>)
)

@helper MyPopup_List()
{
@(Html.DevExtreme().List()
.ItemTemplate(@<text>
@MyPopup_List_Item()
</text>)
)
}

@helper MyPopup_List_Item()
{
<text>
<div><%- Name %></div>
</text>
}

Razor VB

@Code
Html.DevExtreme().Popup() _
.ID("myPopup") _
.ContentTemplate(Sub() Write(MyPopup_List())) _
.Render()
End Code

@helper MyPopup_List()
@(Html.DevExtreme().List() _
.ItemTemplate(Sub() Write(MyPopup_List_Item()))
)
End Helper

@helper MyPopup_List_Item()
@<text>
<div><%- Name %></div>
</text>
End Helper

DevExtreme

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序。从Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和响应式UI小部件集合，可在传统Web和下一代移动应用程序中使用。该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

在线咨询

上一篇：「原创」用Htmlhelp Workshop制作Wi
下一篇：JavaScript开发的五大IDE工具

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

七天学会ASP.NET MVC (1) - 深入理解

要求自动填充

概述

进行呼叫!

一些(JavaScript)组装要求

结论

模板语法

外部模板

您的项目需求