[英]Jquery plugin - inline editing .. how to?
I am trying to use ToggleEdit in MVC3 and Jquery page.. here is the link http://staticvoid.info/toggleEdit/ ... although there are lot of demo samples in this page, i really dont understand how to make this work in a View.我正在尝试在 MVC3 和 Jquery 页面中使用 ToggleEdit .. 这是链接http://staticvoid.info/toggleEdit/ ...虽然此页面中有很多演示示例,但我真的不明白如何使这项工作在视图中。 I am new to Jquery and MVC.
我是 Jquery 和 MVC 的新手。
Step 1: I referenced the Jquery plug in at the top of the page..第 1 步:我在页面顶部引用了 Jquery 插件。
<link href="../../Content/themes/base/toggleEdit.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.toggleEdit.min.js" type="text/javascript"></script>
Step 2: Some how have this Jquery triggered in the HTML.. view.第 2 步:一些如何在 HTML.. 视图中触发此 Jquery。
<table>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Phone)
</td>
</tr>
}
</table>
How do I change this view code and make use of this Jquery plug in. Thanks for your help.如何更改此视图代码并使用此 Jquery 插件。感谢您的帮助。 On Click on the row or a item (cell) in the row, inline editing should be activated.
单击行或行中的项目(单元格)时,应激活内联编辑。 And saved.
并得救。
Here is an example of a sample from the source website.. How do I actually implement something like this for my table HTML fields?这是来自源网站的示例示例。我如何为我的表 HTML 字段实际实现类似的东西?
$(el).find('input,select').toggleEdit({
events: {
edit: 'mouseenter'
}
});
Here's a full example that I wrote for you and that should put you on the right track.这是我为你写的一个完整的例子,它应该让你走上正轨。
As always you start with a view model:与往常一样,您从 model 视图开始:
public class MyViewModel
{
public string Name { get; set; }
public string Phone { get; set; }
}
then a controller to populate this view model and pass it to the view:然后是 controller 填充此视图 model 并将其传递给视图:
public class HomeController : Controller
{
public ActionResult Index()
{
// TODO: Fetch from a repository instead of hardcoding
var model = Enumerable.Range(1, 10).Select(x => new MyViewModel
{
Name = "name " + x,
Phone = "phone " + x
});
return View(model);
}
}
then a view ( ~/Views/Home/Index.cshtml
):然后是一个视图(
~/Views/Home/Index.cshtml
):
@model IEnumerable<MyViewModel>
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
@Html.EditorForModel()
</tbody>
</table>
<a id="toggleEdit" href="#">Toggle edit</a>
then the corresponding editor template which will be rendered for each element of our view model ( ~/Views/Home/EditorTemplates/MyViewModel.cshtml
):然后为我们的视图 model (
~/Views/Home/EditorTemplates/MyViewModel.cshtml
) 的每个元素呈现相应的编辑器模板:
@model MyViewModel
<tr>
<td>@Html.EditorFor(x => x.Name)</td>
<td>@Html.EditorFor(x => x.Phone)</td>
</tr>
and finally the scripts and styles that we need to include:最后是我们需要包含的脚本和 styles:
<link href="@Url.Content("~/Content/jquery.toggleEdit.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.toggleEdit.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#toggleEdit').click(function () {
$('table :input').toggleEdit();
return false;
});
});
</script>
it's better to write your own jquery validation script it's very easy, if you really want to learn just leave me a email at XXXXXXXXXXXXXXXXX, i will send you the script and will explain you every step, pasting entire code here will not make sense...good luck最好自己写一个 jquery 验证脚本,很简单,如果你真的想学,给我留下一个 email 在 XXXXXXXXXXXXXXXXX,我会把脚本发给你,每一步都会解释给你,在这里粘贴整个代码没有意义。 。祝你好运
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.