用Razor view实现Asp.net Mvc中数据的动态添加和编辑
用Razor view实现Asp.net Mvc中数据的动态添加和编辑
提问于 2018-12-04 03:58:51
我是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");
}我使用Web API作为后端进程。我已经在Address选项卡的视图中添加了删除和添加新行按钮。现在它只与一个单一的模型工作，我想知道如何实现它的动态列表，以便一个人可以有'n‘个地址，他可以编辑任何他想要的，也可以删除基于AddressId。我知道这段代码看起来很低级。我只想知道如何处理列表的语法和语义。抱歉把事情搞砸了。谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-06 16:33:31
从马特·伦恩那里得到了一个解决方案。
它是通过使用自定义HtmlHelper扩展模块并创建Html.EditorForMany().来实现的
非常感谢你的技巧，Matt Lunn。完全按照我想要的方式工作。:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53601008
复制相关文章
相似问题