Веб-формы: Самый простой способ разрешить пользователю добавлять / удалять текстовые поля? - PullRequest
Новая
       17

Веб-формы: Самый простой способ разрешить пользователю добавлять / удалять текстовые поля?

0 голосов
/ 04 ноября 2011

Я не хочу использовать gridview, потому что остальная часть формы - нет.

Мне просто нужно иметь возможность создать элемент управления для динамического добавления / удаления текстовых полей и возврата значения либо в виде списка объектов, либо в виде строки, разделенной запятой. Это оказывается намного сложнее, чем следовало бы.

Я пытался использовать Jquery + обычное текстовое поле asp.net, но это хорошо работает только тогда, когда они начинают с нуля - предварительное заполнение DOM их информацией становится проблемой.

Есть что-то мучительно простое, что я упускаю?

Ответы [ 3 ]

2 голосов
/ 04 ноября 2011

Похоже, вы могли бы выиграть от создания CompositeControl.

Недавно я ответил на аналогичный вопрос, основанный на динамическом создании текстовых полей, в котором я привел довольно подробный пример.

См .: Динамически добавлять новое текстовое поле при нажатии кнопки

Надеюсь, это поможет.

0 голосов
/ 04 ноября 2011

Есть два пути. Следующее сделано с использованием чистых возможностей WebForm. Никогда не делай этого в производстве. Он использует слишком много viewstate и слишком много панели обновления

это код позади 

    public List<String> ValueContainer {
        get {
            return (List<String>)ViewState["ValueContainer"];
        }
        set {
            ViewState["ValueContainer"] = value;
        }
    }
    protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack) {
            ValueContainer = new List<string>();
        }
    }
    private void PopulateRepeater() {
        rp1.DataSource = ValueContainer;
        rp1.DataBind();
    }

    protected void lbAdd_Click(object sender, EventArgs e) {
        ValueContainer.Add("");
        rp1.DataSource = ValueContainer;
        rp1.DataBind();
    }
    protected void rp1_ItemCommand(Object Sender, RepeaterCommandEventArgs e) {
        ValueContainer.RemoveAt(e.Item.ItemIndex);
        rp1.DataSource = ValueContainer;
        rp1.DataBind();
    }

Вот разметка 

 <asp:ScriptManager runat="server" ID="sm1" />
    <asp:UpdatePanel runat="server" ID="up1">
    <ContentTemplate>
        <asp:Repeater runat="server" OnItemCommand="rp1_ItemCommand" ID="rp1">
            <ItemTemplate>
                <asp:TextBox runat="server" ID="myTextBox" /> <asp:LinkButton Text="Remove" runat="server" ID="lbRemove" />
            </ItemTemplate>
        </asp:Repeater>
        <asp:LinkButton runat="server" ID="lbAdd" onclick="lbAdd_Click" Text="Add" />
    </ContentTemplate>
    </asp:UpdatePanel>

Это более легкая версия 

<asp:HiddenField runat="server" ID="hfMyField" ClientIDMode="Static" />
<script type="text/javascript">
    //<![CDATA[
    function addTextBox() {
        $("#myTextboxesContainer").append($("<input type='text' />").keyup(function () {
            var Data = "";
            $("#myTextboxesContainer input").each(function () {
                Data += $(this).val() + ","; 
            });
            $("#hfMyField").val(Data);
        }));
    }
    //]]>
</script>
<div id="myTextboxesContainer">

</div>
<a href="javascript:;" onclick="addTextBox();">Add textbox</a>

Идея здесь состоит в том, чтобы выполнять все манипуляции с использованием клиентского скрипта и хранить все в скрытом поле. Когда данные отправляются обратно, вы можете получить значение скрытого поля стандартным способом, т.е. hfMyField.Value. В этом примере это CSV.

0 голосов
/ 04 ноября 2011

Вы можете добавить / удалить элементы input [type = text] с помощью jquery, а затем использовать Request.Form в своем коде для получения значений по имени элемента.

JavaScript: 

var itemCount = 0;
$("#list .add").click(function(){ 
  itemCount++;
  $(this).append("<input type='text' name='item"+itemCount+"'/><button class='remove'>Remove</button>");
});

$("#list .remove").click(function(){ 
  $(this).prev().remove();
});

код позади: 

string value1 = Request.Form["item1"];
string value2 = Request.Form["item2"];
...