使用JEditable插件作为ASP。NET MVC3 jQuery内联编辑器

• 下载source code - 190 KB

表的内容 IntroductionBackground 使用代码 ModelViewController  应用Jeditable插件 配置可编辑标签配置可编辑字段 配置可编辑插件 自定义提交选项改变编辑器类型提交dataConfigure显示/行为处理 与其他JQuery插件UI表和JQuery数据表的集成 结论 Introduction  您可能已经看到了一个新的HTML5特性，称为contenteditable。它使您能够编辑任何元素 在HTML中使用内联编辑器。惟一需要做的是附加一些事件处理程序，这些事件处理程序将在编辑完成并发送时调用 新内容到服务器端。如果你喜欢这个HTML5特性，你就会喜欢这个插件。 尽管contenteditable特性很好，但如果您试图在web应用程序中使用它， 您可能已经注意到，您需要实现许多其他功能，比如发送AJAX请求到 服务器端，处理错误，验证等。 此外，如果您编辑纯文本，它工作得很好，但如果您想使用其他编辑器，如日历，复选框，或选择列表，您不希望启用 用户要输入任何内容，就会看到常规的contenteditable是不够的。 在本文中，我将向您展示一种内容可编辑的jQuery替代方法 Jeditable插件。 此外，在这里我将解释如何实现内嵌编辑功能 一个ASP。NET MVC3应用使用jQuery。的 Jeditable插件使您能够创建 点击并编辑字段如下图所示: 在左侧显示一个简单的HTML页面，在右侧显示这个页面，当您单击文本时。的 文本将被替换为文本区域， 将生成两个保存和取消按钮。当您完成编辑并单击 点击OK按钮，文本区域中的文本将被发送到服务器 页面和新文本将取代旧文本。您可以在实际的示例中看到这一点 在Jeditable演示站点上。 可以轻松定制Jeditable插件(例如，使用文本输入或选择) 列表而不是文本区域， 改变风格/行为，等等)，在文章的其余部分解释。在演示页面上 自定义示例参见具有不同编辑器类型的各种示例。此外，它将处理您与服务器端页面的通信。 背景 Jeditable插件是一个非常有用的插件，它支持对HTML进行内联编辑。使用Jeditable插件，您可以启用应用程序的用户 为了简单地单击他们想要更改的元素并立即修改它，而不需要单独的编辑表单。 Jeditable插件背后的思想是用适当的表单元素替换静态元素，其中 用户可以编辑内容并将其提交到服务器端。 作为示例，让我们假设您在页面中放置了一些静态HTML元素——类似于 以下HTML代码: 隐藏,复制Code

<spanid="txtUser">John Doe</span>

这是一个纯文本字段。你可以让用户点击这个领域和编辑它使用以下JavaScript调用: 隐藏,复制Code

$("#txtUser").editable("/ServerSide/Update");

每次用户单击ID为txtUser的元素时， Jeditable插件将把这个元素转换成一个文本框，并把元素的内容放进去 通过，将一个新值发送到/ServerSide/Update URL 用户按回车时的AJAX调用。如果该值成功保存 在服务器端页面上，Jeditable插件将用新值替换元素的旧值。 Jeditable插件将处理用户界面上的所有交互 您需要做的唯一的事情就是配置插件并实现服务器端逻辑来处理 更改的值。 使用的代码 在这篇文章中，我将解释如何在ASP中使用Jeditable插件。净MVC3应用程序。在下面的部分中，我们将详细描述该模型， 视图，以及将在示例中使用的控制器。 模型 在本例中使用了一个表示公司的简单模型。模型类的源代码如下所示: 隐藏,复制Code

public class Company
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
    public string Town { get; set; }
}

视图 视图是一个标准的Razor页面，它显示公司的详细信息。 隐藏,复制Code

