欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-15 20:37:54
...

    前篇文章Jeditable - jQuery就地编辑插件使用介绍了jeditable 的使用,官方例子是PHP的。我们现在实现在ASP.NET MVC 中的使用介绍。本例是ASP.NET MVC3.

效果

点击前

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

点击一文本后

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

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;
        }

    }
}