C# 使用Razor视图在Asp.net Mvc中动态添加和编辑数据
我是MVC新手。使用脚手架机制，我成功地在数据库表上创建了CRUD操作。这在一次处理单个MVC模型（映射到单个模型）时效果很好。我想实现向数据库中添加和编辑列表（最初将是空列表），用户应该能够根据需要添加任意数量的项目，然后将数据提交到数据库。我希望这个列表具有动态长度，这样当用户编辑数据时，他应该能够向模型中添加更多的新元素，同时删除几个单独的模型。我找不到合适的资源来提出解决方案。很少的帮助会很感激 场景-一个人可以有多个地址，或者他将没有任何地址。如何通过向视图中添加地址来添加多个地址，以及如何对这些地址执行编辑？如果其中一个地址需要删除，那么如何删除 多谢各位 以下是我的观点：C# 使用Razor视图在Asp.net Mvc中动态添加和编辑数据,c#,asp.net-mvc,razor,dapper,C#,Asp.net Mvc,Razor,Dapper,我是MVC新手。使用脚手架机制，我成功地在数据库表上创建了CRUD操作。这在一次处理单个MVC模型（映射到单个模型）时效果很好。我想实现向数据库中添加和编辑列表（最初将是空列表），用户应该能够根据需要添加任意数量的项目，然后将数据提交到数据库。我希望这个列表具有动态长度，这样当用户编辑数据时，他应该能够向模型中添加更多的新元素，同时删除几个单独的模型。我找不到合适的资源来提出解决方案。很少的帮助会很感激 场景-一个人可以有多个地址，或者他将没有任何地址。如何通过向视图中添加地址来添加多个地址，以
@model MVC.Models.PersonDetailsViewModel
@{
ViewBag.Title = "AddorEdit";
}
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="container">
<div id="personDetails" class="row">
@Html.HiddenFor(model => model.personModel.PersonId, new { @id = "personId" })
<div class="form-group">
<div class="col-md-2">
<label>First Name</label>
<div style="display:inline">
@Html.EditorFor(model => model.personModel.FirstName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.personModel.FirstName, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-2">
<label>Last Name</label>
<div style="display:inline;">
@Html.EditorFor(model => model.personModel.LastName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.personModel.LastName, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-2">
<label>Date of Birth</label>
<div style="display:inline">
@Html.EditorFor(model => model.personModel.DateOfBirth, new { @id = "dob", htmlAttributes = new { @class = "form-control date-picker" } })
@Html.ValidationMessageFor(model => model.personModel.DateOfBirth, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-1">
<label>Height</label>
<div style="display:inline">
@Html.EditorFor(model => model.personModel.Height, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.personModel.Height, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-1">
<label>Weight</label>
<div style="display:inline">
@Html.EditorFor(model => model.personModel.Weight, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.personModel.Weight, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-2">
<label>Location</label>
<div style="display:inline">
@Html.EditorFor(model => model.personModel.Location, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.personModel.Location, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
<br />
<div id="tabs" class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tabs-1" data-toggle="tab">Address</a></li>
<li><a href="#tabs-2" data-toggle="tab">Insuarance</a></li>
<li><a href="#tabs-3" data-toggle="tab">Emergency Contacts</a></li>
</ul><br />
</div>
<div class="tab-content panel-body">
<div id="tabs-1" class="tab-pane fade in active">
<div style="height:22px">
<a class="btn btn-default" id="btnAdd" style="float:right"><span class="glyphicon glyphicon-plus-sign"></span> Add New Row</a>
</div>
<br />
<div id="mainContent">
<div id="addressDiv">
<div class="col-md-11">
@*@Html.Partial("_Address", Model.addressModel);*@
@{
Html.RenderAction("AddressPartialView", "Person");
}
</div>
<a id="closeAddress" style="margin-top:33px" class="col-md-1 closeLink"><i class="glyphicon glyphicon-trash" style="color:red"></i></a>
</div>
</div>
</div>
<div id="tabs-2" class="tab-pane fade">
@Html.HiddenFor(model => model.insuranceModel.InsuranceId, new { @id = "insuranceId" })
<div class="col-md-4">
<label>Health Plan</label>
<div style="display:inline">
@Html.TextBoxFor(model => model.insuranceModel.HealthPlan, null, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.insuranceModel.HealthPlan, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-4">
<label>Health Plan Type</label>
<div style="display:inline">
@Html.TextBoxFor(model => model.insuranceModel.HealthPlanType, null, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.insuranceModel.HealthPlanType, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-4">
<label>Card Number</label>
<div style="display:inline">
@Html.TextBoxFor(model => model.insuranceModel.CardNumber, null, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.insuranceModel.CardNumber, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div id="tabs-3" class="tab-pane fade">
@Html.HiddenFor(model => model.emergencyContactModel.EmergencyContactId, new { @id = "emergencyContactId" })
<div class="col-md-3">
<label>Contact Patient</label>
<div style="display:inline">
@{
List<SelectListItem> personItems = new List<SelectListItem>();
personItems.Add(new SelectListItem { Text = "--Select One--", Value = "", Selected = true });
personItems.Add(new SelectListItem { Text = "1", Value = "1" });
personItems.Add(new SelectListItem { Text = "2", Value = "2" });
personItems.Add(new SelectListItem { Text = "3", Value = "3" });
personItems.Add(new SelectListItem { Text = "4", Value = "4" });
}
@Html.DropDownListFor(model => model.emergencyContactModel.ContactPersonId, personItems, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.emergencyContactModel.ContactPersonId, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-3">
<label>Relationship Type</label>
<div style="display:inline">
@{
List<SelectListItem> relationshipItems = new List<SelectListItem>();
relationshipItems.Add(new SelectListItem { Text = "--Select One--", Value = "", Selected = true });
relationshipItems.Add(new SelectListItem { Text = "Father", Value = "Father" });
relationshipItems.Add(new SelectListItem { Text = "Mother", Value = "Mother" });
relationshipItems.Add(new SelectListItem { Text = "Son", Value = "Son" });
relationshipItems.Add(new SelectListItem { Text = "Daughter", Value = "Daughter" });
relationshipItems.Add(new SelectListItem { Text = "Guardian", Value = "Guardian" });
}
@Html.DropDownListFor(model => model.emergencyContactModel.RelationshipType, relationshipItems, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.emergencyContactModel.RelationshipType, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-3">
<label>Contact Number</label>
<div style="display:inline">
@Html.TextBoxFor(model => model.emergencyContactModel.ContactNumber, null, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.emergencyContactModel.ContactNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="col-md-3">
<label>Email Id</label>
<div style="display:inline">
@Html.TextBoxFor(model => model.emergencyContactModel.EmailId, null, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.emergencyContactModel.EmailId, "", new { @class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
<br />
<div class="col-md-12">
<input type="submit" value="Save" class="btn btn-default" style="margin-top:10px" />
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
public ActionResult AddressPartialView()
{
var _model = new PersonDetailsViewModel();
return PartialView("_Address", _model.addressModel);
}
//To load the data into the form - for editing
public ActionResult AddorEdit(int id = 0)
{
if (id == 0)
{
var myModel = new PersonDetailsViewModel();
return View(myModel);
}
else
{
HttpResponseMessage responsePerson = GlobalVariables.WebApiClient.GetAsync("Person/" + id.ToString()).Result;
HttpResponseMessage responseAddress = GlobalVariables.WebApiClient.GetAsync("Address/" + id.ToString()).Result;
HttpResponseMessage responseInsurance = GlobalVariables.WebApiClient.GetAsync("Insurance/" + id.ToString()).Result;
HttpResponseMessage responseEmergencyContact = GlobalVariables.WebApiClient.GetAsync("EmergencyContact/" + id.ToString()).Result;
var personJsonString = responsePerson.Content.ReadAsStringAsync();
var deserializedPerson = JsonConvert.DeserializeObject<IEnumerable<MvcPersonModel>>(personJsonString.Result);
var addressJsonString = responseAddress.Content.ReadAsStringAsync();
var deserializedAddress = JsonConvert.DeserializeObject<IEnumerable<MvcAddressModel>>(addressJsonString.Result);
var insuranceJsonString = responseInsurance.Content.ReadAsStringAsync();
var deserializedInsurance = JsonConvert.DeserializeObject<IEnumerable<MvcInsuranceModel>>(insuranceJsonString.Result);
var emergencyContactJsonString = responseEmergencyContact.Content.ReadAsStringAsync();
var deserializedEmergencyContact = JsonConvert.DeserializeObject<IEnumerable<MvcEmergencyContactModel>>(emergencyContactJsonString.Result);
var _ViewModel = new PersonDetailsViewModel();
_ViewModel.personModel = deserializedPerson.FirstOrDefault();
_ViewModel.addressModel = deserializedAddress.FirstOrDefault();
_ViewModel.insuranceModel = deserializedInsurance.FirstOrDefault();
_ViewModel.emergencyContactModel = deserializedEmergencyContact.FirstOrDefault();
return View(_ViewModel);
}
}
//Posting data to the database
[HttpPost]
public ActionResult AddorEdit(PersonDetailsViewModel viewModel)
{
HttpResponseMessage responsePerson = GlobalVariables.WebApiClient.PostAsJsonAsync("Person", viewModel.personModel).Result;
HttpResponseMessage responseAddress = GlobalVariables.WebApiClient.PostAsJsonAsync("Address", viewModel.addressModel).Result;
HttpResponseMessage responseInsurance = GlobalVariables.WebApiClient.PostAsJsonAsync("Insurance", viewModel.insuranceModel).Result;
HttpResponseMessage responseEmergencyContact = GlobalVariables.WebApiClient.PostAsJsonAsync("EmergencyContact", viewModel.emergencyContactModel).Result;
return RedirectToAction("Index");
}
@model MVC.Models.PersonDetailsViewModel
@{
ViewBag.Title=“AddorEdit”；
}
@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
@Html.HiddenFor（model=>model.personModel.PersonId，新的{@id=“PersonId”}）
名字
@EditorFor（model=>model.personModel.FirstName，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.personModel.FirstName，“，新的{@class=“text danger”}）
姓
@EditorFor（model=>model.personModel.LastName，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.personModel.LastName，“，新的{@class=“text danger”}）
出生日期
@EditorFor（model=>model.personModel.DateOfBirth，new{@id=“dob”，htmlAttributes=new{@class=“表单控制日期选择器”}）
@Html.ValidationMessageFor（model=>model.personModel.DateOfBirth，“，new{@class=“text danger”}）
高度
@EditorFor（model=>model.personModel.Height，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.personModel.Height，“，新的{@class=“text danger”}）
重量
@EditorFor（model=>model.personModel.Weight，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.personModel.Weight，“，新的{@class=“text danger”}）
位置
@EditorFor（model=>model.personModel.Location，new{htmlAttributes=new{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.personModel.Location，“，新的{@class=“text danger”}）
添加新行
@*@Html.Partial（“_Address”，Model.addressModel）*@
@{
Html.RenderAction（“AddressPartialView”、“Person”）；
}
@Html.HiddenFor（model=>model.insuranceModel.InsuranceId，新的{@id=“InsuranceId”}）
健康计划
@TextBoxFor（model=>model.insuranceModel.HealthPlan，null，新的{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.insuranceModel.HealthPlan，“，新的{@class=“text danger”}）
健康计划类型
@TextBoxFor（model=>model.insuranceModel.HealthPlanType，null，新的{@class=“formcontrol”}）
@Html.ValidationMessageFor（model=>model.insuranceModel.HealthPlanType，“，新的{@class=“text danger”}）
卡号
@TextBoxFor（model=>model.insuranceModel.CardNumber，null，新的{@class=“form control”}）
@Html.ValidationMessageFor（model=>model.insuranceModel.CardNumber，“，新的{@class=“text danger”}）
@Html.HiddenFor（model=>model.emergencyContactModel.EmergencyContactId，新的{@id=“EmergencyContactId”}）
接触病人
@{
List personItems=新列表（）；