ASP.NET Core Razor Page Pass ID to Modal

Question

我一直在Razor页面中使用Modals，并使用页面模型（@ Model.Id）中的值传递数据。不幸的是，我现在需要传递一个从页面中选择的ID（数据按钮编号）。

<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)
        {
        }

Answer 1

您需要使用客户端语言，或依赖于JavaScript的库，例如JQuery。

<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);
    });
});