Razor Page Partial渲染输入和隐藏的输入

问题描述 投票：0回答：2

我在使用ASP .net core 2.2 Razor Pages时遇到非常奇怪的行为。

假设我有一个标准的Razor Page。用户可以在该页面上发送请求，要求提供一个新的团队。我有一些字段，例如DisplayName等，用户可以自由编辑，还有一个下拉菜单供您选择，他可以从中选择要从中克隆某些设置的现有Team。用户选择它之后，我正在使用Ajax在视图的右侧渲染部分视图，用户还可以选择一些其他选项。到目前为止，我还不错，到目前为止一切正常。我希望，如果用户单击“保存/提交”按钮，则所有内容都将包含在发布请求中，甚至包括部分“查看数据”。经过深入研究并进行故障排除后，我发现必须设置ViewData.TemplateInfo.HtmlFieldPrefix来命名父视图中​​的所有内容，以免使绑定混乱。也可以。

奇怪的行为是，在渲染部分视图之后，在HTML two]中生成了Inputs字段。用户可以选择的一种，而隐藏的一种。我将显示我的代码以及渲染的HTML文件，以便伙计们可以自己做一张照片。现在发生的是，隐藏字段具有默认值或null值，并且这些值将包含在请求中。我不知道它们来自哪里和/或如何修复它，或者我做错了什么？

我将稍微缩短代码，但将包括必要的部分。

团队请求模型

public class TeamRequestModel
    {
        public string DisplayName { get; set; }
        public string Description { get; set; }
        public string Visibility { get; set; }
        public List<string> Owners { get; set; }
        public string CloneTeamID { get; set; }
        public TeamCloneSettings TeamCloneSettings { get; set; }

        public TeamRequestModel()
        {
            TeamCloneSettings = new TeamCloneSettings();
        }
    }

团队克隆设置（用户只能设置部件
    public class TeamCloneSettings
    {
        [JsonProperty(PropertyName = "id")]
        public string Id { get; set; }
        public string PartitionKey;
        public string DisplayName { get; set; }
        public bool Released { get; set; }
        public bool FixedVisibility { get; set; }
        public string Visibility { get; set; }
        public bool CloneEverything { get; set; }
        public TeamCloneParts Parts { get; set; }

        public TeamCloneSettings()
        {
            Parts = new TeamCloneParts();
        }
    }

    public class TeamCloneParts
    {
        public bool CloneApps { get; set; }
        public bool CloneChannels { get; set; }
        public bool CloneTabs { get; set; }
        public bool CloneSettings { get; set; }
    }
}

主“团队请求视图”
@page
@model iwDashboard.Pages.Teams.TeamRequest
@{
    ViewData["Title"] = Model.Title;
}

@{
    ViewBag.PageTitle = Model.Title;
}

<style>
    textarea {
        resize: none;
    }
</style>

<section class="content">
    <form method="post" asp-page-handler="SaveTeamRequest" class="col-md-12">
        <div class="row">
            <div class="col-md-3">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Team Details</h3>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="displayName">Display Name</label>
                            <input id="displayName" asp-for="@Model.teamRequest.DisplayName" type="text" class="form-control" required />
                        </div>
                        ... More fields
                        <div style="float: left; width: 40%">
                            <button type="button" onclick="history.go(-1)" data-toggle="tooltip" title="Back" class="btn btn-primary btn-block btn-sm"><i class="fa fa-arrow-circle-left"></i><b>  Back</b></button>
                        </div>
                        <div style="float: right; width: 40%">
                            <button type="submit" data-toggle="tooltip" title="Save" class="btn btn-success btn-block btn-sm"><i class="fas fa-save"></i><b>  Save</b></button>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <div class="col-md-6">
                <div class="card card-secondary">
                    <div class="card-header">
                        <h3 class="card-title">Team Settings</h3>
                    </div>
                    <div class="card-body">
                        <!--partial comes here-->
                        <div id="partialDiv"></div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
        </div>
    </form>
</section>