@model JQueryMVCEditable.Models.Company
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Details</h2>
<fieldset>
    <legend>Company</legend>
    <inputtype="hidden"id="CompanyId"value="@Model.ID"/>
    <divclass="field">
        <divclass="display-label"id="lblName">Name</div>
        <divclass="display-field text"id="Name">@Model.Name</div>
    </div>

    <divclass="field">
        <divclass="display-label"id="lblAddress">Address</div>
        <divclass="display-field textarea"id="Address">@Model.Address</div>
    </div>
    <divclass="field">
        <divclass="display-label"id="lblTown">Town</div>
        <divclass="display-field select"id="Country">@Model.Town</div>
    </div>
</fieldset>

控制器 控制器的基本功能是获取company对象(模型)并将其提供给视图。显示有关公司详情的代码如下: 隐藏,复制Code

public class CompanyController : Controller
{
    public string Details(){ ... }
}

为了显示公司详细信息，您需要输入URL /公司/详细信息。控制器中还有两个接受AJAX调用的方法 Jeditable插件(将在下面描述)。 运行此代码后，您将得到如下图所示的标准详细信息页面: 您可能会注意到，这是一个由Visual Studio生成的标准的、无样式的MVC详细信息页面。它包含 一个自定义字段贴上“公司”的标签， 我在这里放了三个公司字段(公司、名称、地址和城镇)和标签。在下一节中，我将向您展示如何进行转换 将静态视图转换为完全可编辑的元素。 应用 Jeditable插件 在本节中，我将向您展示如何在details页面中实现完全内联的可编辑功能。 配置编辑标签 在第一个示例中，我们将使标签可编辑，以便用户可以在页面上直接更改它们。在页面中，每个输入字段都有自己的标签，例如: 隐藏,复制Code

<divclass="display-label"id="lblName">Name</div> 

在页面中，我在表示标签的每个div中放置了一个display-label类。我将使用这个类使标签可编辑。应用的jQuery代码 标签上的Jeditable插件如下所示: 隐藏,复制Code

$(".display-label").editable("/Company/UpdateLabel");

每次单击标签时，它将被转换为文本输入 用户可以为标签输入一个新值。如下图所示: 如你所见，点击标签“Name”，它被转换为文本输入。 当用户按下Enter键时，新标签的一个值将被发送到/Company/UpdateLabel服务器端页面。在请求中会发送两个值: id -标签的id。这个值可以在服务器端用于确定应该更新什么标签。值—在输入字段中输入的文本。 如下图所示为此类请求的示例: 在服务器端应该添加一个带有操作方法的控制器，该控制器将在发送/Company/UpdateLabel请求时被调用。 下面的清单中显示了控制器和动作方法的示例: 隐藏,复制Code

public class CompanyController : Controller
{
    public string UpdateLabel(string id, string value)
    {
        return value;
    }
}

这个操作方法接受标签的ID和一个新值。用于更新的特定代码 数据库或配置文件中的标签值被省略，因为 它是特定于应用程序的，与插件不直接相关。 配置可编辑的字段 我们还可以使字段值可编辑。让我们假定我们已经安排好了 隐藏字段中当前公司的ID, ID为CompanyId， 并且每个字段值都被放在带有display-field类的div中。部分HTML显示在以下代码: 隐藏,复制Code

<inputtype="hidden"id="CompanyId"value="@Model.ID"/>
...
    <divclass="display-field text"id="Name">@Model.Name</div>
...
    <divclass="display-field text"id="Address">@Model.Address</div>
...
    <divclass="display-field text"id="Town">@Model.Town</div>

我们将假设每个应该可编辑的字段都有一个类“display-field”。 将Jeditable插件应用于可编辑对象的jQuery代码 字段如下所示: 隐藏,复制Code

$(".display-field").editable("/Company/UpdateField",
{
  submitdata : { 
                 CompanyId: function() {
                                   return $("#CompanyId").val();
                            },
                 RecordType: "COMPANY"
                }
});

