jquery插件 - 內聯編輯..如何？

我想在MVC3和Jquery頁面中使用ToggleEdit ..這裏是鏈接 http://staticvoid.info/toggleEdit/ ...雖然本頁面有很多演示示例，但我真的不知道如何在View中進行此項工作。我是Jquery和MVC的新手。jquery插件 - 內聯編輯..如何？

第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：有些怎麼有這個jQuery引發了HTML ..查看。

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

來源

2011-07-19 ZVenue

下面是我爲你寫的一個完整的例子，它應該把你放在正確的軌道上。

與往常一樣，你開始一個視圖模型：

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>

來源

2011-07-19 21:19:25

對不起，我花了一段時間纔看到這..謝謝你的精彩代碼示例..你搖滾達林。 – ZVenue

@ZVenue，它能幫助你解決你的問題嗎？ –

我剛試過。看起來這是我的問題。當頁面加載並且表格被渲染時，它看起來具有可編輯的文本框以開始。我喜歡像單元格那樣牢固的文本，點擊單元格可以編輯。此外，我無法更新記錄..我的意思是保存它。我如何使它通過控制器代碼中的actionmethod來運行保存代碼.. – ZVenue

-1

最好是寫自己的jQuery驗證腳本這是非常容易的，如果你真的想要學會在XXXXXXXXXXXXXXXXX給我發電子郵件，我會把你的腳本發給你，並且會向你解釋你的每一步，在這裏粘貼整個代碼都沒有意義...祝你好運

來源

2011-08-01 19:31:41 Jonathan

jquery插件 - 內聯編輯..如何？

回答

相關問題