Jeditable - jQuery就地编辑插件在ASP.NET MVC 中的使用 - coderidea

Jeditable - jQuery就地编辑插件在ASP.NET MVC 中的使用

2012-05-03 14:36 coderidea 阅读(2798) 评论(0) 编辑收藏举报

前篇文章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;
        }

    }
}