Razor Page: ModalView wołane z linku a nie z buttona

0

Witam.
Mam problem z otagowaniem linka tak, żeby wołał ModalPartialView. Obecnie wywołuję okno edycyjne tak:

                                            <button type="button" class="btn btn-sm btn-info text-white mb-0 mt-0 ml-1 mr-1 p-1"
                                                    data-toggle="ajax-modal"
                                                    title="Edycja nazwy"
                                                    data-url="@Url.Page("Index","StagePartial")&[email protected]">
                                                <i class="fas fa-edit"></i>
                                            </button>

Chciałbym użyć zamiast buttona klikalnego wiersza w tabeli. Niestety poniższe nie działa :(

                                        <a href="#editstage" data-toggle="modal" data-target="#editstage">@stage.Title</a>

pomoże ktoś coś?

Poniżej obszerniejszy fragment kodu strony razorowej i widoku modalnego

    <div id="StageTable" class="col-12 p-3 mt-3">
        <form method="post">
            @if (Model.StagesViewModel.Stages.Count() > 0)
            {
                <table class="table table-sm table-hover">
                    <thead class="thead-light">
                        <tr>
                            <th>Symbol</th>
                            <th>Opis</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var stage in Model.StagesViewModel.Stages)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(m => stage.Sign)
                                </td>
                                <td>
                                    <div>
                                        <a href="#editstage" data-toggle="modal" data-target="#editstage">@stage.Title)</a>
                                    </div>
                                    @*<div>
                                        <button type="button" 
                                                data-toggle="ajax-modal"
                                                title="Edycja nazwy"
                                                data-url="@Url.PageLink("Index","StageModalPartial")&[email protected]">
                                            @stage.Title
                                        </button>
                                    </div>*@
                                </td>
                                <td>
                                    <div class="row group justify-content-end mr-0">
                                        <div>
                                            <button type="button" class="btn btn-sm btn-info text-white mb-0 mt-0 ml-1 mr-1 p-1"
                                                    data-toggle="ajax-modal"
                                                    title="Edycja nazwy"
                                                    data-url="@Url.Page("Index","StagePartial")&[email protected]">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                        </div>
                                        <div>
                                            <a onclick='DeleteStage("/api/Stages/@stage.Id")'
                                               class="btn btn-sm btn-danger mb-0 mt-0 ml-1 mr-1 p-1 text-white"
                                               title="Usuń stadium">
                                                <i class="far fa-trash-alt"></i>
                                            </a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        }
                        <tr>
                            <td colspan="3" class="text-right">
                                <div page-model="@Model.StagesViewModel.PageInfo" asp-action="Index" page-class="btn border"
                                     page-class-normal="btn btn-light" page-class-selected="btn btn-info active" class="btn-group">
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            }
            else
            {
                <p> Lista stadiów jest pusta</p>
            }
        </form>
    </div>

_StagePartialView.cshtml

@model StageDTO

<!-- Modal -->
<div class="modal fade" id="editstage" tabindex="-1" role="dialog" aria-labelledby="editStageLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="text-info" id="editStageLabel">@(Model.Id==0 ? "Nowe" : "Edycja") stadium</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-danger" asp-validation-summary="ModelOnly"></div>
                <div id="error-placeholder"></div>
                <form asp-page-handler="StagePartial">
                    <input name="IsValidate" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
                    <input asp-for="Id" type="hidden" value="@Model.Id"/>
                    <div class="form-group">
                        <input asp-for="Sign" id="sign" class="form-control" value="@Model.Sign" placeholder="Znak stadium" readonly="@(Model.Id.Equals(0) ? false : true)" />
                        <span asp-validation-for="Sign" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <input asp-for="Title" id="title" class="form-control" value="@Model.Title" placeholder="Opis stadium" />
                        <span asp-validation-for="Title" class="text-danger"></span>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-save="modal">Zapisz</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Wróć</button>
            </div>
        </div>
    </div>
</div>
0

Jest dobrze pamiętam jak to działa to Twój modal musisz wyrenderować na stronie. Obecnie zwracasz widok bez komponentu modal, a co za tym idzie to kliknięcie linka odnosi do czegoś co nie istnieje.

Spróbuj do tego użyć partial view.

0

To właśnie jest PartialView i z buttona działa jak trzeba ale nie wiem jak ostylować tag "a href=..." żeby robił to samo co z buttona
_StagePartialView.cshtml już zamieściłem. Poniżej w całości pozostałe pliki

