Asp.net mvc ASP.NET MVC主详细信息输入表单
我正在尝试使用ASP.NETMVC实现订单输入表单,但面临很多困难。我找到的所有示例都与查看主详细信息表单有关,没有用于添加或编辑的示例 假设我有两个表:Order和OrderLines,它们以一对多的关系相互关联。在主视图中,我单击时有一个“New”(新建)按钮,它应该显示一个由订单字段组成的新订单视图,一个显示订单行的网格,以及一个“Save”(保存)按钮,当单击该按钮时,将整个订单及其行保存到数据库中。网格应有三个按钮:“添加行”、“编辑行”和“删除行”。单击“添加行”时,应显示一个新视图,允许用户将该行添加到订单视图网格行中–在此阶段,数据库不受影响-。当用户单击“编辑行”时,将显示一个视图,允许用户编辑所选行,并在完成后更新订单网格线 最困难的问题是: 如何在订单视图和订单行视图之间传递订单及其行集合 如何根据订单行视图中的更改更新订单视图 以及如何在不涉及数据库的情况下保持视图之间的更改 有没有一个具体的例子来说明如何使用MVC实现这一点Asp.net mvc ASP.NET MVC主详细信息输入表单,asp.net-mvc,forms,master-detail,data-entry,Asp.net Mvc,Forms,Master Detail,Data Entry,我正在尝试使用ASP.NETMVC实现订单输入表单,但面临很多困难。我找到的所有示例都与查看主详细信息表单有关,没有用于添加或编辑的示例 假设我有两个表:Order和OrderLines,它们以一对多的关系相互关联。在主视图中,我单击时有一个“New”(新建)按钮,它应该显示一个由订单字段组成的新订单视图,一个显示订单行的网格,以及一个“Save”(保存)按钮,当单击该按钮时,将整个订单及其行保存到数据库中。网格应有三个按钮:“添加行”、“编辑行”和“删除行”。单击“添加行”时,应显示一个新视图
非常感谢您的帮助和反馈。您可以尝试Telericks免费MVC网格控制
与WebForms不同,ASP.NET MVC不会试图隐藏HTTP的无状态特性。要跨多个窗体处理复杂对象,您有两个选项:
- 每次更改时将对象保存在服务器上,以便仅使用id即可使用更新的对象
- 使用jquery填充订单行表单并将详细信息保存到主表单
我通常自己使用客户端选项,主窗体具有隐藏字段,用于将在子窗体中编辑的数据。不过,您可能会发现服务器端选项更简单—如果您真的不想涉及数据库,您可以在会话中保留部分更新的对象。就在我的脑海中(一种大脑转储)
- 您可以在表单中使用主网格部分。这将是从操作加载的完整视图(使用订单号或不使用订单号取决于是否加载现有订单号)
- 单击事件(新建或编辑)时,可能会以“lightbox”样式打开局部视图。然后将json对象传回主窗体
- 然后,传递的json对象将使用模板呈现到表的底部(对于新对象)或更新现有记录。这也可以在同一个ajax调用中保存回服务器。或者只是更新客户端并需要用户单击保存按钮
- 需要一个isDirty标志,以便任何更改都将其设置为true,并在浏览器尝试离开或关闭时设置为等。然后,您可以提示用户保存或不保存
没有尝试过这个,但可能会对您问题的无数据库方面感兴趣请查看我关于在asp.net mvc中创建主详细信息表单的介绍。它还包含您可以下载的演示项目步骤1:创建视图模型
public class OrderVM
{
public string OrderNo { get; set; }
public DateTime OrderDate { get; set; }
public string Description { get; set; }
public List<OrderDetail> OrderDetails {get;set;}
}
您可以和步骤3:创建保存数据的操作。 [HttpPost]
public JsonResult SaveOrder(OrderVM O)
{
bool status = false;
if (ModelState.IsValid)
{
using (ManageMobileStoreWebContext dc = new ManageMobileStoreWebContext())
{
//Random rnd = new Random();
//OrderID = rnd.Next(),
Order order = new Order { OrderNo = O.OrderNo, OrderDate = O.OrderDate, Description = O.Description };
foreach (var i in O.OrderDetails)
{
if(order.OrderDetails == null)
{
order.OrderDetails = new List<OrderDetail>();
}
// i.TotalAmount =
order.OrderDetails.Add(i);
//dc.OrderDetails.Add(i);
}
dc.Orders.Add(order);
dc.SaveChanges();
status = true;
}
}
else
{
status = false;
}
return new JsonResult { Data = new { status = status } };
}
publicjsonresult保存顺序(OrderVM-O)
{
布尔状态=假;
if(ModelState.IsValid)
{
使用(ManageMobileStoreWebContext dc=new ManageMobileStoreWebContext())
{
//随机rnd=新随机();
//OrderID=rnd.Next(),
订单号=新订单{OrderNo=O.OrderNo,OrderDate=O.OrderDate,Description=O.Description};
foreach(O.OrderDetails中的变量i)
{
if(order.OrderDetails==null)
{
order.OrderDetails=新列表();
}
//i.总金额=
order.OrderDetails.Add(i);
//dc.OrderDetails.Add(i);
}
dc.Orders.Add(订单);
dc.SaveChanges();
状态=真;
}
}
其他的
{
状态=假;
}
返回新的JsonResult{Data=new{status=status};
}
谢谢。我想我没有把我的问题说清楚!我不是在找控制。我需要知道当我在ASP.NET MVC中有一个主详细信息输入表单时,不同的视图是如何交互的。。。。我试图提供一个解决方案。。。。控件解决了您描述的许多问题。我想Emad希望完全控制代码,我在寻找相同的答案,我不想使用Telerik,对于MVC,我不想结束与控件的捆绑,被迫按照控件希望的方式编程,就像在webforms中一样,我想“自由”这一次。Devexpress还有一个网格控件,具有主/细节功能,但是Telerik和DevEx网格控件主/细节示例不需要查看,也不需要添加或编辑。谢谢。您可以提供一个使用JQuery方法的简短示例吗?
$(function () {
$('#orderDate').datepicker({
dateFormat : 'mm-dd-yy'
});
});
$(document).ready(function () {
var orderItems = [];
//Add button click function
$('#add').click(function () {
//Check validation of order item
var isValidItem = true;
if ($('#itemName').val().trim() == '') {
isValidItem = false;
$('#itemName').siblings('span.error').css('visibility', 'visible');
}
else {
$('#itemName').siblings('span.error').css('visibility', 'hidden');
}
if (!($('#quantity').val().trim() != '' && !isNaN($('#quantity').val().trim()))) {
isValidItem = false;
$('#quantity').siblings('span.error').css('visibility', 'visible');
}
else {
$('#quantity').siblings('span.error').css('visibility', 'hidden');
}
if (!($('#rate').val().trim() != '' && !isNaN($('#rate').val().trim()))) {
isValidItem = false;
$('#rate').siblings('span.error').css('visibility', 'visible');
}
else {
$('#rate').siblings('span.error').css('visibility', 'hidden');
}
//Add item to list if valid
if (isValidItem) {
orderItems.push({
ItemName: $('#itemName').val().trim(),
Quantity: parseInt($('#quantity').val().trim()),
Rate: parseFloat($('#rate').val().trim()),
TotalAmount: parseInt($('#quantity').val().trim()) * parseFloat($('#rate').val().trim())
});
//Clear fields
$('#itemName').val('').focus();
$('#quantity,#rate').val('');
}
//populate order items
GeneratedItemsTable();
});
//Save button click function
$('#submit').click(function () {
//validation of order
var isAllValid = true;
if (orderItems.length == 0) {
$('#orderItems').html('<span style="color:red;">Please add order items</span>');
isAllValid = false;
}
if ($('#orderNo').val().trim() == '') {
$('#orderNo').siblings('span.error').css('visibility', 'visible');
isAllValid = false;
}
else {
$('#orderNo').siblings('span.error').css('visibility', 'hidden');
}
if ($('#orderDate').val().trim() == '') {
$('#orderDate').siblings('span.error').css('visibility', 'visible');
isAllValid = false;
}
else {
$('#orderDate').siblings('span.error').css('visibility', 'hidden');
}
//Save if valid
if (isAllValid) {
var data = {
OrderNo: $('#orderNo').val().trim(),
OrderDate: $('#orderDate').val().trim(),
//Sorry forgot to add Description Field
Description : $('#description').val().trim(),
OrderDetails : orderItems
}
$(this).val('Please wait...');
$.ajax({
url: '/Home/SaveOrder',
type: "POST",
data: JSON.stringify(data),
dataType: "JSON",
contentType: "application/json",
success: function (d) {
//check is successfully save to database
if (d.status == true) {
//will send status from server side
alert('Successfully done.');
//clear form
orderItems = [];
$('#orderNo').val('');
$('#orderDate').val('');
$('#orderItems').empty();
}
else {
alert('Failed');
}
$('#submit').val('Save');
},
error: function () {
alert('Error. Please try again.');
$('#submit').val('Save');
}
});
}
});
//function for show added items in table
function GeneratedItemsTable() {
if (orderItems.length > 0) {
var $table = $('<table/>');
$table.append('<thead><tr><th>Item</th><th>Quantity</th><th>Rate</th><th>Total</th></tr></thead>');
var $tbody = $('<tbody/>');
$.each(orderItems, function (i, val) {
var $row = $('<tr/>');
$row.append($('<td/>').html(val.ItemName));
$row.append($('<td/>').html(val.Quantity));
$row.append($('<td/>').html(val.Rate));
$row.append($('<td/>').html(val.TotalAmount));
$tbody.append($row);
});
$table.append($tbody);
$('#orderItems').html($table);
}
}
});
</script>
[HttpPost]
public JsonResult SaveOrder(OrderVM O)
{
bool status = false;
if (ModelState.IsValid)
{
using (MyDatabaseEntities dc = new MyDatabaseEntities())
{
Order order = new Order { OrderNo = O.OrderNo, OrderDate = O.OrderDate, Description = O.Description };
foreach (var i in O.OrderDetails)
{
//
// i.TotalAmount =
order.OrderDetails.Add(i);
}
dc.Orders.Add(order);
dc.SaveChanges();
status = true;
}
}
else
{
status = false;
}
return new JsonResult { Data = new { status = status} };
}
public JsonResult SaveOrder(OrderVM O)
{
bool status = false;
if (ModelState.IsValid)
{
using (ManageMobileStoreWebContext dc = new ManageMobileStoreWebContext())
{
//Random rnd = new Random();
//OrderID = rnd.Next(),
Order order = new Order { OrderNo = O.OrderNo, OrderDate = O.OrderDate, Description = O.Description };
foreach (var i in O.OrderDetails)
{
if(order.OrderDetails == null)
{
order.OrderDetails = new List<OrderDetail>();
}
// i.TotalAmount =
order.OrderDetails.Add(i);
//dc.OrderDetails.Add(i);
}
dc.Orders.Add(order);
dc.SaveChanges();
status = true;
}
}
else
{
status = false;
}
return new JsonResult { Data = new { status = status } };
}