动态添加删除部分视图与下拉列表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; } 
    } 

myController的

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