Question

在我的页面中，默认情况下有一个文本框，旁边有一个添加按钮。当用户单击“添加”按钮时，我需要添加另一个文本框。在新添加的文本框旁边应该有两个按钮添加和删除。同样的过程继续进行，即用户可以使用“添加”按钮添加文本框，并使用“删除”按钮将其删除。

我是mvc 3的新手，所以我很困惑如何继续。有什么方法像asp.net中的占位符，以便我们可以在运行时添加控件。

任何建议和想法对我都有帮助

Answer 1

与Web Forms相比，MVC是一个非常“不干涉”的框架，因此您可以随意添加新的文本框。请注意，MVC中不存在“控件”。

我是这样做的：

型号：

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

查看（我更喜欢Web窗体视图引擎，我不是Razor的粉丝）：

<% 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">替换它们而不会产生任何不良影响。< / p>

Answer 2

这需要一些Javascript / JQuery ......以下仅是草图，但希望作为一般方法有用。

删除按钮

您想渲染一个可以定位自己的容器以进行删除的按钮。为此，请使用以下标记：

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

removeItem的Javascript：

<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表单需要 Unobtrusive Ajax ，您可以通过Nuget安装：Install-Package JQuery.Ajax.Unobtrusive。

在mvc3中在运行时添加和删除文本框

2 个答案: