在 Javascript 中设置值会导致控制器中的属性为空 - MVC

Question

我对 MVC（和一般的 Web 开发）还很陌生，我经常遇到几个 'gotchas' 导致意外行为的问题。我正在使用 Kendo UI，但是我 99% 确定我的问题是由于我对 Javascript 或 MVC 缺乏理解，而不是与 [=57= 有任何关系].

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

型号：

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.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>

}

当运行此代码时，我可以单击按钮添加新派对，编辑器模板按预期出现，然后我按下 'Male' 按钮，用 [= 填充性别字段46=].

然后我在确认输入之前用通用 "Test" 和 "Person" 数据填写其他两个字段，然后按提交。

然而，当我在控制器上放置一个断点时，我发现正在传递的模型的性别设置为空。但是，名字和姓氏（"Test" 和 "Person"）已填满。 randomData 也按预期完全填充。

有趣的是，如果我返回并在性别字段中手动输入类似 "Male" 的内容，现在也会填充该字段。只有当我尝试使用 javascript 设置它为空的值时。

最终目标是在按下按钮时让隐藏字段由 javascript 填充，所以如果有人能指出我的错误，我们将不胜感激！

Answer 1

原来需要通过javascript更改值后触发编辑器模板的更改事件。

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

在 Javascript 中设置值会导致控制器中的属性为空 - MVC

Setting value in Javascript results in null property at controller - MVC

javascript

c#

model-view-controller

kendo-asp.net-mvc

kendo-listview

在 Javascript 中设置值会导致控制器中的 属性 为空 - MVC

Setting value in Javascript results in null property at controller - MVC

javascript

c#

model-view-controller

kendo-asp.net-mvc

kendo-listview

在 Javascript 中设置值会导致控制器中的属性为空 - MVC