每次点击类可编辑的元素时，它将被转换为文本输入，如下图所示: 当用户按Enter键时，元素的一个新值将被发送到服务器端page /Company/UpdateField。在请求中会发送四个值: id -字段的id。这个值可以在服务器端用于确定应该更新公司的哪些属性。值—在输入字段中输入的文本。CompanyId——这是将添加到请求中的附加参数。 该参数的值是ID为“CompanyId”的隐藏字段的值。RecordType——这是一个附加参数，告诉服务器我们正在编辑公司。 如您所见，该代码与前面的代码非常相似，只是两个附加参数CompanyId和RecordType有所不同。 因为我们编辑的是特定的公司，而不是全局的标签，我们应该在服务器端有 要更改字段值的公司的ID。 我已经将公司的ID放在ID为'CompanyId'的隐藏字段中，并且 Jeditable插件接受这个值，并在请求时将其添加到请求参数中 提交。 此外，有时我们需要知道在服务器端我们是否编辑公司、工作、人员、产品等。 因此，有一些额外的会很好 发送关于我们正在编辑的记录类型的信息的参数。在本例中，这是使用第二个自定义submitdata参数实现的 叫RecordType。服务器端页面将检查此参数的值并更新公司、作业、产品等。 在这个最简单的示例中，我们只有公司，因此不使用该参数。作为替代，您可以对不同的记录使用不同的url 类型(例如，'/Company/UpdateField'， 'Product/UpdateField'， 'Job/UpdateField'等) 如果您不希望有额外的参数。 发送到服务器端的AJAX调用的轨迹如下图所示: 在服务器端应该添加一个带有操作方法的控制器，当 发送/公司/更新字段请求。 下面的清单中显示了控制器和动作方法的示例: 隐藏,复制Code

public class CompanyController : Controller
{
    public string UpdateField(string id, string value, int CompanyId, string RecordType)
    {
        return value;
    }
}

该操作方法接受字段的ID、新值、公司的ID和 我们正在编辑的记录的类型。具体的 更新公司fie的代码数据库中的ld值被省略了，因为它是特定于应用程序的，并且与插件不直接相关。 的配置 Jeditable插件 通过在插件初始化调用中设置不同的选项，可以很容易地更改默认功能。选项在Jeditable调用中被设置为第二个参数。 本节将展示可以应用的不同选项。 定制提交选项 默认情况下，单击元素将启动Jeditable插件并按下 Enter键将被视为接受更改。从元素上失去焦点(模糊) 或按ESC键将被视为取消操作。您可以更改这些选项并添加单独的按钮 接受和取消动作， 它将被注入到文本输入旁边。为了配置提交和取消按钮，你将需要设置这些参数在初始化: 隐藏,复制Code

$(".editable-field").editable("/Company/UpdateField",
{
    cancel    : 'Cancel',
    submit    : 'OK'
});

如果没有设置cancel和submit参数，则不会生成按钮。 更改编辑器类型 文本框是默认编辑器，但是您可以使用选择列表的文本区域作为替代编辑器。为了使用 一个文本区域，而不是文本输入， 你只需要改变参数类型的值，如下面的例子所示: 隐藏,复制Code

$(".textarea").editable("/Company/UpdateField",
{
     type      : 'textarea',
     rows      : 4,
     columns   : 10,
     cancel    : 'Cancel',
     submit    : 'OK',
});

注意，当您使用文本区域输入时，您应该添加一个提交按钮，因为在文本区域中，一个Enter键添加了一个新行，因此它不能用于提交值。 编辑器配置为文本区域的外观如下图所示: 另一种编辑器类型是选择列表，您可以在其中定义一组可能被选择的选项。 下面的清单中显示了一个示例: 隐藏,复制Code

$(".select").editable("/Company/UpdateField",
{
    type      : 'select',
    data      :  "{'Belgrade':'Belgrade','Paris':'Paris',
                  'London':'London', 'selected':'Belgrade'}"
});

在本例中，生成了包含三个值的选择列表。注意，最后一个参数告诉Jeditable插件应该选择哪个值。 代替数据参数中硬编码的值，您可以从服务器端URL加载选项: 隐藏,复制Code

