ASP.NET Core Razor 页面传递 ID 到模态答案

【问题标题】：ASP.NET Core Razor Page Pass ID to ModalASP.NET Core Razor 页面传递 ID 到模态
【发布时间】：2019-09-26 15:45:30
【问题描述】：

我一直在 Razor 页面中使用 Modals，并使用页面模型 (@Model.Id) 中的值传递数据。不幸的是，我现在需要传递一个从页面中选择的 id (data-buttonno)。

<button type="button" data-target="#process" data-toggle="modal" data-buttonno="one">
        <span class="text">Button 1</span>
</button>


<button type="button" data-target="#process" data-toggle="modal" data-buttonno="two">
        <span class="text">Button 2</span>
</button>


<button type="button" data-target="#process" data-toggle="modal" data-buttonno="three">
        <span class="text">Button 3</span>
</button>

我想将 buttonno 设置为模态中的隐藏字段以传回我的 cs，但我不知道怎么做？

<div id="process" class="modal" tabindex="-1" role="dialog">

    <form asp-page-handler="assignTask" method="post">
        <input type="hidden" name="id" value="@Model.Id" />
        <input type="hidden" name="buttonNo" value=??/>
        <div class="form-group">
             <button class="btn btn-success btn-icon-split">
                <span class="text">Submit</span>
            </button>
        </div>
    </form>
</div>

page.cs

 public async Task<IActionResult> OnPostAssignAsync(int id, int buttonNo)
        {
        }

【问题讨论】：

你不使用服务器端代码，你需要使用javascript。

标签： asp.net

【解决方案1】：

您需要使用客户端语言，或者像 JQuery 这样的 javascript 依赖库。

<button class="js-modal-update" type="button" data-target="#process" data-toggle="modal" data-buttonno="one">
    <span class="text">Button 1</span>
</button>
<button class="js-modal-update" type="button" data-target="#process" data-toggle="modal" data-buttonno="two">
    <span class="text">Button 2</span>
</button>
<button class="js-modal-update" type="button" data-target="#process" data-toggle="modal" data-buttonno="three">
    <span class="text">Button 3</span>
</button>

我已经给你的按钮一个类属性，所以我们可以在服务器端定位它们。

//add this to your js file after jquery library
$(function(){
    //loop through your buttons and add a click event
    $('.js-modal-update').on('click', function(){
        //get the button number of the control
        const buttonNumber = $(this).attr('data-buttonno');
        //get the input from the modal
        let inputField = $('#process').find('input[type="hidden"][name="buttonNo"]');
        //assign the value
        $(inputField).val(buttonNumber);
    });
});

【讨论】：