前篇文章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 for asp.net MVC
用jQuery-File-Upload上传Excel文件(ASP.NET MVC)包括html前端和C#后端代码,自己写的,亲测有效。
本书介绍了微软最新的ASP.NET MVC4框架,包括如何使用ASP.NET MVC4框架构建Web应用程序,ASP.NET MVC4框架的运行原理,如何在真实开发场景中使用ASP.NET MVC4框架新特性来解决不同的需求,如何使用HTML、JavaScript...
ASP.NET-Core-2-MVC-CRUD-datatables-jQuery-Plugin 首先实现ASP.NET Core 2 MVC CRUD数据表jQuery插件和EF Core代码的示例实现。你会学什么ASP.NET Core 2 使用ASP.NET Core 2的Web API 使用实体框架(EF)的CRUD ...
ASP .Net Mvc、这是一个基础、但全面的项目源码,结合了.net Mvc与jquery作者在利用空余时间慢慢整理归纳出来。
ASP.NET MVC 是微软官方提出的一种Web开发框架,通过M是模型(model)-V视图(view)-C控制器(controller)l来设计创建Web应用程序。...在实际的大型ASP.NET MVC案例网站NuGet Gallery中演示所有知识点;
Develop next-generation web applications with ASP.NET MVC Go deep into the architecture and features of ASP.NET MVC 5, and learn how to build web applications that work well on both the desktop and ...
很好jq上传插件
本书介绍了微软最新的ASP.NET MVC 4框架,包括如何使用ASP.NET MVC 4框架构建Web应用程序,ASP.NET MVC 4框架的运行原理,如何在真实开发场景中使用ASP.NET MVC 4框架新特性来解决不同的需求,如何使用HTML、...
Combine the power of ASP.Net MVC 6 with Bootstrap 4 to build elegant, responsive web apps About This Book Updated for Bootstrap 4 and ASP.Net MVC 6, this book shows how to take advantage of the ...
The book includes practical examples to show you how to use open source plugins with Bootstrap and ASP.NET MVC and will guide you through building an ASP.NET MVC website using Bootstrap, utilizing ...
用的是ASP.NET MVC开发模式,可以导入和导出excel表格,使用了js、ajax,html,css后端使用nhibernate连接数据库,数据库用的sqlsever2015,系统主要有3个模块,部门、用户和资产模块,各模块都有多级分页模糊查询,...
带有ASP.NET-MVC的JqueryQueryBuilder 这是带有Jquery Query Builder插件的ASP.NET MVC项目的工作示例。
MVC专家“梦之队”对ASP.NET MVC 4的全新诠释 由Microsoft专家和极受敬重的...◆ 在实际的大型ASP.NET MVC案例网站NuGet Gallery中演示所有知识点 ◆ 应上一版读者提出的要求,本书涵盖了其他一些紧贴实用的开发知识
ASP.NET mvc ef 高端仓储管理系统源码MVC5仓库管理系统后台管理源码 一、 程序说明 该程序大部分使用于生产制造厂,其中结合了制造厂的采购,销售,生产等. 开源部分是仓库系统后台管理系统, 在给客户实施的过程...
《ASP.NET MVC 3 高级编程》主要内容是描述视图的概念,探讨Razor语法、NuGet、单元测试等,解释控制器在MVC框架中的作用,以及模型在绑定和数据访问策略中发挥的作用,演示如何显示和处理表单,涵盖添加到April ...
Asp.Net MVC中jquery.form附件上传例子
ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇ASP.NET MVC和jQuery系列一:入门篇
MVC专家“梦之队”对ASP.NET MVC 4的全新诠释 由Microsoft专家和极受敬重的软件... 在实际的大型ASP.NET MVC案例网站NuGet Gallery中演示所有知识点 ◆ 应上一版读者提出的要求,本书涵盖了其他一些紧贴实用的开发知识
1 Getting Started with ASP.NET MVC 1.1 How ASP.NET MVC Works 1.2 Installing MVC 1.3 MVC in Five Minutes: Building Quote-O-Matic 2 Test-Driven Development 2.1 TDD Explained 2.2 Test-Driving ...