复选框未绑定到控制器

时间:2016-08-04 20:52:13

标签: jquery .net ajax asp.net-mvc

我使用Ajax从控制器中检索信息,并在我的视图中将其显示为复选框列表。

$(document).ready(function () {
    $('#submitButton').hide(); //hide some buttons
    $("#Name").hide();
    $("#Contact").hide();
    $("#Desc").hide();
    $("#PMeeting").hide();
    $("#Params").hide();

    $('#SelectedTeam').change(function () {
        $('#content').html('');
        $.ajax({
            url: '/Audits/GetAuditParams', //this function retrieves a list of objects
            type: "POST",
            dataType: "json",
            data: {
                'tn': $('#SelectedTeam').val(),
            },
            success: function (data) { //here I create the table with checkboxes and labels
                $.each(data, function (i, item) {
                    var li = $('<input type="checkbox" value="' + item.Included + '" name=Parameters[' + i + '].Included id=Parameters_' + i + '__Included"/>' +
          '<label for="Parameters[' + i + ']"></label></br>').
                        text(item.ParameterDescription).prop('checked', item.Included);

                    li.find('label').text(item.ParameterDescription);//I create a set of hiddem fields with the same new, otherwise the collection will be null in the controller

                    $('<input>').attr({
                        type: 'hidden',
                        id: 'Parameters_' + i + '__Included',
                        name: 'Parameters[' + i + '].Included'
                    }).appendTo('form');
                    $('#content').append(li);
                });
            }
        });
        $.ajax({ //this is for a different information
            url: '/Audits/GetAuditInfo',
            type: "POST",
            dataType: "json",
            data: {
                'tn': $('#SelectedTeam').val(),
            },
            success: function (data) {
                $("#SProject_ProjectName").val(data.ProjectID);
                $("#SProject_POC").val(data.POC);
                $("#SProject_PDescription").val(data.PDescription);
                $("#SProject_PeriodicMeeting").val(data.PeriodicMeeting);
                $("#Name").show();
                $("#Contact").show();
                $("#Desc").show();
                $("#PMeeting").show();
                $("#Params").show();

            }
        });
        $('#submitButton').show();

    });

    function isChecked(value) {

        if (value == 1) {
            return true;
        }
        else
            return false;
    }

    $('form').submit(function (e) {
        $('input[type=checkbox]').prop('checked', function (index, value) {
            if (value == true) {
                $('#Parameters_' + index + '__Included').val(1);
                $('#Parameters_' + index + '__Included').prop('checked', "checked");
            } else {
                $('#Parameters_' + index + '__Included').val(0);
            }

        });
    });
});

这是我的HTML代码

<html>
<head>
</head>
<body>
  <div class="col-md-4" id="content"></div>
</body>
</html>

但是我在控制器ModelStated.isvalid = false中获取了复选框null的信息,这是错误

  

值'0'对包含无效。

以及所有复选框(已选中或未选中)的值均为“false”。

1 个答案:

答案 0 :(得分:2)

您应该提供更多信息,并以特定问题的形式对您的陈述进行修改。除此之外,我认为这不是你的所有代码,看起来像一个空白的HTML页面。如果您想从MVC控制器获取数据,您应该创建一个控制器将为您的视图提供的模型。以下是如何执行此操作的示例:

Accessing your model's data from a controller - asp.net

基本上,您创建模型和数据库上下文,然后在控制器中创建上下文的实例。

public class YourController : Controller
{
    private YourDBContext db = new YourDBContext();
    public ViewResult Index()
    {
        return View(db.YourData.ToList());
    }

}

使用剃刀语法将其从控制器传递到您的视图。

@model IEnumerable<App.Model.Data> 

使用razor将复选框绑定到模型

 @Html.CheckBoxFor(model => model.data)

一般来说,我发现使用更多razor和html / bootstrap以及更少的jQuery更容易。如果没有看到您的模型或控制器,很难解决您的复选框问题,但如果您专注于MVC的基础知识,我认为您的许多问题都将被解决。我很抱歉这个答案不是很具体,但如果你修改你的问题,我可以更具体。