Jeditable - jQuery就地编辑插件在ASP.NET MVC 中的使用 JeditablejQuery就地编辑插件ASP.NET MVC使用
前篇文章Jeditable - jQuery就地编辑插件使用介绍了jeditable 的使用，官方例子是PHP的。我们现在实现在ASP.NET MVC 中的使用介绍。本例是ASP.NET MVC3. 点击前 点击一文本后 我们实现jeditable的一些基本用法 一个简单的model效果
View
@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
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;
}
}
}