如何将 POST 连接到通过 AJAX 加载的不同剃须刀页面到模式弹出窗口中？

Question

编辑：已标记原始代码中的错误导致其无法正常工作的位置。

我可以在 MVC 上找到大量相关信息和示例，但似乎不适用于 Razor Pages？

简单场景：我有一个页面 (FooList) 显示 Foo 项目的列表。每个都有一个编辑按钮。这将打开一个模式弹出窗口，其中的布局（和数据）来自第二页 (FooEdit)。

Edit 表单出现并且填充得很好，但我不知道如何让它将数据发布回后面的 FooEdit 代码？

列表页，FooList.cshtml

@page
@model Pages.FooListModel

<table>
    @foreach (var item in Model.FooListVM)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                <a onclick="openModal(@item.ID);">Edit</a>
            </td>
        </tr>
    }
</table>

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title" id="exampleModalLabel">Edit Foo</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form>   <---- Edit: ** This shouldn't be here **
                <div class="modal-body">
                </div>
            </form>   <---- Edit
        </div>
    </div>
</div>

<script>
    function openModal(i) {
        $.get("FooEdit?id="+i,
            null,
            data => {
                $("#editModal").modal("show");
                $("#editModal .modal-body").html(data);
            });
    };
</script>

后面的代码，FooList.cshtml.cs

public class FooListModel : PageModel
{
    public IList<FooListVM> FooListVM { get; set; }

    public void OnGet()
    {
        FooListVM = new List<FooListVM>
        {
            new FooListVM { ID = 1, Name = "Foo 1" },
            new FooListVM { ID = 2, Name = "Foo2" }
        };
    }
}

public class FooListVM
{
    public int ID { get; set; }
    public string Name { get; set; }
}

弹出窗口的第二页，FooEdit.cshtml

@page
@model Pages.FooEditModel

@(Layout=null)

<form method="post">
    <input asp-for="FooEditVM.Name" class="form-control" /><br />
    <input asp-for="FooEditVM.Stuff1" class="form-control" /><br />
    <input asp-for="FooEditVM.Stuff2" class="form-control" /><br />
    <input type="submit" value="Save"/>
</form>

以及弹出窗口背后的代码 FooEdit.cshtml.cs

public class FooEditModel : PageModel
{
    [BindProperty]
    public FooEditVM FooEditVM { get; set; }

    public void OnGet(int id)
    {
        FooEditVM = new FooEditVM
        {
            Name = $"This is item {id}",
            Stuff1 = "Stuff1",
            Stuff2 = "Stuff2"
        };
    }

    public void OnPost(int id)
    {
        // How do we get to here???
        var a = FooEditVM.Name;
    }
}

public class FooEditVM
{
    public string Name { get; set; }
    public string Stuff1 { get; set; }
    public string Stuff2 { get; set; }
}

我已经阅读了有关 Asp.net Core 2.2 的所有 MS 教程，但似乎没有涵盖这一点。

还有一个附带的问题，虽然它有效，但是否有一种“ASP 辅助标签”方式来处理 ajax 位？

Answer 1

已经意识到问题在于模态对话框标记中的“表单”标签与部分页面中的“表单”标签发生冲突。删除它可以修复所有问题：

在 FooEdit.cshtml 中

<form id="editForm" asp-page="FooEdit">
. . . 
</form>

在 FooEdit.cshtml.cs 中

public void OnPost()
{
    // Fires in here
}

Answer 2

我很确定 fooedit 页面需要一些 jQuery 来处理这个问题。

请参阅下文，了解我将在 fooedit 页面中执行的操作。

@page
@model Pages.FooEditModel

@(Layout=null)

  <form id=fooedit method="post" action="FooEdit">  
      <input asp-for="FooEditVM.Name" class="form-control" /><br />
    <input asp-for="FooEditVM.Stuff1" class="form-control" /><br />
    <input asp-for="FooEditVM.Stuff2" class="form-control" /><br />
    <input type="submit" value="Save"/>    
  </form>

<SCRIPT language="JavaScript" type="text/Javascript">
<!--
$(document).ready(function(e) {   
    $("#fooedit").submit(function(e) {       
    e.preventDefault();        
    var form_data = $(this).serialize();
    var form_url = $(this).attr("action");
    var form_method = $(this).attr("method").toUpperCase();
    $.ajax({
        url: form_url, 
        type: form_method,      
        data: form_data,     
        cache: false,
        success: function(returnhtml){                          
          $("#editModal.modal-body").html(returnhtml);                  
        }           
    });    
    });    
});
</SCRIPT>