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

Question

Hear I wrote js function to add text box when clicking a button.So now I want get those text box input values and other text box inputs(user name,user Address) to my controller class.

hear is the code i wrote in html page.Pleas help me to write this code in controller class using post() or 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;

(this code is add a text box when click button)

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

Answer 1

First you should wrap all your HTML form with a form tag

<form id="your-form-name">.....your code .....</form>

and then you can get all your input value by executing below javascript code:

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

The above script will return an array of your inputs, the input's name will be the index.