Plik Index.cshtml.cs

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using SODP.Domain.DTO;
using SODP.Domain.Model;
using SODP.Domain.Services;
using SODP.UI.Pages.Shared;
using SODP.UI.ViewModels;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace SODP.UI.Pages.Stages
{
    [Authorize(Roles = "Administrator, ProjectManager")]
    public class IndexModel : SODPPageModel
    {
        private readonly IStagesService _stagesService;

        public IndexModel(IStagesService stagesService)
        {
            _stagesService = stagesService;
            ReturnUrl = "/Stages";
        }

        [BindProperty]
        public StagesViewModel StagesViewModel { get; set; }

        public async Task<IActionResult> OnGetAsync(int currentPage = 1, int pageSize = 15, string gosign = "")
        {
            var url = new StringBuilder();
            url.Append("/Stages?currentPage=:&pageSize=");
            url.Append(pageSize.ToString());

            StagesViewModel = new StagesViewModel
            {
                PageInfo = new PageInfo
                {
                    CurrentPage = currentPage,
                    ItemsPerPage = pageSize,
                    Url = url.ToString()
                },
            };
            StagesViewModel.Stages = await GetStages(StagesViewModel.PageInfo);

            return Page();
        }

        private async Task<IList<StageDTO>> GetStages(PageInfo pageInfo)
        {
            var serviceResponse = await _stagesService.GetAllAsync(pageInfo.CurrentPage, pageInfo.ItemsPerPage);
            pageInfo.TotalItems = serviceResponse.Data.TotalCount;
            pageInfo.CurrentPage = serviceResponse.Data.PageNumber;

            return serviceResponse.Data.Collection.ToList();
        }

        public async Task<PartialViewResult> OnGetStagePartial(int? id)
        {
            StageDTO stage;
            if (id != null)
            {
                var response = await _stagesService.GetAsync((int)id);
                stage = response.Data;
            }
            else
            {
                stage = new StageDTO();
            }
            var partialViewResult = new PartialViewResult()
            {
                ViewName = "_StagePartialView",
                ViewData = new ViewDataDictionary<StageDTO>(ViewData, stage)
            };

            return await Task.FromResult(partialViewResult);
        }

        public async Task<PartialViewResult> OnPostStagePartial(StageDTO stage)
        {
            ServiceResponse response ;
            if (ModelState.IsValid)
            {
                if (stage.Id == 0)
                {
                    response = await _stagesService.CreateAsync(stage);
                }
                else
                {
                    response = await _stagesService.UpdateAsync(stage);
                }
                if (!response.Success)
                {
                    foreach(var error in response.ValidationErrors)
                    {
                        ModelState.AddModelError(error.Key, error.Value);
                    }
                }
            }

            var partialViewResult = new PartialViewResult()
            {
                ViewName = "_StagePartialView",
                ViewData = new ViewDataDictionary<StageDTO>(ViewData, stage)
            };

            return partialViewResult;
        }
    }
}

Index.cshtml

@page
@model SODP.UI.Pages.Stages.IndexModel

@{
    ViewData["Title"] = "Stadia";
}
@using Microsoft.AspNetCore.Identity
@using SODP.Model
@using SODP.UI.TagHelpers
@inject SignInManager<User> SignInManager

<br />
<div class="container row p-0 m-0">
    <div class="col-8">
        <h2 class="text-info">Lista stadiów</h2>
    </div>
    @if (SignInManager.IsSignedIn(User))
    {
        <div id="modal-placeholder"></div>
        <div class="col-4 justify-content-end">
            <button type="button" class="btn btn-info form-control text-white float-right"
                    data-toggle="ajax-modal"
                    title="Nowe stadium"
                    data-url="@Url.Page("Index","StagePartial")">
                <i class="fas fa-plus"></i>&nbsp;&nbsp;&nbsp;Nowe stadium
            </button>
        </div>
    }

    <div id="StageTable" class="col-12 p-3 mt-3">
        <form method="post">
            @if (Model.StagesViewModel.Stages.Count() > 0)
            {
                <table class="table table-sm table-hover">
                    <thead class="thead-light">
                        <tr>
                            <th>Symbol</th>
                            <th>Opis</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var stage in Model.StagesViewModel.Stages)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(m => stage.Sign)
                                </td>
                                <td>
                                    <div>
                                        <a href="#editstage" data-toggle="ajax-modal" data-target="#editstage">@stage.Title</a>
                                    </div>
                                    @*<div>
                                        <button type="button" 
                                                data-toggle="ajax-modal"
                                                title="Edycja nazwy"
                                                data-url="@Url.PageLink("Index","StagePartial")&[email protected]">
                                            @stage.Title
                                        </button>
                                    </div>*@
                                </td>
                                <td>
                                    <div class="row group justify-content-end mr-0">
                                        <div>
                                            <button type="button" class="btn btn-sm btn-info text-white mb-0 mt-0 ml-1 mr-1 p-1"
                                                    data-toggle="ajax-modal"
                                                    title="Edycja nazwy"
                                                    data-url="@Url.Page("Index","StagePartial")&[email protected]">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                        </div>
                                        <div>
                                            <a onclick='DeleteStage("/api/Stages/@stage.Id")'
                                               class="btn btn-sm btn-danger mb-0 mt-0 ml-1 mr-1 p-1 text-white"
                                               title="Usuń stadium">
                                                <i class="far fa-trash-alt"></i>
                                            </a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        }
                        <tr>
                            <td colspan="3" class="text-right">
                                <div page-model="@Model.StagesViewModel.PageInfo" asp-action="Index" page-class="btn border"
                                     page-class-normal="btn btn-light" page-class-selected="btn btn-info active" class="btn-group">
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            }
            else
            {
                <p> Lista stadiów jest pusta</p>
            }
        </form>
    </div>
</div>



@section Scripts{
    <script src="~/js/delete.js"></script>
    <script src="~/js/stageList.js"></script>


    <script>
        function DeleteStage(url) {
            Delete(url);
        }
    </script>
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1