Jquery plugin - inline editing .. how to?

Question

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. I am new to Jquery and MVC.

Step 1: I referenced the Jquery plug in at the top of the page..

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

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

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

Answer 1

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:

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:

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

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

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