$(".remote-select").editable("/Company/UpdateField",
{
     type      : 'select',
     loadurl   : '/Company/Options',
     loadtype  : 'GET',
     loaddata  : {type: "1"};
});

当用户点击元素时，a /Company/Options?type=1请求将被发送到服务器端使用GET协议。 返回值将作为选择列表中的选项使用。 选择列表编辑器如下图所示: 文本框、文本区域和选择列表是标准的编辑器，但也有其他自定义类型，如复选框、日期拾取器、文件上传、时间编辑器等。 其中一些显示在Jeditable演示页面上。 如果你找不到你需要的编辑器类型，你可以创建你自己的编辑器-看看这个 获取更多细节。 配置提交数据 默认情况下，Jeditable插件将元素的ID和在输入元素中输入的值发送到服务器端URL。 但是，您可以自定义这些设置，如下面的例子所示: 隐藏,复制Code

$("#txtTitle").editable("/Company/UpdateField",
{
    id    : 'COMPANY_FIELD',
    name  : 'FIELD_VALUE',
    method: 'POST',
    submitdata : {type: "company"}
});

额外的选项是: id:包含内容id的提交参数的名称。默认为 Name:提交参数的名称，其中包含编辑过的内容。默认是 价值。方法:提交编辑过的内容时使用的方法。违约。您很可能想使用POST或PUT。submitdata:提交内容时的额外参数。可以是散列，也可以是返回散列的函数。你们看到了 函数用于从隐藏字段中添加公司ID参数。 当Jeditable向服务器端提交请求时，POST请求类似于:/Company/UpdateField?COMPANY_FIELD=Name&FIELD_VALUE=TEST&type= Company。 如您所见，id和值参数具有不同的名称，value被编码，一个名为type的新参数被添加到请求中。 配置显示/行为 可编辑插件的激活方式可以在配置中设置。属性配置 事件和onblur参数: 隐藏,复制Code

$("#txtTitle").editable("/Company/UpdateField",
{
     event    : 'click',
     onblur   : 'submit'
});

