javascript – Jquery插件 – 内联编辑..怎么样？

2019-07-30 01:33:20 阅读：184 来源： 互联网

标签：javascript jquery razor asp-net-mvc asp-net-mvc-3

我试图在MVC3和Jquery页面中使用ToggleEdit ..这是链接
http://staticvoid.info/toggleEdit/ …虽然这个页面中有很多演示样本,但我真的不明白如何在View中完成这项工作.我是Jquery和MVC的新手.

第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>

第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>

如何更改此视图代码并使用此Jquery插件.感谢您的帮助.单击行或项中的项(单元格),应激活内联编辑.并保存.

以下是来自源网站的示例示例..如何为我的表格HTML字段实际实现这样的内容？

   $(el).find('input,select').toggleEdit({
events: {
    edit: 'mouseenter'
}
   });

解决方法:

这是我为你写的一个完整的例子,它应该让你走上正轨.

与往常一样,您从视图模型开始：

public class MyViewModel
{
    public string Name { get; set; }
    public string Phone { get; set; }
}

然后控制器填充此视图模型并将其传递给视图：

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

然后是一个视图(〜/ 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>

然后是相应的编辑器模板,它将为我们的视图模型的每个元素呈现(〜/ Views / Home / EditorTemplates / MyViewModel.cshtml)：

@model MyViewModel
<tr>
    <td>@Html.EditorFor(x => x.Name)</td>
    <td>@Html.EditorFor(x => x.Phone)</td>
</tr>

最后我们需要包含的脚本和样式：

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

标签：javascript,jquery,razor,asp-net-mvc,asp-net-mvc-3
来源： https://codeday.me/bug/20190730/1577539.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – Jquery插件 – 内联编辑..怎么样？