在MVC中如何添加或更新多行并使用一个按钮保存保存单击？ [英] In MVC How To Add or Update Multiple Rows And Save With One Button Save Click ?

问题描述

如何添加或更新多行并使用一个按钮保存保存点击？



我希望能够添加或编辑多行然后当我按下保存时按钮，所有更改将出现在数据库中：）

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

I want to be able to add or edit multiple rows then when i press save button , All changes will appear in The DataBase :)

推荐答案

您可以使用EditorTemplates进行此操作。以下示例显示了正常的表单发布示例。如果需要，您可以使用序列化方法和发送表单值来解析它。



假设您需要编辑课程的学生姓名列表。所以让我们为它创建一些视图模型



公共课课程

{

public int ID {set; get ;}

公共字符串CourseName {set; get;}

public List< student>学生{set; get;}



公共课程（）

{

学生=新名单<学生> ;（）;

}

}

公共班级学生

{

public int ID {set; get;}

public string FirstName {set; get;}

}

现在在你的GET动作方法中，你创建了我们的视图模型的对象，初始化Students集合并将其发送到我们的强类型视图。



public ActionResult StudentList（）

{

课程courseVM =新课程（）;

courseVM.CourseName =你的数据库中的某些课程;



//用于演示的硬编码。你可以用DB数据替换它。

courseVM.Students.Add（新学生{ID = 1，FirstName =Jon}）;

courseVM.Students.Add （新学生{ID = 2，FirstName =Scott}）;

返回查看（courseVM）;

}

现在创建一个在Views / YourControllerName下名为EditorTemplates的文件夹。然后在下面的内容下创建一个名为Student.cshtml的新视图



@model学生

@ {

布局= null;

}



@ Html.HiddenFor（x => x.ID）

@ Html.TextBoxFor（x => x.FirstName）现在在我们的主视图（StudentList.cshtml）中，使用EditorTemplate HTML帮助方法来显示此视图。



@model课程

@ Model.CourseName

@using（Html.Beginform（））

{< br $>


@ Html.EditorFor（x => x.Students）





}

这会将带有每个学生姓名的所有用户界面放在一个包含在表格行中的文本框中。现在，当表单发布时，MVC模型绑定将在我们的视图模型的Students属性中具有所有文本框值。



[HttpPost]

public ActionResult StudentList（课程模型）

{

//检查每个学生姓名的model.Students集合。

//保存和重定向。 （（PRG模式）

}

这篇文章有一个类似的MVC程序，它使用编辑器模板并处理类似于上面例子的表单发布。你可以查看示例源代码在帖子中供参考。



Ajaxified解决方案



如果你想Ajax化这个，你可以听单击提交按钮，获取表单并序列化并发送到相同的post action方法。保存后不再重定向，而是返回一些表示操作状态的JSON。

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（）{

(function(){

（＃btnSave）。click（function（e）{

e.preventDefault（）; //防止默认表单提交行为

("#btnSave").click(function(e){
e.preventDefault(); //prevent default form submit behaviour

这篇关于在MVC中如何添加或更新多行并使用一个按钮保存保存单击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！