[英]One-to-many relationship in the create action method
我目前正在從事一個項目,該項目需要為一個客戶端添加多個地址。 我有三種模型:這是我的課程表的鏈接: http : //sdrv.ms/1fWioA2
人物模型:
public class Person
{
public Person()
{
this.Adresses = new HashSet<Address>();
}
public int PersonID { get; set; }
[Required(ErrorMessage = "Name is required")]
public string Name { get; set; }
[Required(ErrorMessage = "Email Address is required")]
[DisplayName("Email Address")]
//[RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}",
//ErrorMessage = "Email is is not valid.")]
[DataType(DataType.EmailAddress)]
public string Email { get; set; }
public string Mobile { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
public virtual ICollection<Address> Adresses { get; set; }
}
地址:
public class Address
{
[HiddenInput(DisplayValue = false)]
public int ID { get; set; }
public string Street { get; set; }
public string Building { get; set; }
public int PersonID { get; set; }
public int CityID { get; set; }
public virtual City City { get; set; }
public virtual Person Person { get; set; }
}
我創建了modelview綁定到我的Create視圖:
public class PersonViewModel
{
public Person Person { get; set; }
public ICollection<Address> Adresses { get; set; }
}
我的問題是如何將視圖模型綁定到創建視圖,以便能夠為同一個人保存多個地址?
為此,請在/Shared/Editor
創建一個名為Address.cshtml
的編輯器模板:
@model Address
<div class="address">
@Html.HiddenFor(model => model.ID)
@Html.HiddenFor(model => model.PersonID)
@Html.HiddenFor(model => model.CityID)
@Html.TextBoxFor(model => model.Street) <br />
@Html.TextBoxFor(model => model.Building ) <br />
</div>
現在,在您的View
,您所需要做的就是:
@Html.EditorFor(v => v.Addresses)
這將創建如下表單字段:
<input type="hidden" name="address[0].Id" />
<input type="hidden" name="address[0].PersonId" />
<input type="hidden" name="address[0].CityId" />
<input type="text" name="address[0].Street" />
<input type="text" name="address[0].Building" />
<input type="hidden" name="address[1].Id" />
<input type="hidden" name="address[1].PersonId" />
<input type="hidden" name="address[1].CityId" />
<input type="text" name="address[1].Street" />
<input type="text" name="address[1].Building" />
模型綁定將看到這些字段符合ASP.Net線格式,並將這些字段的值綁定到地址集合中。 參考: http : //www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx
如果您開始使用Javascript修改字段,請當心。 如果動態添加或刪除地址塊,則必須確保將索引重置為從零開始,並且索引始終增加1。
我建議您使用以剔除為例的客戶端方法:服務器端:
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
var model = new
{
person = new { firstName = "123", secondName = "" },
addresses = new dynamic[1] { new { street = "", building = "", selectedCityId = "" } },
cities = new dynamic[2] { new { cityName = "Kiev", cityId = "1" }, new { cityName = "Moskow", cityId = "2" } }
};
return View(model);
}
public ActionResult Save(YourType model)
{
.....
}
}
和客戶端:
@{
Layout = null;
}
@using Newtonsoft.Json;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div style="margin-left:100px">
<p>First name:</p>
<input data-bind="value:person.firstName" />
<p>Second name:</p>
<input data-bind="value:person.secondName" />
<h3>Addresses</h3>
<div data-bind="foreach:addresses">
<p>
Street
</p>
<input data-bind="value:street" />
<p>
Building
</p>
<input data-bind="value:building" />
<p>
City
</p>
<select data-bind="options: $parent.cities, optionsText:
'cityName',optionsValue:'cityId',
value: selectedCityId , optionsCaption: 'Choose...'"></select>
<div>
<div style="float:left;">
<button data-bind="click:$parent.add">
Add
</button>
</div>
<div style="float:left;">
<button data-bind="click: $parent.remove">
Delete
</button>
</div>
</div>
<div style="clear:both"></div>
</div>
<button style="width:100px"data-bind="click:save">
Save
</button>
</div>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/knockout-3.0.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script type="text/javascript">
//This create javascript object from your model
var personModel=@Html.Raw(JsonConvert.SerializeObject(Model))
//Parse javascript object to knockout viewModel
var viewModel=ko.mapping.fromJS(personModel);
// Create new address
function Address(){
this.selectedCityId=ko.observable("");
this.street=ko.observable("");
this.building=ko.observable("");
}
//Add new address
viewModel.add=function(){
viewModel.addresses.push(new Address());
};
//Remove address
viewModel.remove =function(item){
if(viewModel.addresses().length>1){
viewModel.addresses.remove(item)
}
};
//save model
viewModel.save=function(){
unmapped=ko.mapping.toJSON(viewModel);
$.post('/home/save',unmapped)
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
這里有些鏈接http://blog.stevensanderson.com/2010/07/12/editing-a-variable-length-list-knockout-style/也使用了這種方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.