在asp.net MVC 5视图中提交多个列表项

时间:2017-07-31 10:23:33

标签: jquery asp.net-mvc asp.net-mvc-4 asp.net-mvc-3

我有一个从数据库中提取的调查问题的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)

enter image description here enter image description here

从上面的图片中......每当参与者从下拉列表中选择一个响应时,它将使用适当的分数填充权重,同时检查该行中的相应复选框。因此,选中的值可以选择问题ID,权重具有分数值。挑战是如何将这些不同的值,问题ID和相关分数纳入数据库。

1 个答案:

答案 0 :(得分:0)

只需更改代码即可获得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" }
     });
});