在MVC4中，如何一次保存多行修改？

我能找到的MVC4應用程序的每個示例都具有一次處理一行數據的編輯功能。它顯示所有數據行，每行都有一個編輯，它會將您帶到另一個頁面，並允許您編輯該行。在MVC4中，如何一次保存多行修改？

我想要做的是在行中顯示所有數據元素，而不必讓用戶在每一行上單擊編輯，所有行的數據點將已經在用戶可以直接更新的文本框中。並且頁面上只有一個SAVE，可以一次保存所有更新/編輯。

如何設置我的MVC應用程序來支持它？

來源

2012-11-20 dan27

您是在尋找一個發送更新的回傳或ajax模型？ – Heather

我想我現在正在尋找最簡單的...因爲我只是在學習MVC4。假設這將是回發。但我可以使用任何一種模型。謝謝 – dan27

爲此，您可以使用EditorTemplates。以下示例顯示了常規表單發佈示例。如果您需要使用serialize方法併發送表單值，則可以將其加入。

假設您需要編輯課程的學生姓名列表。所以，讓我們創建一些的ViewModels爲

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;} 
}

現在，在您GET操作方法，創建我們認爲模型的對象，初始化Students收集併發送至我們的強類型視圖。

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); 
}

現在創建一個名爲EditorTemplates下查看/ YourControllerName文件夾。然後創建下調用Student.cshtml一個新的觀點與以下內容

@model Student 
@{ 
    Layout = null; 
} 
<tr> 
<td> 
    @Html.HiddenFor(x => x.ID) 
    @Html.TextBoxFor(x => x.FirstName) </td> 
</tr>

現在我們的主要觀點（StudentList.cshtml），使用EditorTemplate HTML輔助方法來把這個觀點。

@model Course 
<h2>@Model.CourseName</h2> 
@using(Html.BeginForm()) 
{ 
    <table> 
    @Html.EditorFor(x=>x.Students) 
    </table> 
    <input type="submit" id="btnSave" /> 
}

這會將包含在表格行中的文本框中的每個學生名稱帶到所有UI中。現在，當表單發佈時，MVC模型綁定將具有我們視圖模型的Students屬性中的所有文本框值。

[HttpPost] 
public ActionResult StudentList(Course model) 
{ 
    //check for model.Students collection for each student name. 
    //Save and redirect. (PRG pattern) 
}

Ajax化的解決方案

如果你想Ajaxify這一點，你可以聽的提交按鈕點擊，獲取表單和序列化和發送到同一個崗位的操作方法。保存後不要重定向，您可以返回一些表示操作狀態的JSON。

$(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 
    }); 
    }); 
});

來源

2012-11-20 23:28:57 Shyju

好的解決方案。編輯模板是最好的方法，但它*會將新手引入深層。這是一個救生員:(基本編輯器模板：http：//coding-in.net/asp-net-mvc-3-how-to-use-editortemplates/）。高級：Hanselman的文章編輯模板（http://www.hanselman.com/blog/ASPNETMVCDisplayTemplateAndEditorTemplatesForEntityFrameworkDbGeographySpatialTypes.aspx） – Heather

謝謝，我會給這個鏡頭 – dan27

好的，這是非常好的。問題：如果您的Student類具有GenderId元素並且是使用int GenderId字符串GenderName的Gender類的外鍵，那該怎麼辦？我想在表單中顯示/編輯GenderName，以便更方便用戶，但更新genderid。我可以顯示性別名，但是每當我更新它時，就會返回null。我是否需要嵌套EditorTemplates？ – dan27

您只需要指定正確的模型，示例列表，併發送帶有每行（數組元素）信息的ajax，然後在服務器端讀取並相應地更新每個元素。爲了這個目標，你使用Post請求。只需將元素列表作爲參數傳遞給控制器並使用ajax傳遞它即可。

例如，你控制器可以定義爲：

public ActionResult Update(List<MyEntity> list) 
{ 
... 
} 
public class MyEntity 
{ 
public string Name {get; set;} 
public int Count {get; set;} 
}

和JavaScript可能是因爲：

var myList = new Array(); 
// fill the list up or do something with it. 

$.ajax(
{ 
    url: "/Update/", 
    type: "POST", 
    data: {list: myList} 
} 
);

當然，你的「保存」按鈕都有單擊事件處理程序將調用該功能用ajax調用。

爲了您的方便，您可以考慮使用KnockoutJS或其他MVVM框架將數據與客戶端的DOM綁定。

來源

2012-11-20 23:19:51 Kath

在MVC4中，如何一次保存多行修改？

回答

相關問題