Jquery 插件 - 內聯編輯.. 怎么做？

Question

我正在嘗試在 MVC3 和 Jquery 頁面中使用 ToggleEdit .. 這是鏈接http://staticvoid.info/toggleEdit/ ...雖然此頁面中有很多演示示例，但我真的不明白如何使這項工作在視圖中。 我是 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'
}
   });

Answer 1

這是我為你寫的一個完整的例子，它應該讓你走上正軌。

與往常一樣，您從 model 視圖開始：

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

然后是 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);
    }
}

然后是一個視圖（ ~/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>

然后為我們的視圖 model ( ~/Views/Home/EditorTemplates/MyViewModel.cshtml ) 的每個元素呈現相應的編輯器模板：

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

最后是我們需要包含的腳本和 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>

Answer 2

最好自己寫一個 jquery 驗證腳本，很簡單，如果你真的想學，給我留下一個 email 在 XXXXXXXXXXXXXXXXX，我會把腳本發給你，每一步都會解釋給你，在這里粘貼整個代碼沒有意義。 。祝你好運