動態添加刪除部分視圖與下拉列表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"); 
      }