在asp.net MVC 5視圖中提交多個列表項

Question

我有一個從數據庫中提取的調查問題的asp.net MVC5視圖。我添加了一個額外的文本框字段來跟蹤從下拉列表中選擇的響應的權重。對於每個選擇的響應，權重會更新以反映所選項目的值。提交後，我想提交問題ID和他們回覆的相應權重。下面是有問題的視圖

@model IEnumerable<WorkPlaceBullyApp.Models.Question> 
@{ 
    ViewBag.Title = "Survey Questions"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>Survey Questions</h2> 
@if (!Model.Any()) 
{ 
    <p>We don't have any Questions yet!.</p> 
} 
<p> 
    @Html.ActionLink("Question", "New", "Question", "", new { @class = "btn btn-primary" }) 
</p> 

@using (@Html.BeginForm("Index", "Question")) 
{ 
    @Html.AntiForgeryToken() 
    <div class="panel panel-primary"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Survey Questions</h3> 
     </div> 
     <div class="panel-body"> 
      <p> 
       <div class="well well-sm"> 
        <ul> 
         <li>Score: <span class="wwSum">0</span></li> 
         <li><span class="fBack">No Data Yet!</span></li> 
        </ul> 
       </div> 
      <p> 
       <table class="table table-striped table-hover ques-table"> 
        <thead> 
         <tr> 
          <td>ID</td> 
          <td>Questions</td> 
          <td>Category</td> 
          <td>Response</td> 
          <td>Weight</td> 
         </tr> 
        </thead> 
        @foreach (var question in Model) 
        { 
         <tr> 
          <td>@Html.CheckBox(@question.Id.ToString(), false, new { @class = "ckb", Id = question.Id, @disabled = "disabled" })</td> 
          <td> 
           @Html.ActionLink(@question.SurveyQuestion, "Edit", "Question", new { id = @question.Id }, null) 
           @*@question.SurveyQuestion*@ 
          </td> 
          <td> 
           @question.QuestionCategory.QuestionCat 
          </td> 
          @if (@question.QResponseCategory.Id == 1) 
          { 
           <td> 
            @Html.DropDownList("Weight", (IEnumerable<SelectListItem>)ViewBag.ResponseId, "Select Response", new { @class = "form-control sel" }) 
           </td> 
           <td> 
            <input type="text" id="Weight" name="__Weight" class="form-control myValu" value="" readonly /> 
           </td> 
          } 
         </tr> 
        } 
       </table> 
     </div> 
    </div> 

    <p> 
     @*@Html.ActionLink("Submit", "SurveyResponse", "Response", "", new { @class = "btn btn-primary", @id = "SubmitResponses" })*@ 

     <input type="button" id="SubmitResponses" value="Submit" class="btn btn-primary" /> 
    </p> 
} 
@section Scripts{ 
    <script type="text/javascript"> 
     $(function() { 
      $(".sel").change(function (e) { 
       var wSum = 0; 
       $(this).closest("td").next().find("input").val(this.value); 
       //$("input#Weight").each(function (e) { 
       // var itemVal = $(this).val() == "" ? 0 : $(this).val(); 
       // if (itemVal !== null) { 
       //  $('.ckb').each(function() { 
       //   this.checked = true; 
       //  }); 
       // } else { 
       //  $('.ckb').each(function() { 
       //   this.checked = false; 
       //  }); 
       // } 
       // wSum += parseInt(itemVal); 
       //}); 

       $(".ques-table tbody tr").each(function (e) { 
        var check = $(this).find(":checkbox:eq(0)"); 
        var score = $(this).find(".myValu").val(); 
        if (score != "") check["0"].checked = true; 

        var select = $(this).find("#Weight").val(); 
        var itemVal = select == "" ? 0 : select; 
        wSum += parseInt(itemVal); 
       }); 

       $("#SubmitResponses").click(function() { 
        checkedIds = $(".ckb").filter(":checked").map(function() { return this.id; }); 
        weights = $(this).find(":value").val().map(function() { return this.val(); }); 

        // console.log(weights); weights throws errors 

        $.ajax({ 
         type: "POST", 
         url: "@Url.Action("SurveyResponse", "Response")", 
         traditional: true, 
         data: { Ids: checkedIds.toArray(), Weights: weight.toArray(), UserId: "@ViewBag.UserId" } 
        }); 
       }); 

       if (wSum < 51) { 
        $(".fBack").text("You don't yet understand what is needed to create a culture of dignity and respect"); 
       } 
       if (wSum >= 51) { 
        $(".fBack").text("You have some awareness of requirements but significant efforts is still needed"); 
       } 
       if (wSum >= 76) { 
        $(".fBack").text("You have reasonable skills in creating a culture of dignity and respect"); 
       } 
       if (wSum >= 100) { 
        $(".fBack").text("You have excellent skill in creating a culture of dignity and respect."); 
       } 
       $(".wwSum").text(wSum); 
      }); 
     }); 

    </script> 
} 

我無法將體重分數放入列表中，因爲它會引發錯誤。

其次，當我註釋掉的

weights = $(this).find(":value").val().map(function() { return this.val(); }); 

，並把一些測試值在我的控制器

public ActionResult SurveyResponse(List<int> Ids, List<int> Weights, int UserId) 
    { 
     SurveyResponse myResponse = new SurveyResponse(); 
     foreach (var item in Ids) 
     {    
      myResponse.UserId = 3; 
      myResponse.QuestionId = 1; 
      myResponse.Weight = 1; 
      myResponse.Date = DateTime.Now; 

      _context.SurveyResponse.Add(myResponse); 
      _context.SaveChanges(); 
     } 

     return View(); 
    } 

我無法提交的響應。下面的圖像是呈現的視圖（UI），以調查問題

從上述圖像...每當一個與會者接聽從下拉列表的響應，它將填充的權重與相應的分數，並同時檢查行中對應的複選框。因此，檢查的值是在選擇問題ID和權重有價值的分數。挑戰是如何將這些不同的值，問題ID和相關的分數存入數據庫。

Answer 1

只需更改您的代碼即可獲得值weights。

Just change your code to get the value of `weights`. 

$("#SubmitResponses").click(function() { 
    var checkedIds = []; 
    var weights = []; 

    $('table > tbody > tr').each(function() { 
     if($(this).find('input[type="checkbox"]').is(":checked")){ 
      checkedIds.push($(this).find('input[type="checkbox"]').attr('Id')); 
      weights.push($(this).find('select').val()); 
     } 
    }); 

    // console.log(weights); weights throws errors 

    $.ajax({ 
      type: "POST", 
      url: "@Url.Action("SurveyResponse", "Response")", 
      traditional: true, 
      data: { Ids: checkedIds.toArray(), Weights: weight.toArray(),UserId: "@ViewBag.UserId" } 
    }); 
});