使用 Dropdownlist 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>
}

AssessmentAddView 类

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

好的，我现在已经解决了。感谢 Stephen Muecke 的帮助（不确定您的原始答案去了哪里，因为我会接受它）。如前所述，我没有将模型传递给控制器​​中的局部视图，因此出现 500 错误。使用 Delete 行，我已将其连接到控制器，因此它会从数据库中删除当前评估。此外，我在删除新创建的视图（无数据库 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>
}

AssessmentAddView 类

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");
            }