如何将html中的文本框输入值输入到我的控制器

时间:2017-12-19 07:25:38

标签: javascript c# ajax

听到我在单击按钮时写了js函数添加文本框。现在我想把那些文本框输入值和其他文本框输入(用户名,用户地址)输入到我的控制器类。

听到的是我在html page中编写的代码.Pleas帮助我使用post()或ajax在控制器类中编写此代码。

function GetDynamicTextBox(value) {
    return '<div class="form-group"><div  class="col-md-10" ><input name = "DynamicTextBox" class="form-control" type="text"  value = "' + value + '" /></div></div>' +
        '<input type="button" class="btn btn-default" value="Remove" onclick = "RemoveTextBox(this)" />'
}
function AddTextBox() {
    var div = document.createElement('DIV');
    div.innerHTML = GetDynamicTextBox("");
    document.getElementById("TextBoxContainer").appendChild(div);
}

function RemoveTextBox(div) {
    document.getElementById("TextBoxContainer").removeChild(div.parentNode);
}

function RecreateDynamicTextboxes() {
    var values = eval('<%=Values%>');
    if (values != null) {
        var html = "";
        for (var i = 0; i < values.length; i++) {
            html += "<div>" + GetDynamicTextBox(values[i]) + "</div>";
        }
        document.getElementById("TextBoxContainer").innerHTML = html;
    }
}
window.onload = RecreateDynamicTextboxes;

(此代码在点击按钮时添加一个文本框)

    <div class="form-group">
        @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
        </div>
    </div>




    <div class="form-group">
        @Html.LabelFor(model => model.OrganizationID, "OrganizationID", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("OrganizationID", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.OrganizationID, "", new { @class = "text-danger" })
        </div>
    </div>



    <div class="form-group">

        <label class="control-label col-md-2" for="inputdefault">Add URL</label>
        <div class="col-md-10">
            <input class="form-control" id="inputdefault" type="text">
        </div>
    </div>


    <div id="form1" runat="server" class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <div id="TextBoxContainer">
                <!--Textboxes will be added here -->
            </div>
            <input id="btnAdd" type="button" class="btn btn-default" value="Add URl" onclick="AddTextBox()" />
            <br />
            <br />

            <br />
        </div>



    </div>



    <!-- <div class="form-group" >
         <div class="col-md-offset-2 col-md-10" id="div">

             <input id="btnAdd" type="button" value="add" onclick="AddTextBox()" />



            @* <input type="button" value="Add Row" class="btn btn-default" onclick="generateRow()" />*@

         </div>
     </div>-->




    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input id="submitId" type="submit" value="send to controller" class="btn btn-default" />
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

首先,您应该使用表单标记

包装所有HTML表单
<form id="your-form-name">.....your code .....</form>

然后您可以通过执行以下javascript代码来获取所有输入值:

document.getElementById('your-form-name').serialize()

上面的脚本将返回一个输入数组,输入的名称将是索引。