前篇文章Jeditable - jQuery就地编辑插件使用介绍了jeditable 的使用，官方例子是PHP的。我们现在实现在ASP.NET MVC 中的使用介绍。本例是ASP.NET MVC3.
效果
点击前
点击一文本后
View
我们实现jeditable的一些基本用法
@model JQueryEditableMVC.Models.Company
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Details</title>
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jeditable.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".display-label").editable("/Company/UpdateLabel");
$(".text").editable("/Company/UpdateField",
{
submitdata: {
CompanyId: function () {
return $("#CompanyId").val();
},
RecordType: "COMPANY"
}
});
$(".textarea").editable("/Company/UpdateField",
{
type: 'textarea',
rows: 4,
columns: 10,
cancel: 'Cancel',
submit: 'OK',
submitdata: {
CompanyId: function () {
return $("#CompanyId").val();
},
RecordType: "COMPANY"
}
});
$(".select").editable("/Company/UpdateField",
{
type: 'select',
data: "{ 'Belgrade': 'Belgrade', 'Paris': 'Paris', 'London': 'London', 'Madrid': 'Madrid' }",
submit : 'OK',
submitdata: {
CompanyId: function () {
return $("#CompanyId").val();
},
RecordType: "COMPANY"
}
});
});
</script>
</head>
<body>
<div>
<h2>Details</h2>
<fieldset>
<legend>Company</legend>
<input type="hidden" id="CompanyId" value="@Model.ID" />
<div class="field">
<div class="display-label" id="lblName">Name</div>
<div class="display-field text" id="Name">@Model.Name</div>
</div>
<div class="field">
<div class="display-label" id="lblAddress">Address</div>
<div class="display-field textarea" id="Address">@Model.Address</div>
</div>
<div class="field">
<div class="display-label" id="lblTown">Town</div>
<div class="display-field select" id="Country">@Model.Town</div>
</div>
</fieldset>
</div>
</body>
</html>
Model
一个简单的model
using System;
namespace JQueryEditableMVC.Models
{
public class Company
{
public int ID { get; set; }
public string Name { get; set; }
public string Address { get; set; }
public string Town { get; set; }
}
}
Controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using JQueryEditableMVC.Models;
namespace JQueryEditableMVC.Controllers
{
public class CompanyController : Controller
{
//
// GET: /Company/
public ActionResult Details()
{
return View(new Company() {
ID = 17,
Name = "Gowi",
Address = "Maxima Gorkog 2",
Town = "Belgrade"
});
}
public string UpdateLabel(string id, string value)
{
return value;
}
public string UpdateField(string id, string value, int CompanyId, string RecordType)
{
return value;
}
}
}
分享到：
相关推荐
以上就是使用jQuery-File-Upload在ASP.NET MVC中实现Excel文件上传的完整流程。这个功能可以帮助用户方便地上传Excel数据，便于后台进行进一步的数据处理和分析。在实际应用中，还可以根据需求扩展功能，例如添加...
《jQuery-File-Upload在ASP.NET MVC中的应用详解》 在Web开发中，文件上传功能是必不可少的一部分，尤其是在用户需要提交图片、文档等文件时。jQuery-File-Upload是一款广泛使用的前端文件上传插件，它提供了优雅的...
总结起来，"jQuery-File-Upload asp.net MVC3 Demo"是一个演示如何在ASP.NET MVC3框架下利用jQuery File Upload插件实现高效、友好的文件上传功能的示例。它涵盖了前端的表单构建、插件配置，以及后端的文件处理和...
在Asp.Net MVC中，使用jQuery和AJAX进行文件上传需要额外的插件，如jQuery Form Plugin。这个插件可以处理表单提交，包括文件上传。 七、异常处理和验证 在AJAX请求中，我们可以利用ASP.NET MVC的Validation ...
在Asp.Net MVC中，路由（Routing）是连接URL请求和控制器行为的关键机制。你可以自定义路由规则，使得URL更加友好且易于理解。例如，通过设置路由，你可以将`/Home/About`映射到HomeController的About方法。 接下来...
9. **错误处理和调试**：学习如何在ASP.NET MVC中设置和处理异常，以及如何使用Visual Studio进行调试。 10. **单元测试和TDD**：理解测试驱动开发（TDD）的理念，学习如何为ASP.NET MVC项目编写单元测试，确保代码...
在ASP.NET MVC中，模型类通常会继承自`System.ComponentModel.DataAnnotations`命名空间中的特性，以便进行数据验证。 2. **视图（View）**：视图是用户界面，负责呈现数据。它通常由HTML、CSS和JavaScript组成，...
总的来说，这个项目展示了如何利用ASP.NET MVC和JQuery结合MySQL数据库来实现Web应用中的动态三级联动功能，对于学习和理解MVC模式、AJAX技术以及MySQL数据库操作有着很好的实践意义。同时，也涉及到了前端与后端的...
7. **改进的路由**：路由系统在ASP.NET MVC4中更加灵活，可以自定义路由规则，更好地控制URL结构。 8. **异步控制器**：利用.NET Framework 4.5的异步编程模型，开发者可以编写异步控制器，提高性能特别是在处理I/O...
在具体应用中，DWZ的Ajax功能可以无缝对接ASP.NET MVC3的Ajax动作方法，实现无刷新页面更新。例如，使用DWZ的表格组件，可以通过Ajax调用MVC3的Controller中的Action获取数据，然后动态填充到表格中，提供快速的数据...
在ASP.NET MVC中，模型通常由C#类组成，这些类可以映射到数据库表，也可以包含验证规则。 2. **视图（View）**: 视图是用户界面，负责呈现数据。它通常由Razor视图引擎生成的HTML代码组成。开发者可以通过`@model`...
在ASP.NET MVC中，我们通常会创建一个控制器（Controller）和一个对应的行动方法（Action）。例如，创建一个名为`UploadExcel`的行动方法，接收`HttpPostedFileBase`类型的参数，这是ASP.NET MVC用于处理文件上传的...
1. **基础概念**：解释MVC架构，以及如何在ASP.NET环境中配置和启动MVC项目。 2. **控制器和动作**：详细讲解如何创建控制器类，定义动作方法来处理HTTP请求。 3. **视图和布局**：阐述如何创建视图文件，使用razor...
在ASP.NET MVC4中： 1. **模型（Model）**：代表应用程序的数据和业务逻辑。模型层处理数据操作，如数据库交互、业务规则验证等。 2. **视图（View）**：是用户看到并与之交互的界面部分。视图从模型获取数据，并...
在ASP.NET MVC4中，我们通常使用Entity Framework与SQL2008数据库进行交互，定义实体类来映射数据库表，并通过DbContext管理这些实体。例如，创建一个`User`实体类，对应数据库中的`Users`表。 2. **视图（View）**...
在开发过程中，asp.net MVC5提供了一套完整的工具链，包括路由、模型绑定、验证、依赖注入等特性，有助于提高开发效率和代码质量。Easyui则负责前端部分，提供如表格、表单、下拉菜单、对话框等常见UI元素，使开发者...
在ASP.NET MVC中，可以使用实体框架（Entity Framework）等ORM工具来简化数据库操作。 6. **视图（View）**：视图用于呈现数据，通常由Razor或ASPX语法编写。它们可以从控制器接收数据，并根据数据渲染HTML页面。 ...
本篇文章将深入探讨如何在ASP.NET MVC Core中使用JS Dialog对话框，以及相关的JavaScript库和技术。 首先，JS Dialog对话框通常指的是JavaScript中的模态对话框，如jQuery UI的Dialog组件。jQuery UI是一个流行的...
8. **AJAX与jQuery**：讲解如何在MVC应用中使用AJAX增强用户体验，以及与jQuery库的结合。 9. **响应式设计与移动优化**：探讨如何使MVC应用适应不同设备，包括使用Bootstrap实现响应式布局。 10. **部署与性能...
本书介绍了微软最新的ASP.NET MVC4框架，包括如何使用ASP.NET MVC4框架构建Web应用程序，ASP.NET MVC4框架的运行原理，如何在真实开发场景中使用ASP.NET MVC4框架新特性来解决不同的需求，如何使用HTML、JavaScript...