برا ی کار با این کتابخانه شما نیاز به دریافت دو فایل cssc و js به نامهای bootstrap-editable.css و bootstrap-editable.min.js خواهید داشت اما ما در این برنامه با استفاده از cdn فایلهای مورد نظر را به برنامه اضافه خواهیم کرد.
برای شروع مراحل زیر را دنبال نمایید
یک پروژه از نوع Empty MVC ایجاد نمایید و یک کنترلر بنام Home به آن اضافه کنید و در پایان محتویات آنرا بصورت زیر ویرایش نمایید.
public ActionResult Index()
{
return View();
}
//[HttpPost]
public ActionResult Edit(string value,int pk)
{
try
{
return Json(new jsonresultcls { msg = "ok" }, JsonRequestBehavior.DenyGet);
}
catch
{
return Json(new jsonresultcls { msg = "متاسفانه عملیات بروزرسانی انجام نشد" }, JsonRequestBehavior.DenyGet);
}
}
class jsonresultcls
{
public string msg { get; set; }
}
کلاس jsonresultcls جهت ارسال مقادیر به سمت کلاینت تعریف شده است و در صورت موفقیت آمیز بودن مقدار OK ارسال خواهد شد.
ویوی index را بصورت زیر ویرایش نمایید
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<!-- x-editable (bootstrap version) -->
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script>
</head>
<body>
<div style="margin:20px;">
<p style=""> جهت ویرایش بر روی کلمه زیر کلیک نمایید</p>
<div style="padding-left:80px;">
<a href="#" id="groupTitle">گروه برنامه نویسی فکر بکر</a>
</div>
</div>
<script>
$(document).ready(function () {
$('#groupTitle').editable({
type: 'text',
url: '/Home/Edit',
pk: 1,////کلید ترکیبی pk:{id: 1, name: 'value'}
title: 'نام گروه را وارد نمایید',
//anim: {
// duration: 2000
//},
emptytext: "بدون مقدار",
mode :"popup",//inline
defaultValue: 'fekre-bekr.ir',
saveonchange: "true",
ajaxOptions: {
type: 'post',
dataType: 'json'
},
success: function (response, newValue) {
if(response.msg !="ok")
{
return response.msg
}
}
});
});
</script>
</body>
</html>
اگر به توابع اسکریپتی که در انتهای ویو درج شده است نگاهی بیندازید خواهید دید کاربر با کلیک بر روی تگ a با نام groupTitle قادر به ویرایش محتویات آن خواهد شد با توجه به کد زیر.
$('#groupTitle').editable({
اکنون به توضیح پارامترهای مختلف بدنه این تابع خواهیم پرداخت :
type : حالت ویرایش کنترل مورد نظر در کادر جدید را تعیین میکند که در این مثال بصورت متن میباشد.
url : حاوی ادرس اکشن جهت ارسال مطالب ویرایش شده به سمت سرور جهت ثبت
pk : شامل مقدار کلید اصلی
نکته : مقدار جدیدی که توسط کاربر ویرایش شده است در سمت سرور از اکشن Edit توسط فیلد value قابل دریافت میباشد.
emptytext : در صورتیکه کنترل مورد نظر شامل هیچ داده ای نباشد مقدار موجود در این خاصیت نمایش داده خواهد شد.
در پایان در بدنه تابع success در صورتیکه مقدار برگشتی از سمت سرور برابر با رشته ok نباشد با استفاده از دستور return response.msg متن خطای ارسال شده از اکشن را به کاربر نمایش میدهد.
