在運行時在mvc3中添加和刪除文本框

Question

在我的頁面中默認有一個文本框，旁邊有一個添加按鈕。當用戶點擊添加按鈕時，我需要添加另一個文本框。並且在新添加的文本框旁邊應該有兩個按鈕Add和Remove。同樣的過程繼續進行，即用戶可以使用添加按鈕添加文本框，並使用刪除按鈕將其刪除。

我是新來的mvc 3所以我很困惑如何繼續。有沒有像asp.net中的佔位符的方式，以便我們可以在運行時添加控件。

任何建議和想法將有助於我

Answer 1

MVC是一個非常「放手」的框架相比，Web窗體，讓你可以自由地添加新的文本框，你怎麼樣。請注意，「控件」在MVC中不存在。

以下是我會做：

型號：

class MyModel { 
    public Boolean AddNewTextBox { get; set; } 
    public List<String> MultipleTextBoxes { get; set; } // this stores the values of the textboxes. 
} 

視圖（我更喜歡Web窗體視圖引擎，我不是剃刀的風扇）：

<% for(int i=0;i<Model.MultipleTextBoxes.Count;i++) { %> 
<%= Html.TextBoxFor(m => m.MultipleTextBoxes[i]) /* this might look like magic to you... */ %> 
<% } %> 
<button type="submit" name="AddNewTextbox" value="true">Add New Textbox</button> 
<button type="submit">Submit form</button> 

控制器：

[HttpPost] 
public ActionResult MyAction(MyModel model) { 
    if(model.AddNewTextBox) model.MultipleTextBoxes.Add("Yet another"); 

    else if(ModelState.IsValid) { 
     // your regular processing 
    } 
} 

你可以還添加更多的文本框與JavaScript和它工作得很好。所有重要的是HTML輸入元素。沒有隱藏的視圖狀態。 MVC是無狀態的。

請注意，因爲我使用了<button type="submit">我的示例在Internet Explorer 6-8中不能可靠地工作（我知道這很糟糕），但是您可以用<input type="submit">替換它們，而不會產生任何不良影響。

Answer 2

這需要一些Javascript/JQuery ...以下是一個草圖，但希望作爲一般方法有用。

• 的刪除按鈕

你想呈現一個按鈕，可以針對自己的容器取出。要做到這一點，使用一些類似這樣的標記：

<div class="item-container"> 
    <input type="button" onclick="removeItem(this)" /> 
</div> 

和JavaScript爲removeItem：

<script> 
    function removeItem(element) { 
     // get the parent element with class "item-container" and remove it from the DOM 
     $(element).find(".item-container").remove(); 
    } 
</script> 

• 的添加按鈕

您既可以使用局部視圖使用Ajax，或使用直接的Javascript;哪一個最有可能取決於您是否需要往返服務器以創建新項目。假設你需要去服務器生成一個新的ID或者其他東西。

首先，創建一個部分視圖和相應的控制器動作;這應該包含刪除按鈕如上，以及文本框和添加按鈕。

現在，創建一個被調用您的主網頁上的Ajax表單當您單擊添加：

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 

@using (Ajax.BeginForm("New", new AjaxOptions() { UpdateTargetId="ajaxTarget", HttpMethod = "GET" })) { 
    <input type='submit' value='Add New' /> 
} 

<div id="ajaxTarget"></div> 

此代碼獲取您的局部視圖（從行動新在當前控制器）和將結果添加到ajaxTarget元素。

_{注意阿賈克斯形式要求不顯眼的Ajax，您可以通過安裝的NuGet：Install-Package JQuery.Ajax.Unobtrusive。}