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

阅读更多

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

效果

点击前

Jeditable - jQuery就地编辑插件在ASP.NET MVC 中的使用_第1张图片

点击一文本后

Jeditable - jQuery就地编辑插件在ASP.NET MVC 中的使用_第2张图片

View

    我们实现jeditable的一些基本用法

@model JQueryEditableMVC.Models.Company
@{
    Layout = null;
}

DOCTYPE html>
<html>
<head>
    <title>Detailstitle>
    <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>Detailsh2>
        <fieldset>
            <legend>Companylegend>
            <input type="hidden" id="CompanyId" value="@Model.ID" />
            <div class="field">
                <div class="display-label" id="lblName">Namediv>
                <div class="display-field text" id="Name">@Model.Namediv>
            div>

            <div class="field">
                <div class="display-label" id="lblAddress">Addressdiv>
                <div class="display-field textarea" id="Address">@Model.Addressdiv>
            div>
            <div class="field">
                <div class="display-label" id="lblTown">Towndiv>
                <div class="display-field select" id="Country">@Model.Towndiv>
            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;
        }

    }
}

你可能感兴趣的:(Jeditable,jQuery就地编辑插件,ASP.NET,MVC,使用)