Notes

@model YourNamespace.YourModel

<!-- Your existing HTML code for the form -->
<table id="experienceTable">
<tr>
<th>Experience Type</th>
<th>Organization Name</th>
<th>Designation</th>
<th>Working From</th>
<th>Working Till</th>
<th>Description</th>
<th>Duration (months)</th>
<th>Add</th>
</tr>
<tr>
<td>
<div class="col-md-20 form-horizontal">
@Html.DropDownListFor(model => model.expType, new SelectList(ViewBag.exp, "value", "text"), " Select", new { @id = "ExpType", @class = "form-control" })
</div>
</td>
<td>
<div class="col-md-10">
@Html.TextBoxFor(model => model.name_org, new { @id = "org", @class = "form-control ", maxlength = 30 })
</div>
</td>
<td>
<div class="col-md-10">
@Html.TextBoxFor(model => model.designation, new { @id = "Designation", @class = "form-control ", maxlength = 20 })
</div>
</td>
<td>
<div class="col-md-12">
@Html.TextBoxFor(model => model.working_from, new { @type = "date", @class = "form-control datepicker", @id = "txtFromDate", maxlength = 10})
</div>
</td>
<td>
<div class="col-md-12">
@Html.TextBoxFor(model => model.working_till, new { @type = "date", @class = "form-control datepicker", @id = "txtToDate", maxlength = 10})
</div>
</td>
<td>
<div class="col-md-10">
@Html.TextBoxFor(model => model.description, new { @id = "Description", @class = "form-control ", maxlength = 50 })
</div>
</td>
<td>
<div class="form-horizontal">
<label style="font-weight:normal; font-size:smaller">(months)</label>
</div>
</td>
<td>
<div style="align-items:center;">
<div style="align-content:center; display:flex; justify-content:center; font-size:small;">
<input type="button" id="addbutton" name="Submit" value="Add" class="btn arrow" />
</div>
</div>
</td>
</tr>
</table>

<!-- Your existing HTML code for the GridView to display data -->
<div id="gridViewDiv">
@* Placeholder for GridView *@
</div>



$(document).ready(function () {
// Add button click event
$("#addbutton").click(function () {
// Retrieve values from form fields
var expType = $("#ExpType").val();
var orgName = $("#org").val();
var designation = $("#Designation").val();
var fromDate = $("#txtFromDate").val();
var toDate = $("#txtToDate").val();
var description = $("#Description").val();

// Append new row to the table with form field values
var newRow = "<tr><td>" + expType + "</td><td>" + orgName + "</td><td>" + designation + "</td><td>" + fromDate + "</td><td>" + toDate + "</td><td>" + description + "</td><td>duration</td><td></td></tr>";
$("#experienceTable").append(newRow);
});
});


using System.Web.Mvc;

public class YourController : Controller
{
// GET: YourController
public ActionResult Index()
{
// Your logic to fetch data from database and pass it to the view
var data = // Retrieve data from database;
return View(data);
}

// POST: YourController/AddData
[HttpPost]
public ActionResult AddData(YourModel model)
{
if (ModelState.IsValid)
{
// Your logic to add data to the database
// For example:
// db.YourTable.Add(model);
// db.SaveChanges();

// Redirect to the Index action after adding data
return RedirectToAction("Index");
}

// If model state is not valid, return to the same view with errors
return View("Index", model);
}
}