In MVC How To Add or Update Multiple Rows And Save With One Button Save Click ?

You can use an EditorTemplates for this. The below example shows the normal form posting example. You can ajaxify it if you need by using the serialize method and sending form values.

Assuming You need to Edit the List of Student Names for a course. So Let's create some viewmodels for that

public class Course
{
public int ID { set;get;}
public string CourseName { set;get;}
public List<student> Students { set;get;}

public Course()
{
Students=new List<student>();
}
}
public class Student
{
public int ID { set;get;}
public string FirstName { set;get;}
}
Now in your GET action method, you create an object of our view model, initialize the Students collection and send it to our strongly typed view.

public ActionResult StudentList()
{
Course courseVM=new Course();
courseVM.CourseName="Some course from your DB here";

//Hard coded for demo. You may replace this with DB data.
courseVM.Students.Add(new Student { ID=1, FirstName="Jon"});
courseVM.Students.Add(new Student { ID=2, FirstName="Scott"});
return View(courseVM);
}
Now Create a folder called EditorTemplates under Views/YourControllerName. Then create a new view under that called Student.cshtml with below content

@model Student
@{
Layout = null;
}

@Html.HiddenFor(x => x.ID)
@Html.TextBoxFor(x => x.FirstName ) Now in our main view (StudentList.cshtml), Use EditorTemplate HTML helper method to bring this view.

@model Course

@Model.CourseName

@using(Html.Beginform())
{

@Html.EditorFor(x=>x.Students)


}
This will bring all the UI with each of your student name in a text box contained in a table row. Now when the form is posted, MVC model binding will have all text box value in the Students property of our viewmodel.

[HttpPost]
public ActionResult StudentList(Course model)
{
//check for model.Students collection for each student name.
//Save and redirect. ((PRG pattern)
}
This post has a similar MVC program which uses editor template and handles the form posting similar to the above example. You may check the sample sourcecode in the post for reference.

Ajaxified solution

If you want to Ajaxify this, you can listen for the submit button click, get the form and serialize it and send to the same post action method. Instead of redirecting after saving, you can return some JSON which indicates the status of the operation.

$(function(){
$("#btnSave").click(function(e){
e.preventDefault(); //prevent default form submit behaviour
$.post("@Url.Action("StudentList",YourcontrollerName")",
$(this).closest("form").serialize(),function(response){
//do something with the response from the action method,
});
});
});