参数事件是一个jQuery事件，它将内容转换为可编辑的输入(例如，'click'， 'dblclick，或'mouseover')。 onblur参数可以有这些值中的一个:“取消”、“提交”、“忽略”或者可以设置为 一个函数。这个参数将定义当输入失去焦点时插件会做什么。 您可以更改显示Jeditable的方式。您可以设置样式或关联 带有放置内联编辑器的窗体的CSS类。 如果你放入值‘inherit’，一个来自周围元素的类或样式将被放置在表单中。你还可以定义 编辑器的宽度和高度。 下面的清单中显示了一个示例: 隐藏,复制Code

$("#txtTitle").editable("/Company/UpdateField",
{
     cssclass    : 'inherit',
     style       : 'display:inline',
     height      : '20px',
     width       : '100px'
});

在这个配置中，CSS类将从周围的元素继承， 表单将以内联方式显示，文本框的尺寸为20x100px。 如果当前文本不存在，您还可以定义将显示什么文本，将使用什么作为工具提示文本，以及将显示什么文本/HTML 服务器保存编辑过的值: 隐藏,复制Code

$("#txtTitle").editable("/Company/UpdateField",
{
     placeholder : 'N/A',
     tooltip     : 'Click to edit',
     indicator   : 'Saving...',
     select      : true
     data: function(value, settings) {
              return encode(value);
     },             
});

在这个例子中，如果元素没有任何内容'N/A'将被显示(默认值是'Click to edit')，工具提示将是'Click to edit'。 当插件等待服务器的答案时，文本'Saving…'将显示。如果需要，可以使用HTML代替纯文本。 一旦用户编辑了文本，它将自动高亮显示，因为select属性被设置为true。 参数表示将在编辑器中显示的数据。在前面的示例中，选择编辑器类型在数据元素中 将放置在选择列表中的选项列表。如果您将一个函数作为数据参数，它将在Jeditable获取当前值之前被调用 元素中的文本，此文本将被传递给函数，而返回的值将 设置为编辑器元素的内容。它可以是字符串，也可以是函数 返回一个字符串。当您需要在编辑之前修改文本时(例如，如示例所示对其进行编码)，这将非常有用。 事件处理 许多事件可以在Jeditable插件中处理: callback - function(value, settings){…}在后面调用 表单已提交。值包含提交的表单内容。 设置包含所有插件设置。 在函数内部，这指的是原始元素。onsubmit - function(settings, original){…}在提交之前调用。 设置包含所有插件设置。original是元素的原始内容。内部 这个函数指的是原始元素。onreset - function(settings, original){…}在重置前调用。 设置包含所有插件设置。original是元素的原始内容。内部 函数，这里指的是原始元素。onerror - function(settings, original, xhr){…}错误调用。 设置包含所有插件设置。original是元素的原始内容。内部 函数，这里指的是原始元素。 与其他插件的集成 Jeditable插件的美妙之处在于，它可以应用于任何其他插件之上。例如，你可以在表格单元格中应用内联单元格编辑， 编辑树视图或菜单中的节点，编辑选项卡的内容，等等。你唯一需要做的就是申请 应该编辑的元素上的Jeditable插件。在下面的示例中，您可能会发现两种使用editable plugin的选项卡和表格。与JQuery UI标签的集成选项卡是JQuery UI库的一部分，它使您能够轻松创建选项卡接口。您可以在JQuery UI选项卡页面上找到各种使用情况。选项卡式界面的例子如下图所示:图中每个选项卡是一个链接格式& lt; a href = " # tab-1 "祝辞Nunc tincidunt< / a> & lt; a href = " # tab-2 "祝辞Proin dolor< / a> & lt; a href = " # tab-3 "祝辞Aenean lacinia< / a>, tab-1, tab-2, tab-3 id选项卡的内容。你可以使用以下代码在标签链接上应用可编辑插件:Copy Code

$("#tabs").tabs();
$("a[href='#tabs-1']").editable("/Settings/UpdateTabLabel",
				{  event: "dblclick",
				   submitdata: { id: "tab-1" } 
                                });

Editable插件应用在指向第一个标签的链接上(通过href属性)。当用户双击选项卡链接并编辑选项卡标签时，JEditable插件将向页面/Settings/UpdateTabLabel中发布新的值，其中的值和id为“tab-1”。下图显示了如何编辑第一个选项卡:类似的脚本可以应用于其他选项卡的编辑。与DataTablesJQuery DataTabes插件集成可以在表格中添加分页、过滤和排序。一旦你应用DataTables插件，你就可以在单元格上应用editable插件。在下面的图中，你可以看到Jeditable插件是如何应用在表格单元格上的: 在本例中，将在表中应用jQuery DataTables插件，然后应用JEditable插件 应用于特定单元格。脚本应用可编辑插件的表格单元很简单:隐藏复制code

$("table#mycompanies td").editable("/Company/UpdateTableCell");

，只要每个单元格有自己的id JEditable插件将工作。更好的解决方案是在每个单元格中避免使用id，只发送带有值的行和列的id。在这种情况下，您可以查看DataTables网站上DataTable上的applyng editable插件或结合了DataTables和JEditable插件特性的DataTable editable插件的已经准备好的解决方案。中可以看到关于创建内联可编辑单元格的更多细节 的 ASP。净MVC可编辑 表[^]文章又是; 结论 本文介绍了在MVC3中实现内联编辑器的基本概念。我还展示了各种配置选项。 如果您有任何问题 Jeditable插件，或者您需要更多关于其使用方式的信息， 请查看一下你会找到的Jeditable网站 带有实例的完整文档。 附件是Web Developer 2010项目的源代码，其中实现了一个包含编辑器的简单页面。 本文转载于：http://www.diyabc.com/frontweb/news15841.html