jMVC.NET: 轻松动态客户端用户界面,带有清晰的MVC编码

分享于 

9分钟阅读

Web开发

  繁體

介绍

在 ASP.NET 中编程动态ui可能很棘手。 如果要以编程方式添加和删除控件,必须跳过很多步骤,以保持视图和控制事件。 事情容易变得混乱和模糊 Bug 在( 见过"中爬行无法加载 Viewstate"错误)。 此外,最终用户体验对于所有这些回发都非常糟糕。 AJAX和UpdatePanel可以帮助一点,但是基本上,它应该比这更容易?

jMVC.NET 是试图简化这里任务的尝试,为开发人员和终端用户创建更好的体验。 你可以将 jMVC:MVCPanel 控件放到现有的ASP.NET Web页面( 与其他传统 ASP.NET Web控件) 中,而 MVCPanel 将根据你提供的模板宿主动态控制结构。 使用 Model-View-Controller Pattern 保持干净整洁,在服务器上可以使用强类型 C#/VB.NET 对象来设置和检索用户编辑的数据。

在线演示托管在的外部站点,显示"Hello World"。"简单 List 编辑器"。"客户端网格"和"分层文件夹编辑器"演示的源代码和交互 ui。 我的博客上有更多的演示。

教程:任务列表

对于我们的教程,让我们假设我们制作一个简单的任务管理器应用程序。 用户希望管理任务的List,它的中每一个都可以能完成或者不是,假设它们可以添加一些可选的注释。 我们希望完成的用户界面看起来像这样:

Screenshot - jmvcnet2.png

记住,为了保持应用程序响应,对任务列表的更改应该在不发生回发或者AJAX请求的情况。

安装

首先,向 jMVC.NET DLL ( 并向 json.net 提供了) 添加项目引用:

接下来,在要添加控件的ASPX页中,添加对 jMVC的引用:

添加控件

现在你可以在任何 inside 控件中添加 jMVC:MVCPanel 控件了。

( 注意我们引用了名为的文件,它还不存在- 我们稍后会回到这个文件。)

添加模型

在代码 behind 中,为数据模型定义一个结构作为. NET 对象,并将它的分配给 TaskListControl 控件。

publicpartialclass TaskList : System.Web.UI.Page
{
 protectedvoid Page_Load(object sender, EventArgs e)
 {
 if(!IsPostBack)
 TaskListControl.Model["tasks"] = new List<Task>();
 }
 privateclass Task
 {
 publicstring Name;
 publicbool IsCompleted;
 publicbool HasNotes;
 publicstring Notes;
 }
}

添加视图

到目前为止,我们还有一个数据模型,接下来我们需要一个视图。 ASPX页面相同的目录创建一个空白文本文件,并将它称为 tasklist.jmvc - 这将是我们前面提到过的模板。

你可以从 string" Hello, world"中添加任何东西到你的tasklist.jmvc 模板。! 如果然后运行应用程序,页面将显示 string" Hello, world"以代替 TaskListControl 控件:!

真正的风景

那么" hello world"是不够的。 结果你的老板想要一个能做一些事情的应用程序。 编辑你的tasklist.jmvc 文件,使它的看起来像这个( 如果你第一次看不懂的话别担心):

<% if(model.tasks.length == 0) { %> <p>No tasks have been added.</p><% } else { %> <table border="1" cellpadding="6">
 <thead>
 <tr>
 <th align="left">Task</th> <th align="left">Status</th> <th align="left"></th></tr></thead> <% for(var i = 0; i <model.tasks.length; i++) { %> <tr>
 <td>
 <span style='<%= model.tasks[i].IsCompleted?
"text-decoration:line-through" :"font-weight:bold" %>'>
 <%= model.tasks[i].Name %></span></td> <td>
 <label>
 <input type="checkbox" onclick="<%* function(i)
 { model.tasks[i].IsCompleted = this.checked } %>" <%= model.tasks[i].IsCompleted? "checked" : ""%>/>
 Completed
 </label> <label>
 <input type="checkbox" onclick="<%* function(i)
 { model.tasks[i].HasNotes = this.checked } %>" <%= model.tasks[i].HasNotes? "checked" : ""%>/>
 Has notes
 </label> <% if(model.tasks[i].HasNotes) { %> <div><textarea onchange="<%* function(i)
 { model.tasks[i].Notes = this.value; } %>">
 <%= model.tasks[i].Notes %></textarea></div> <% } %></td> <td>
 <a href="#" onclick="<%* function(i)
 { model.tasks.splice(i, 1); } %>"">Delete</a>
 </td>
 </li>
 </tr>
 <% } %>
 </table>
<% } %>
Add new task:
<input type="text" id="NewTaskName" onkeypress="return event.keyCode!= 13;
 /* don't submit form if ENTER is pressed */"/>
<input type="button" value="Add" onclick="<%* function()
 { addNewTask(model.tasks); } %>"/>
<%
 function addNewTask(taskList) {
 var taskName = document.getElementById("NewTaskName").value;
 if(taskName!="")
 taskList[taskList.length] = { Name : taskName, Notes :"" };
 }
%>

完成工作

完成运行你的应用程序,你将看到页面现在完全交互。 ! 外观,无回发 ! final 任务是接收服务器上的更新数据,并使用它做一些事情( 比如。 将它的保存到数据库中。

那是什么?

jMVC 语法初先可以能有点不熟悉,但实际上是一种将数据模型映射到一组交互式HTML控件。 当然,与实现传统的面向服务 ASP.NET 中相同的行为相比,要实现的工作要少得多,而不需要 AJAX,而且代码更少,。

请注意,服务器端端的清理方式是: 有几行代码,我们在浏览器中交互地使用强类型的.NET 数据模型。

jMVC 模板语法只包含 HTML,以及三个可以运行 inside的控件结构:

  • 使用 <%= model.property %> 语法,将计算结果插入到生成的UI中,以为代价
  • 流量控制使用 <%/* Javascript here */%> 语法,通常用于模型上的迭代或者递归,如下所示:

    <% for(var i = 0; i <model.items.length; i++) { %> Item: <%= model.items[i].name %><% } %>
  • Closures<%* function() {/* Javascript here */} %> 语法,并用于添加事件处理程序,如下所示:

    <input type="button" onclick="background-color: Yellow;"><%* function(i)
     { alert("This is item number" + i); } background-color: Yellow;">%>"/>

核心工作流是. NET 数据模型自动转换为 JSON,jMVC 模板作为一个从JSON数据到一组HTML控件的映射。 无论什么时候,你的闭包编辑底层数据模型,都会自动重新生成UI以显示更改的效果。 当 finally 执行真实的postback 时,JSON数据将映射回. NET 对象,以便你的服务器端代码获取。

更多信息

如果希望 Visual Studio 为 jMVC 文件提供正确语法高亮显示,请提示 #1:,右键单击文件,选择"打开方式。",然后选择"html编辑器"。

在外部站点上提供了带有源代码的收费示例,带有源代码的交互示例。

本文介绍了如何将 jMVC 控件与 ASP.NET 集成,但我的博客还有关于使用 jMVC 作为独立JavaScript库和 Castle MonoRail的文章。 另外还有另一个用于 ASP.NET 程序员的jMVC.NET 教程。

你可以了解到 jMVC.NET 如何工作于 behind 场景( 例如。 通过启用调试信息来实时更新JSON数据模型,如下所示:

历史记录

  • 第 25th 2007年11月: 首次写入

cod  动态  SID  CODI  dynamic-c  
相关文章