使用下拉列表 MVC 动态添加部分视图的删除

Question

嗨，我正在尝试为行是部分视图的行创建一个带有"添加"和"删除"按钮的视图。这是我到目前为止所拥有的。

主视图

<fieldset>
<legend>Add Associated Assessments</legend>
<div id="divPartial"></div>
<input type="button" id="addassessment" name="addassessment" value="Add Assessment" />
<br />
@section Scripts
{
<script type="text/javascript">
$('#addassessment').on('click', function () {
$.ajax({
async: false,
url: '/PositionAssessments/AddNewAssessment'
}).success(function (partialView) {
$('#divPartial').append(partialView);
});
});
$("#deleteRow").on("click", function () {
$(this).parents("#assessmentRow:first").remove();
return false;
});
</script>
}
</fieldset> 

部分视图

@model MyApp.Models.AssessmentAddView
@{
Layout = null;
}
@using (Html.BeginCollectionItem("Assessments"))
{
<div id="assessmentRow" class="assessmentRow">
@Html.DropDownListFor(m => m.SelectedId, Model.Data, "Select Assessment", new { @class = "form-control", @style = "display: inline" })
<input type="button" id="deleteRow" name="deleteRow" value="Delete Row" />
</div>
}

评估添加视图类

public class AssessmentAddView
{
public IEnumerable<SelectListItem> Data { get; set; }
public string SelectedId { get; set; }
}

控制器

public ActionResult AddNewAssessment()
{
return PartialView("_Assessment");//return your partial view here
}
public ActionResult _Assessment()
{
var model = new AssessmentAddView
{
Data = ViewBag.AssessmentList = new SelectList(db.tblAssessment.OrderBy(a => a.AssessmentName), "Id", "AssessmentName")
};
return View(model);
}

好的，当我单击"添加评估"时，我收到内部错误 (500(，但是如果我取出下拉列表并放入一些基本文本，它会起作用。

如果我将其保留为基本文本并且添加有效，则删除按钮无法正常工作，没有任何错误。

如果我转到部分视图本身，它会加载良好，带有下拉列表和所有评估。

对我做错了什么有什么想法吗？

Answer 1

好的，我现在已经解决了。感谢斯蒂芬·穆克的帮助(不知道你原来的答案去了哪里，因为我会接受它(。因此，如前所述，我没有将模型传递给控制器中的部分视图，因此出现了 500 错误。使用"删除"行，我已将其连接到控制器，以便从数据库中删除当前评估。此外，我在删除新创建的视图(没有数据库 ID(时遇到了问题，这已通过在部分视图中添加删除脚本来解决。

对于希望在部分视图中有下拉列表的其他人，这是我的代码。

主视图

@model IEnumerable<MyApp.AssessmentAddView>
<fieldset>
<legend>Add Associated Assessments</legend>
<div id="divPartial">
@foreach (var mod in Model)
{
@Html.Partial("_Assessment", mod)
}
</div>
<input type="button" id="addassessment" name="addassessment" value="Add Assessment" />
<br />

@section Scripts
{
<script type="text/javascript">
$('#addassessment').on('click', function () {
$.ajax({
async: false,
url: '/MyController/AddNewAssessment'
}).success(function (partialView) {
$('#divPartial').append(partialView);
});
});
$('.delete').click(function () {
var container = $(this).closest('.assessmentRow');
var id = container.find('.Id').val();
if (id) {
$.ajax({
async: false,
url: '/MyController/DeleteAssessment',
data: { Id: id }
}).success(function (result) {
container.remove();
});
}
else {
// New Add so without id
container.remove();
}
});
</script>
}
</fieldset> 

部分视图

@model MyApp.Models.AssessmentAddView
@{
Layout = null;
}
<script type="text/javascript">
$('.delete').on('click', function () {
var container = $(this).closest('.assessmentRow');
container.remove();
});
</script>
@using (Html.BeginCollectionItem("Assessments"))
{
<div class="assessmentRow">
@Html.HiddenFor(m => m.Id, new { @class = "Id" })
@Html.DropDownListFor(m => m.SelectedId, Model.Data, "Select Assessment", new { @class = "form-control", @style = "display: inline" })
<button type="button" class="delete">Delete</button>
</div>
}

评估添加视图类

public class PositionAssessmentView
{
public string Id { get; set; }
public IEnumerable<SelectListItem> Data { get; set; }
public string SelectedId { get; set; }
}

我的控制器

public ActionResult Edit(string StaffID)
{
var query = from s in db.tblStaffAssessment
where (s.StaffID.Equals(StaffID))
select s;
var currentAssessments = new List<AssessmentAddView>();
foreach (var s in query)
{
currentAssessments.Add(new AssessmentAddView()
{
Id = s.Id,
Data = new SelectList(db.tblAssessment.OrderBy(a => a.AssessmentName), "Id", "AssessmentName"),
SelectedId = s.AssessmentID
});
}
return View(currentAssessments);
}    
public ActionResult Edit(IEnumerable<AssessmentAddView> assessments)
{
if (ModelState.IsValid)
{
foreach (AssessmentAddView item in assessments)
{
//perform edit action
}
return RedirectToAction("Index", "MyController");
}
return RedirectToAction("Index", "MyController");
}
public ActionResult AddNewAssessment()
{
var model = new AssessmentAddView
{
Data = new SelectList(db.tblAssessment.OrderBy(a => a.AssessmentName), "Id", "AssessmentName")
};
return PartialView("_Assessment", model);//return your partial view here
}
public ActionResult DeleteAssessment(string Id)
{
// do delete action with id
return RedirectToAction("Index", "MyController");
}