Как подключить POST к другой странице бритвы, загруженной через AJAX в модальное всплывающее окно? - PullRequest
Новая
       22

Как подключить POST к другой странице бритвы, загруженной через AJAX в модальное всплывающее окно?

0 голосов
/ 23 мая 2019

Редактировать: отметили, где ошибка в исходном коде мешала этому работать.

Я могу найти много информации и примеров этого на MVC, но, похоже, не относится к Razor Pages?

Простой сценарий: у меня есть страница (FooList), показывающая список элементов Foo.У каждого есть кнопка Изменить.Откроется модальное всплывающее окно с макетом (и данными), поступающими со второй страницы (FooEdit).

Форма редактирования появляется и хорошо заполняется, но я не могу понять, как заставить ее разместить данныевернуться к коду 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; }
}

Я прошел через весь материал MS Tutorial Core Asp.net.2.2, но это, кажется, не покрывает это.

Также как побочный вопрос, хотя он работает, есть ли способ "ASP helper tag" для выполнения бита ajax?

Ответы [ 2 ]

0 голосов
/ 27 мая 2019

Поняли, что проблема заключалась в теге «form» в разметке «Модальное диалоговое окно», который конфликтовал с тегом «form» на неполной странице. Удаление это исправило все, используя:

In FooEdit.cshtml 

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

В FooEdit.cshtml.cs 

public void OnPost()
{
    // Fires in here
}
0 голосов
/ 24 мая 2019

Я почти уверен, что странице 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>
...