Fatal编程技术网
  • javascript/
  • 在Javascript中设置值会导致控制器-MVC上出现null属性

在Javascript中设置值会导致控制器-MVC上出现null属性

javascript c# model-view-controller

在Javascript中设置值会导致控制器-MVC上出现null属性,javascript,c#,model-view-controller,kendo-asp.net-mvc,kendo-listview,Javascript,C#,Model View Controller,Kendo Asp.net Mvc,Kendo Listview,我对MVC（以及一般的web开发）相当陌生，我经常遇到一些导致意外行为的“陷阱”。我使用的是剑道UI，但我99%肯定我的问题是因为我对Javascript或MVC缺乏了解，而不是剑道 您应该能够使用以下代码重现问题： 型号： public class DemoClass { public int id { get; set; } public string randomData { get; set; } public List<DemoPartyDetails&

我对MVC（以及一般的web开发）相当陌生，我经常遇到一些导致意外行为的“陷阱”。我使用的是剑道UI，但我99%肯定我的问题是因为我对Javascript或MVC缺乏了解，而不是剑道

您应该能够使用以下代码重现问题：

型号：

public class DemoClass
{
    public int id { get; set; }
    public string randomData { get; set; }

    public List<DemoPartyDetails> partyDetails { get; set; }

    public DemoClass()
    {
        partyDetails = new List<DemoPartyDetails>();
    }
}

public class DemoPartyDetails
{
    public int id { get; set; }
    public string firstName { get; set; }
    public string surname { get; set; }

    public string gender { get; set; }

    public DemoPartyDetails()
    {

    }
}

public class DemoController : Controller
{
    // GET: Demo
    public ActionResult Index()
    {
        DemoClass demo = new DemoClass();
        return View(demo);
    }

    [HttpPost]
    public ActionResult Create(DemoClass model)
    {
        try
        {
            if (model.partyDetails[0].gender != null)
                Console.WriteLine("Party details populated");
            else
                Console.WriteLine("Something went wrong...");

            return RedirectToAction("Index");
        }
        catch
        {
            return View();
        }
    }
}

@model DemoPortal.Models.DemoClass

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    @using (Html.BeginForm("Create", "Demo", FormMethod.Post))
    {
        <div>
            @Html.EditorFor(model => model.randomData)
        </div>

        <div>
            <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-i-add"></span>Add Party</a>
            @(Html.Kendo().ListView(Model.partyDetails)
                    .Name("demoListView")
                    .TagName("div")
                    .ClientTemplateId("demoTemplate")
                    .DataSource(dataSource => dataSource
                        .Model(model => model.Id(x => x.id))
                        )
                    .Editable(editable => editable.TemplateName("DemoPartyDetails"))
            )
        </div>

        <input type="submit" value="Submit" />
    }
</body>
</html>


<script type="text/x-kendo-tmpl" id="demoTemplate">
    <div class="demoParty">
        <h3>#:firstName#</h3>
        <span>#:surname#</span>

        <input type="hidden" name="PartyDetails[#:index(data)#].firstName" value="#:firstName#" />
        <input type="hidden" name="PartyDetails[#:index(data)#].surname" value="#:surname#" />
        <input type="hidden" name="PartyDetails[#:index(data)#].gender" value="#:gender#" />
    </div>
</script>


<script>
$(function() {
        var listView = $("#demoListView").data("kendoListView");

        $(".k-add-button").click(function(e) {
            listView.add();
            e.preventDefault();
        });
});

function index(dataItem) {
    var data = $("#demoListView").data("kendoListView").dataSource.data();

    return data.indexOf(dataItem);

}

function maleClick(e) {
    document.getElementById("gender").value = "M";
    document.getElementById("randomData").value = "random";

    var maleButton = document.getElementById("IsMale");
    var femaleButton = document.getElementById("IsFemale");
    femaleButton.classList.remove("k-primary");
    maleButton.classList.add("k-primary");
};

function femaleClick(e) {
    document.getElementById("gender").value = "F";
    document.getElementById("randomData").value = "random";

    var maleButton = document.getElementById("IsMale");
    var femaleButton = document.getElementById("IsFemale");
    maleButton.classList.remove("k-primary");
    femaleButton.classList.add("k-primary");
};
</script>
查看：

public class DemoClass
{
    public int id { get; set; }
    public string randomData { get; set; }

    public List<DemoPartyDetails> partyDetails { get; set; }

    public DemoClass()
    {
        partyDetails = new List<DemoPartyDetails>();
    }
}

public class DemoPartyDetails
{
    public int id { get; set; }
    public string firstName { get; set; }
    public string surname { get; set; }

    public string gender { get; set; }

    public DemoPartyDetails()
    {

    }
}

public class DemoController : Controller
{
    // GET: Demo
    public ActionResult Index()
    {
        DemoClass demo = new DemoClass();
        return View(demo);
    }

    [HttpPost]
    public ActionResult Create(DemoClass model)
    {
        try
        {
            if (model.partyDetails[0].gender != null)
                Console.WriteLine("Party details populated");
            else
                Console.WriteLine("Something went wrong...");

            return RedirectToAction("Index");
        }
        catch
        {
            return View();
        }
    }
}

@model DemoPortal.Models.DemoClass

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    @using (Html.BeginForm("Create", "Demo", FormMethod.Post))
    {
        <div>
            @Html.EditorFor(model => model.randomData)
        </div>

        <div>
            <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-i-add"></span>Add Party</a>
            @(Html.Kendo().ListView(Model.partyDetails)
                    .Name("demoListView")
                    .TagName("div")
                    .ClientTemplateId("demoTemplate")
                    .DataSource(dataSource => dataSource
                        .Model(model => model.Id(x => x.id))
                        )
                    .Editable(editable => editable.TemplateName("DemoPartyDetails"))
            )
        </div>

        <input type="submit" value="Submit" />
    }
