How to dynamically add the textbox inputs to table in mvc

Question

There is a view which conains textboxes after giving the input and on Click of a button the datas entered should be inserted in the table which also in the same view.

Ramesh Palanivel · Answer

Hi Akshaya, After installing your value, just refresh your table. Please find the sample code here, $( "#btnSave" ).click( function () { $.ajax( { type: "POST" , //HTTP POST Method url: "Home/AddEmployee" , // Controller/View data: { //Passing data Name: $( "#txtName" ).val(), //Reading text box values using Jquery City: $( "#txtAddress" ).val(), Address: $( "#txtcity" ).val() }, success: function (data) { BindList(); } }); }); function BindList() { $( "#yourtableid tr" ).remove(); $.ajax( { type: "Get" , //HTTP POST Method url: "Home/List" , // Controller/View }, success: function (data) { var datalen=data.length; for ( var i=0;i { $("#yourtableid tbody ').append(' '+data.Name+' '); } } }); } public ActionResult List() { var data=context.getallrecord(); //get list of records from your entity return Json(data,JsonRequestBehavior.AllowGet); }

Akshaya arumugam · Answer

I want to insert it in the table which should be displayed in the same view.

Ramesh Palanivel · Answer

Hi Akshaya, Use ajax post to save the record.Please refer the sample code here $( "#btnSave" ).click( function () { $.ajax( { type: "POST" , //HTTP POST Method url: "Home/AddEmployee" , // Controller/View data: { //Passing data Name: $( "#txtName" ).val(), //Reading text box values using Jquery City: $( "#txtAddress" ).val(), Address: $( "#txtcity" ).val() }, success: function (data) { alert( "Inserted Successfully" ); } }); });

How to dynamically add the textbox inputs to table in mvc

Answers (3)