0

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

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

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

4

2 回答 2

0

这需要一些 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 表单，当您单击Add时会调用该表单：

<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>

此代码获取您的部分视图（来自当前控制器中的操作New）并将结果添加到ajaxTarget元素中。

注意Ajax 表单需要Unobtrusive Ajax，您可以通过 Nuget: 安装它Install-Package JQuery.Ajax.Unobtrusive。

于 2012-09-12T02:26:21.343 回答
0

与 Web 窗体相比，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">为不会产生不良影响。

于 2012-09-12T01:52:39.770 回答