@section Scripts
{
    <script>
        function GetTeamTemplateProperties() {
            var selectedTeam = $('#teamTemplateSelection').val();
            $.ajax({
                type: "Get",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                url: '/Teams/TeamRequest?handler=TeamTemplateProperties',
                data: {
                    SelectedTeam: selectedTeam
                },
                success: function (result) {
                    $("#partialDiv").after(result);
                }
            })
        };
    </script>
}

获取由Ajax调用的模板属性帖子
public async Task<IActionResult> OnGetTeamTemplateProperties(string SelectedTeam)
        {
            TeamCloneSettings teamCloneSettings = new TeamCloneSettings();
            teamRequest = new TeamRequestModel();
            if (!string.IsNullOrEmpty(SelectedTeam))
            {
                teamCloneSettings = await _teamCloneSettingService.GetTeamCloneSettingByIdAsync(SelectedTeam);
                teamRequest.TeamCloneSettings = teamCloneSettings;
            }

            ViewData.TemplateInfo.HtmlFieldPrefix = "teamRequest";
            SelectedValue = SelectedTeam;
            return new PartialViewResult
            {
                ViewName = "_TeamCloneSettingsPartial",
                ViewData = new ViewDataDictionary<TeamRequestModel>(ViewData, teamRequest)
            };
        }

查看模型绑定属性
...More Code

[BindProperty]
public TeamRequestModel teamRequest { get; set; }
[BindProperty]
public string SelectedValue { get; set; }

...More Code

__ TeamCloneSettingsPartial
@model iwDashboard.Models.TeamRequestModel

@{
    <!--
        Check if fixed visibility is enabled and
        disable selection of visibility if it is
    -->
    string disabled = null;
    string options = null;
    if (Model.TeamCloneSettings.FixedVisibility)
    {
        disabled = "disabled";
        options = Model.Visibility;
    }
}
<div class="form-group">
    <input type="checkbox" hidden id="cloneEverthing" [email protected]>
    <ul class="list-group list-group-unbordered mb-3">
        <li class="list-group-item">
            <label for="visibility">Visibility</label>
            <select class="form-control @disabled custom-select" asp-for="TeamCloneSettings.Visibility" required>
                @if (!string.IsNullOrEmpty(disabled))
                {
                    <option readonly selected>@Model.TeamCloneSettings.Visibility</option>
                }
                else
                {
                    <option>Public</option>
                    <option>Private</option>
                }
            </select>
        </li>
        <!-- Checkbox parts here
            Javascript will check if "CloneEverything"
            is enabled and will disable all of the following checkboxes
        -->
        <li class="list-group-item">
            <div class="form-group">
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="cloneApps" [email protected] asp-for="TeamCloneSettings.Parts.CloneApps">
                    <label class="custom-control-label" for="cloneApps">Clone Apps</label>
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="form-group">
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="cloneChannels" [email protected] asp-for="TeamCloneSettings.Parts.CloneChannels">
                    <label class="custom-control-label" for="cloneChannels">Clone Channels</label>
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="form-group">
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="cloneSettings" [email protected] asp-for="TeamCloneSettings.Parts.CloneSettings">
                    <label class="custom-control-label" for="cloneSettings">Clone Settings</label>
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="form-group">
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="cloneTabs" [email protected] asp-for="TeamCloneSettings.Parts.CloneTabs">
                    <label class="custom-control-label" for="cloneTabs">Clone Tabs</label>
                </div>
            </div>
        </li>
    </ul>
</div>

奇怪的渲染输入字段

https://i.stack.imgur.com/aZtUD.png

如您所见，输入被渲染两次，并且仅隐藏值将被传输。但这仅适用于部分视图中的输入字段，其他所有字段都可以。

有什么想法吗？会很棒：-）。

非常感谢！

我在ASP .net核心2.2 Razor页面上遇到了非常奇怪的行为。假设我有一个标准的剃刀页面。用户可以通过该页面发送一个新团队的请求，该请求应该是...

c# asp.net-mvc asp.net-core razor partial-views
2个回答
0
投票

在复选框上使用asp-for标签助手时，生成2个输入字段是正常的。它将创建复选框本身，还为模型绑定程序创建一个隐藏的输入字段，以发送用户选择的值。

0
投票

在这里找到解决方案：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.