C# 使用Dropdownlist MVC动态添加和删除部分视图

大家好，我正在尝试创建一个带有添加和删除按钮的视图，其中一行是局部视图。这是我到目前为止所拥有的

主视图

<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 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> 

好的，当我单击添加评估时，我会得到一个内部错误（500），但是如果我去掉下拉列表并输入一些基本文本，它会工作

如果我将其保留为基本文本，并且“添加”可以工作，那么“删除”按钮将无法正常工作

如果我转到局部视图本身，它会加载一个下拉列表和所有的评估

---

你知道我做错了什么吗？

好的，我现在已经解决了。感谢Stephen Muecke的帮助（我不知道你最初的答案去了哪里，因为我会接受它）。如前所述，我没有将模型传递给控制器中的局部视图，因此得到了一个500错误。通过删除行，我将其连接到控制器，因此它从数据库中删除当前评估。另外，我在删除新创建的视图（没有数据库id）时遇到问题，通过在部分视图中添加删除脚本解决了这个问题

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

主视图

<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 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 IEnumerable
添加相关评估
@foreach（模型中的var mod）
{
@Html.部分（“_评估”，mod）
}


@节脚本
{
$（'#addassessment'）。在（'单击'，函数（）{
$.ajax({
async:false，
url:“/MyController/AddNewAssessment”
}).成功（功能（partialView）{
$（'#divPartial'）.append（partialView）；
});
});
$（'.delete'）。单击（函数（）{
var container=$（this）.closest（'.assessmentRow'）；
var id=container.find（'.id'）.val（）；
如果（id）{
$.ajax({
async:false，
url:“/MyController/DeleteAssessment”，
数据：{Id:Id}
}).成功（功能（结果）{
容器。移除（）；
});
}
否则{
//新添加的so没有id
容器。移除（）；
}
});
}

局部视图

@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>
}

@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>
}

@model MyApp.Models.AssessmentAddView
@{
布局=空；
}
$（'.delete'）。在（'click'，函数（）{
var container=$（this）.closest（'.assessmentRow'）；
容器。移除（）；
});
@使用（Html.BeginCollectionItem（“评估”））
{
@HiddenFor（m=>m.Id，新的{@class=“Id”}）
@DropDownListFor（m=>m.SelectedId，Model.Data，“选择评估”，新建{@class=“form control”，@style=“display:inline”}）
删除
}

AssessmentAddView类

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

public class PositionAssessmentView
    {
        public string Id { get; set; }

        public IEnumerable<SelectListItem> Data { get; set; }

        public string SelectedId { get; set; }
    }

公共类位置评估视图
{
公共字符串Id{get；set；}
公共IEnumerable数据{get；set；}
公共字符串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);
}

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

公共操作结果编辑（字符串标记）
{
var query=来自db.tblStaffAssessment中的s
其中（s.StaffID等于（StaffID））
选择s；
var currentAssessments=新列表（）；
foreach（查询中的变量s）
{
currentAssessments.Add（新的AssessmentAddView（））
{
Id=s.Id，
数据=新选择列表（db.tblAssessment.OrderBy（a=>a.AssessmentName），“Id”，“AssessmentName”），
选择edid=s.AssessmentID
});
}
返回视图（当前评估）；
}    
公共行动结果编辑（IEnumerable assessment）
{
if（ModelState.IsValid）
{
foreach（评估添加评估中的视图项）
{
//执行编辑操作
}
返回重定向操作（“索引”、“MyController”）；
}
返回重定向操作（“索引”、“MyController”）；
}
公共行动结果AddNewAssessment（）
{
var模型=新评估添加视图
{
数据=新的选择列表（db.tblAssessment.OrderBy（a=>a.AssessmentName），“Id”，“AssessmentName”）
};
return PartialView（“_Assessment”，model）；//在此处返回您的部分视图
}
公共操作结果删除评估（字符串Id）
{
//是否删除id为的操作
返回重定向操作（“索引”、“MyController”）；
}

我看不到onclick=“deleteFunction（）”的删除函数。这是一个可能的错误？谢谢你发现了。我已经更新了代码以反映删除。“删除”按钮现在不执行任何操作，不会出错。