ASP.NET MVC generate post forms

Question

I'm just looking for a problem in MVC, that is, I want 2 input text boxes in which user will enter number of rows and columns. After entering, the user will press the generate button and the required number of text boxes will be generated on the next action method. For example, if the user enters 2 rows and 3 columns then after submit the second form will contain 6 text boxes in tabular form and most importantly there should be a submit button through which I can get the values from all 6 text boxes in the POST action.

Here is my code

Model:

    [Required]
    [Display(Name = "Rows")]
    [Range(1, 10, ErrorMessage = "Number of Rows must be between 1 to 10")]
    public int NumberofRows { get; set; }

    [Required]
    [Display(Name = "Columns")]
    [Range(1, 4, ErrorMessage = "Number of Columns must be between 1 to 4")]
    public int NumberofColumns { get; set; }

    public List<int> EnteredNumberRows { get; set; }
    public List<int> EnteredNumberColumns { get; set; }

Controller:

/*Index action is one, in which the number of rows and columns are displayed. After entering number of rows and columns it redirects it to the Enter action containing required number of rows and columns*/
public class HomeController : Controller
{
    DataMineModel homeDataMineModel = new DataMineModel();
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(DataMineModel model)
    {
        TempData["NumofRows"] = model.NumberofRows;
        TempData["NumofColumns"] = model.NumberofColumns;

        return RedirectToAction("Enter");
    }

    public ActionResult Enter()
    {
        homeDataMineModel.EnteredNumberRows = new List<int>((int)TempData["NumofRows"]);
        homeDataMineModel.EnteredNumberColumns = new List<int>((int)TempData["NumofColumns"]);

        return View(homeDataMineModel);
    }

    [HttpPost]
    public ActionResult Enter(DataMineModel viewModel)
    {

        return View();
    }
}

View:

Index:

@using (Html.BeginForm()) 
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <br />
    <h4>Please enter the number of Rows and Columns.</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.NumberofRows, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.NumberofRows, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.NumberofRows, "", new { @class = "text-danger" })
        </div>
    </div>

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

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Enter" class="btn btn-success" />
        </div>
    </div>
</div>
  }

Enter:

@using (Html.BeginForm("Enter", "Home", FormMethod.Post))
{
<div class="row">
    @for (int i = 0; i < Model.EnteredNumberColumns.Capacity; i++)
    {
        <div class="col-md-3">
            <div class="row">
                @for (int k = 0; k < Model.EnteredNumberRows.Capacity; k++)
                {
                    <br />
                        <input type="text" class="form-control" name="name" value="" />
                    <br />
                }
            </div>
        </div>
    }
</div>

     <input type="submit" class="btn btn-success" value="Classify the data"    />
   }

Thanks.

Have you tried adding a form tag in the HTML, then looping through the required number of rows and columns to add input elements dynamically? — Karl Gjertsen, Nov 25 '15 at 10:26
BTW: This isn't a problem in MVC but in Javascript. Karl pointed you in the right direction. You only need to make sure that your controller accepts data in the right form. You most probably want to send the data as an array of arrays. — Rob, Nov 25 '15 at 10:39
I've updated the post you can see the problem is I'm not getting entered values in the POST action. Please tell me also about which Razor Input control is to put in place of element. — Janshair Khan, Nov 25 '15 at 17:09

score 0 · Accepted Answer · answered Nov 25 '15 at 11:05

as suggested by Robert, this ain't a problem for MVC. You can write some JS to get user input and generate HTML tables as per the inputs. Your JS should be somewhat as:

$("body").on("change", "#coaLevelInput", function () {

        var l = $(this).val();
        var ht= "";
        for (var i = 1; i <= l ; i++)
        {
            ht= ht + "<div .... here you should set your CSS classes'>Code Lenght at Level" + i + "</label><span class=''><input class=''></span></div></div>";

        }
        $("#coaInputs").html(ht);

    });

ASP.NET MVC generate post forms

1 Answers1

Linked