</body>
</html>


<script type="text/x-kendo-tmpl" id="demoTemplate">
    <div class="demoParty">
        <h3>#:firstName#</h3>
        <span>#:surname#</span>

        <input type="hidden" name="PartyDetails[#:index(data)#].firstName" value="#:firstName#" />
        <input type="hidden" name="PartyDetails[#:index(data)#].surname" value="#:surname#" />
        <input type="hidden" name="PartyDetails[#:index(data)#].gender" value="#:gender#" />
    </div>
</script>


<script>
$(function() {
        var listView = $("#demoListView").data("kendoListView");

        $(".k-add-button").click(function(e) {
            listView.add();
            e.preventDefault();
        });
});

function index(dataItem) {
    var data = $("#demoListView").data("kendoListView").dataSource.data();

    return data.indexOf(dataItem);

}

function maleClick(e) {
    document.getElementById("gender").value = "M";
    document.getElementById("randomData").value = "random";

    var maleButton = document.getElementById("IsMale");
    var femaleButton = document.getElementById("IsFemale");
    femaleButton.classList.remove("k-primary");
    maleButton.classList.add("k-primary");
};

function femaleClick(e) {
    document.getElementById("gender").value = "F";
    document.getElementById("randomData").value = "random";

    var maleButton = document.getElementById("IsMale");
    var femaleButton = document.getElementById("IsFemale");
    maleButton.classList.remove("k-primary");
    femaleButton.classList.add("k-primary");
};
</script>

@model DemoPortal.Models.DemoClass
@使用（Html.BeginForm（“创建”、“演示”、FormMethod.Post））
{
@EditorFor（model=>model.randomData）
@（Html.Kendo（）.ListView（Model.partyDetails）
.Name（“demoListView”）
.TagName（“div”）
.ClientTemplateId（“降级模板”）
.DataSource（DataSource=>DataSource
.Model（Model=>Model.Id（x=>x.Id））
)
.Editable（Editable=>Editable.TemplateName（“DemoPartyDetails”））
)
}
#：名字#
#：姓#
$（函数（）{
var listView=$（“#demoListView”）.data（“kendoListView”）；
$（“.k-添加按钮”）。单击（函数（e）{
add（）；
e、 预防默认值（）；
});
});
功能索引（数据项）{
var data=$（“#demoListView”）.data（“kendoListView”）.dataSource.data（）；
返回数据.indexOf（数据项）；
}
函数单击（e）{
document.getElementById（“性别”）.value=“M”；
document.getElementById（“随机数据”）.value=“随机”；
var maleButton=document.getElementById（“IsMale”）；
var femaleButton=document.getElementById（“IsFemale”）；
femaleButton.classList.remove（“k-primary”）；
maleButton.classList.add（“k-primary”）；
};
函数femaleClick（e）{
document.getElementById（“性别”）.value=“F”；
document.getElementById（“随机数据”）.value=“随机”；
var maleButton=document.getElementById（“IsMale”）；
var femaleButton=document.getElementById（“IsFemale”）；
maleButton.classList.remove（“k-primary”）；
femaleButton.classList.add（“k-primary”）；
};
PartyDetails编辑器模板

@model DemoPortal.Models.DemoPartyDetails

@using (Html.BeginForm())
{
    <div>
        <div>
            <label>Gender:</label>
            @(Html.Kendo().Button()
                    .Name("IsMale")
                    .Content("Male")
                    .HtmlAttributes(new { type = "button" })
                    .Events(ev => ev.Click("maleClick")))

            @(Html.Kendo().Button()
                    .Name("IsFemale")
                    .Content("Female")
                    .HtmlAttributes(new { type = "button", @class = "k-primary" })
                    .Events(ev => ev.Click("femaleClick")))
        </div>

        @(Html.HiddenFor(model => model.id))
        @(Html.EditorFor(model => model.gender))
        @(Html.EditorFor(model => model.firstName))
        @(Html.EditorFor(model => model.surname))

        <div class="btnArea">
            <a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
            <a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
        </div>
    </div>

}

@model-DemoPortal.Models.DemoPartyDetails
@使用（Html.BeginForm（））
{
性别：
@（Html.Kendo（）.Button（））
.姓名（“伊斯梅尔”）
.内容（“男性”）
.HtmlAttributes（新的{type=“button”}）
.Events（ev=>ev.Click（“maleClick”））
@（Html.Kendo（）.Button（））
.姓名（“女”）
.内容（“女性”）
.HtmlAttributes（新的{type=“button”，@class=“k-primary”}）
.事件（ev=>ev.点击（“女性点击”））
@（Html.HiddenFor（model=>model.id））
@（Html.EditorFor（model=>model.gender））
@（Html.EditorFor（model=>model.firstName））
@（Html.EditorFor（model=>model.姓氏））
}
运行此代码时，我可以单击按钮添加一个新的政党，编辑器模板按预期显示，我按下“男性”按钮，该按钮将性别字段填充为“M”

然后，在确认输入，然后按submit之前，我用通用的“Test”和“Person”数据填写另外两个字段

然而，当我在控制器上放置断点时，我发现正在传递的模型的性别设置为null。但是，名字和姓氏（“测试”和“人员”）已完全填充。随机数据也按预期完全填充

有趣的是，如果我返回并手动在性别字段中键入类似“男性”的内容，那么现在也会填充该字段。只有当我尝试使用javascript将值设置为null时

最终的目标是在按下按钮时用javascript填充一个隐藏字段，因此如果有人能指出我的错误，我们将不胜感激

结果表明，在通过javascript更改值之后，需要触发编辑器模板的更改事件

$("#gender").trigger("change");