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

2022-08-30 16:53:38

下载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

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

码农公寓

相关文章