在运行时在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。}