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

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

0 голосов
/ 24 октября 2018

Я довольно новичок в MVC (и в веб-разработке в целом), и я постоянно сталкиваюсь с несколькими «хитростями», которые приводят к неожиданному поведению.Я использую Kendo UI, однако я на 99% уверен, что моя проблема связана с тем, что я не понимаю Javascript или MVC, а не имею отношение к Kendo.

Вы должны быть в состоянии воспроизвести проблемуиспользуя следующий код:

Модели: 

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>

}

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

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

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

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

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

1 Ответ

0 голосов
/ 01 ноября 2018

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

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