i am bulding web app the text box that is created in runtime and save data in database asp.net mvc - asp.net-mvc-4

Question

Here is the code that i am write it is not working well please check my problem an reply as soon as possible
//HomeController.cs
using checkinsert.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace checkinsert.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
List<Table> ci = new List<Table> {new Table {Id=0,name="",contactno=""} };
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(List<Table> ci)
{
if(ModelState.IsValid){
using(Database1Entities dc= new Database1Entities())
{
foreach(var i in ci)
{
dc.Tables.Add(i);
}
dc.SaveChanges();
ViewBag.Message="Data is Successful inserted";
ModelState.Clear();
ci= new List<Table>{new Table{Id=0,name="",contactno=""}};
}
}
return View(ci);
}
}
}
Here is the Index.cshtml and the problem is that text field are not showing in browser means when we run then there is no text field show
And also check the path of jquery file i feel that there is an problem in the path of j query file because j query file is not running ...
#model List<checkinsert.Models.Table>
#{
ViewBag.Title = "Insert Bulk Data";
}
<div style="width:720px;padding:5px;background-color:white;">
#using (Html.BeginForm("Index","Home",FormMethod.Get))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
if(ViewBag.Message!=null)
{
<div style="border:1px solid green">
#ViewBag.Message
</div>
}
<div><a href="#" id="AddNew" >Add New</a></div>
<table id="dataTable" border="0" >
<tr>
<th>Contact Name</th>
<th>Contact No</th>
</tr>
#if (Model != null && Model.Count > 0)
{
int j = 0;
foreach (var i in Model)
{
<tr style="border:1px solid black">
<td>#Html.TextBoxFor(a=>a[j].name)</td>
<td>#Html.TextBoxFor(a=>a[j].contactno)</td>
<td>
#if(j>0)
{
Remove
}
</td>
</tr>
j++;
}
}
</table>
<input type="submit" value="Save Data" />
}
</div>
#* here is the JQuery code *#
#section Scripts {
#Scripts.Render("checkinsert/jquery-3.0.0.min.js")
<script lang="javascript">
$(document).ready(function () {
$("#addNew").click(function () {
e.preventDefault();
var $tablebody = $("#dataTable");
var $trLast = $tablebody.find("tr:last");
var $trNew = $trLast.clone();
var $suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
$trNew.find("td:last").html('Remove');
$.each($trNew.find(':input'), function (i, val) {
// Replaced Name
var $oldN = $(this).attr('name');
var $newN = $oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
$(this).attr('name',nawN);
//Replaced value
var type = $(this).attr('type');
if (type.toLowerCase == "text")
{
$(this).attr('value', '');
// if you have another type then replaced this "text" with default value
$(this).removeClass("input-validation-error");
}
});
$trLast.after($trNew);
// re-assign validation
var form = $("form")
.removeData("validator")
.removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
});
// 2.remove
$('a.remove').live("click", function (e) {
e.preventDefault();
$(this).parent().parent().remove();
});
});
</script>
}

Answer 1

There are two problem in your code
You don't send model after create it in Get
public ActionResult Index()
{
List<Table> ci = new List<Table> {new Table {Id=0,name="",contactno=""} };
return View(ci);
}
foreach in view, you don't need counter you already in for loop.
#if (Model != null && Model.Count > 0)
{
foreach (var tabel in Model)
{
<tr style="border:1px solid black">
<td>#Html.TextBoxFor(a => tabel.name)</td>
<td>#Html.TextBoxFor(a => tabel.contactno)</td>
<td>
Remove
</td>
</tr>
}
}