ASP.NET MVC 3中带有子集合的模型 [英] Model with child collections in ASP.NET MVC 3

查看:109
本文介绍了ASP.NET MVC 3中带有子集合的模型的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试学习来自Web表单背景的ASP.NET MVC 3.我正在尝试找出实现我想要的东西的MVC方式,而实际的困难是我不确定要去谷歌搜索什么!

I'm trying to learn ASP.NET MVC 3 coming from a web forms background. I'm trying to work out what would be the MVC way of implementing what I want, and the actual difficultly is that I am not sure what to google!

我无法理解的是如何使用更复杂的模型. asp.net网站上的所有教程都围绕着相当简单的数据对象展开,因此,也有相当简单的编辑器使用它们来管理数据.

What I can't get my head around is how to work with more complex models. All the tutorials on the asp.net site work around fairly simple data objects, and consequently rather simple editors to manage the data with them.

想象一个假设的聚会预订应用程序的模型:-

Imagine a model for a hypothetical Party booking application:-


public class Party
{
    public string PartyName {get;set;}
    public DateTime PartyDate {get; set; }

    public ICollection<Guest> Guests {get; set;}
}

public class Guest
{
    public string Name {get; set;}
    public string EmailAddress {get; set;}
}

这里的关键是客人的集合.

The key here is the collection of guests.

我想了解如何实现,是如何实现控制器+视图,这将使我能够在单个页面中创建一个Party并同时添加新的Guest(最好是与guest添加/删除ajax中的页内功能).

What I want to understand how to achieve, is how to implement a controller+view which would allow me to create a Party and also add new Guests at the same time, in a single page (and preferably with the guest add/remove functionality in-page in ajax).

在类似asp.net Web表单的应用程序中,直接将来宾的功能放在UpdatePanel中是很简单的.但是我不确定如何在MVC中实现它.

In a similar app in asp.net web forms, it would be straight forward to put the functionality for the guests in an UpdatePanel. But I am not sure how to go about implementing this in MVC.

如果有人有任何技巧,指针或指向讨论类似主题的文章的链接,我将非常感激

If anyone has any tips, pointers, or links to articles that discuss similar topics, i'd be very greatful,

谢谢

滑动

推荐答案

使用jQuery ajax处理添加许多来宾.

Use jQuery ajax to handle adding many guests.

1)使用模型弹出窗口,当您单击添加来宾"按钮时,调用您的Action方法,该方法将在模型对话框中返回用于m的来宾(在此处使用jQuery UI对话框是一种选择) .使用ajax发布调用保存数据.成功事件之一,将新的来宾数据附加到来宾的主要表单列表中,或仅使用jquery load重新加载该部分

1) With a Model Popup When you click on the Add Guest button, Call your Action method which returns the Guest for m in a model dialog ( jQuery UI dialog is one option to use here). Save the data using an ajax post call. One the success event, append the new guest data to the main forms list of guests or reload that part only using jquery load

2)页内添加当您单击添加来宾"按钮时,在主表单本身中,显示表单(您可以通过多种方式从javascript动态创建输入框并保存按钮) .使用jQuery ajax发布保存数据.将数据作为json发送.只要参数名称与ViewModel的属性名称匹配,您的操作方法就可以接受数据

2) Inpage Adding When you click on the Add Guest button, In the main form itself, Show the form ( you can dynamically create input box and save button from javascript in a variety of ways). save the data using a jQuery ajax post. Send the data as a json.As long as the parameter names matches with the property name of your ViewModel, your action method can accept the data

您的HTML页面

<a href="#" id="addNew"> Add Guest</a>

<div id="divForm" style="display:none">
    <input type="text" id="txtName" />
    <input type="text" id="txtEmail" />
    <input type="button" id="btnSaveGuest" value="Save"/>
</div>
<ul>

<div id="divGuests"></div>  

在您的脚本中

$(function(){
  //Show the hidden form
  $("#addNew").click(function(){
      $("#divForm").fadeIn(300);
  }); 

   //Save the new guest details
   $("#btnSaveGuest").click(function() {
     var name=$("#txtName").val();
     var email=$("#txtEmail").val();
     $.ajax({
        url: '@Url.Action("SaveGuest","Guest")',
        data: {Name: name, EmailAddress :email},
       success: function(data) {

        if(data=="true")
        {
          //Saved successfully.May be append to list of Guest
          $("#divGuests").append("<p>"+name+"</p>");
        }
        else
        {
          //Error. Show msg to user
        }
       }
     });
   });
});

您要保存的Action方法

Your Action method to save

[HttpPost]
public ActionResult SaveGuest(Guest objGuest)
{
  try
  {
  // read the objGuest property values and Save to db

   return "true";
  }
  catch(Exception e)
  {
     //Log error
     return "false";
  }
}

这是一个示例应用程序: http://jsfiddle.net/Qzk3F/16/ (某些值在示例中进行了硬编码)

Here is a sample app : http://jsfiddle.net/Qzk3F/16/ (some values are hardcoded in the example)

这篇关于ASP.NET MVC 3中带有子集合的模型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