使用下拉列表 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>
}

评估添加视图Class

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 错误。使用删除行，我将其连接到控制器，以便它从数据库中删除当前评估。此外，我在删除新创建的视图（无数据库 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>
}

评估添加视图Class

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

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

Dynamic Add Delete of Partial View with Dropdownlist MVC

c#

asp.net-mvc

jquery

partial-views