Установка значения в Javascript приводит к нулевому свойству на контроллере - MVC

Я довольно новичок в MVC (и в веб-разработке в целом), и я продолжаю сталкиваться с несколькими "хитростями", которые приводят к неожиданному поведению. Я использую Kendo 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>

Шаблон редактора 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>

}

При запуске этого кода я могу нажать кнопку, чтобы добавить новую партию, шаблон редактора появляется, как и ожидалось, и я нажимаю кнопку "Мужской", которая заполняет поле "М".

Затем я заполняю два других поля общими данными "Тест" и "Персона", прежде чем подтвердить ввод, а затем нажимаю "Отправить".

Однако, когда я устанавливаю точку останова на контроллере, я обнаруживаю, что для модели, через которую передается модель, установлен нулевой пол. Однако имя и фамилия ("Тест" и "Человек") полностью заполнены. RandomData также полностью заполняется, как и ожидалось.

Интересно, что если я вернусь и вручную введу что-то вроде "Мужчина" в поле "Пол", то оно также будет заполнено. Только когда я пытаюсь использовать javascript для установки значения, оно равно null.

Конечная цель состоит в том, чтобы скрытое поле заполнялось JavaScript при нажатии кнопки, поэтому, если кто-то может указать на мою ошибку, это будет очень цениться!

Источник

1 ответ

Решение

Оказывается, вам нужно вызвать событие изменения шаблона редактора после изменения значений через javascript.

$("#gender").trigger("change");
Источник
Другие вопросы по тегам