Dynamicドロップダウンリストによる部分ビューの削除追加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クラスMyController

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