MVC3 - 動態轉換LabelFor到TextBoxFor

Question

我有一個MVC格式，用戶將通過填寫字段（TextBoxFor的和TextAreaFor的混合物）完成。該表單將被提交併保存到數據庫中。然後

用戶將必須使用的幾個按鈕一個在日後更新形式的選項。其中：

• 修改詳細信息 - 允許用戶更改以前完成的任何字段的詳細信息。
• 添加詳細信息 - 填寫以前留空的字段。

當希望更新他們的詳細資料，採取由用戶的動作是：

1. 當用戶第一次打開自己的形式，以更新的詳細信息，查看將使用DisplayFor目前的所有細節。所有字段都被鎖定以進行編輯。

2. 如果用戶點擊，例如，「修改詳細信息」按鈕，它們然後與含有複選框一個彈出框呈現;每個領域已經完成的日期之一。

3. 用戶選擇與他們希望更改的字段相對應的複選框，然後單擊「更新」按鈕時，彈出窗口將關閉，窗體重新聚焦。

4. 用戶已選擇更新的字段現在已經從DisplayFor改爲TextBoxFor允許進行編輯。

這個過程的第4步是我遇到了麻煩。我發現有幾種方法可以通過jQuery來完成，您可以在其中將輸入標記從一個更改爲另一個。例如：jQuery: Change element type from hidden to input

是否有我可以做這樣在頭腦裏的MVC輸入標籤轉換的任何方式：

marker = $('<span />').insertBefore('#myInput'); 
$('#myInput').detach().attr('type', 'text').insertAfter(marker).focus(); 
marker.remove(); 

來自？

Answer 1

服務器端技術和客戶端技術的混合在此限制了您的使用。您需要確保最初有一個表單輸入類型 - 這意味着要麼是HiddenFor元素，要麼是最初隱藏的常規TextBoxFor元素。

你舉的例子使用前者，但你的情況我會向後者傾斜爲簡單一點。在窗體上放置兩個標籤和文本框，與文本框最初是隱藏的：

<div> 
    @Html.DisplayFor(model => model.SomeField) 
</div> 
@Html.TextBoxFor(model => model.SomeField, new { style = "display:none" }) 

現在，當用戶點擊編輯的字段，你可以簡單地隱藏一個，並顯示其他：

$("input[name=SomeField]").show().prev().hide(); 

你可以使用一個輔助功能，使得現場編輯，給出的字段的名稱：

function makeEditable(fieldName) { 
    $("input[name=" + fieldName + "]").show().prev().hide(); 
} 

所以，一旦你有用戶已選中的字段列表，所有你需要是的循環並調用上述幫助函數：

var fieldsToEdit = [ "SomeField", "AnotherField" ]; 
fieldsToEdit.forEach(makeEditable);