locked
Modal popup and pass value RRS feed

  • Question

  • User-1063667917 posted

    Hi,

    I am starting with Razor Pages, I have a table and each record has a "details" button, so I need to show a modal popup with the details, I used to do this in asp.net with Ajaxtoolkit ModalPopupExtender, but now I have no idea.

    I have tried this sample https://softdevpractice.com/blog/razor-pages-ajax-modals-with-validation/ but no luck, I just can't make it work.

    Any ideas? any tiny sample?

    (Please, not MVC, that will confuse me even more)

    Thanks in advance :)

    Wednesday, May 13, 2020 6:25 AM

Answers

  • User711641945 posted

    Hi GeorgeClass,

    Here is a working demo:

    Model:

    public class Test
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    Index.cshtml:

    @page
    @model IndexModel
    
    <table id="myTable" class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Test[0].Id)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Test[0].Name)
                </th>
                <th> </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Test)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        <button class="btn btn-primary" onclick="GetDetails('@item.Id')">Details</button>                  
                    </td>
                </tr>
            }
        </tbody>
        <tbody>
        </tbody>
    </table>
    <div class="modal fade" id="DetailModal" role="dialog"></div>
    
    @section Scripts {
        <script>
            function GetDetails(id) {
                $.ajax({
                    url: "/Tests/Details?id="+id,
                    type: "GET",
                    dataType: "html",
                    success: function (data) {
                        console.log(data);
                        $('#DetailModal').html(data);
                        $('#DetailModal').modal('show');
                    }
                })
            }
          
        </script>
    }

    Index.cshtml.cs:

    public class IndexModel : PageModel
    {
        private readonly Razor3_1Context _context;
    
        public IndexModel(Razor3_1Context context)
        {
            _context = context;
        }
    
        public IList<Test> Test { get; set; }
    
        public async Task OnGetAsync()
        {
            Test = await _context.Test.ToListAsync();
        }
    }

    Details.cshtml:

    @page
    @model DetailsModel
    
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addEmployeeLabel">Add Employee</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <dl class="row">
                    <dt class="col-sm-2">
                        @Html.DisplayNameFor(model => model.Test.Name)
                    </dt>
                    <dd class="col-sm-10">
                        @Html.DisplayFor(model => model.Test.Name)
                    </dd>
                </dl>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>

    Details.cshtml.cs:

    public class DetailsModel : PageModel
    {
        private readonly Razor3_1Context _context;
    
        public DetailsModel(Razor3_1Context context)
        {
            _context = context;
        }
    
        public Test Test { get; set; }
    
        public async Task<IActionResult> OnGetAsync(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }
    
            Test = await _context.Test.FirstOrDefaultAsync(m => m.Id == id);
    
            if (Test == null)
            {
                return NotFound();
            }
            return Page();
        }
    }

    Result:

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 13, 2020 8:06 AM

All replies

  • User-821857111 posted

    I have tried this sample https://softdevpractice.com/blog/razor-pages-ajax-modals-with-validation/ but no luck, I just can't make it work.
    You should show the code you have tried to get to work. It may be that a couple of corrections will resolve your issue.

    Wednesday, May 13, 2020 7:39 AM
  • User711641945 posted

    Hi GeorgeClass,

    Here is a working demo:

    Model:

    public class Test
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    Index.cshtml:

    @page
    @model IndexModel
    
    <table id="myTable" class="table">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Test[0].Id)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Test[0].Name)
                </th>
                <th> </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Test)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        <button class="btn btn-primary" onclick="GetDetails('@item.Id')">Details</button>                  
                    </td>
                </tr>
            }
        </tbody>
        <tbody>
        </tbody>
    </table>
    <div class="modal fade" id="DetailModal" role="dialog"></div>
    
    @section Scripts {
        <script>
            function GetDetails(id) {
                $.ajax({
                    url: "/Tests/Details?id="+id,
                    type: "GET",
                    dataType: "html",
                    success: function (data) {
                        console.log(data);
                        $('#DetailModal').html(data);
                        $('#DetailModal').modal('show');
                    }
                })
            }
          
        </script>
    }

    Index.cshtml.cs:

    public class IndexModel : PageModel
    {
        private readonly Razor3_1Context _context;
    
        public IndexModel(Razor3_1Context context)
        {
            _context = context;
        }
    
        public IList<Test> Test { get; set; }
    
        public async Task OnGetAsync()
        {
            Test = await _context.Test.ToListAsync();
        }
    }

    Details.cshtml:

    @page
    @model DetailsModel
    
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addEmployeeLabel">Add Employee</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <dl class="row">
                    <dt class="col-sm-2">
                        @Html.DisplayNameFor(model => model.Test.Name)
                    </dt>
                    <dd class="col-sm-10">
                        @Html.DisplayFor(model => model.Test.Name)
                    </dd>
                </dl>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>

    Details.cshtml.cs:

    public class DetailsModel : PageModel
    {
        private readonly Razor3_1Context _context;
    
        public DetailsModel(Razor3_1Context context)
        {
            _context = context;
        }
    
        public Test Test { get; set; }
    
        public async Task<IActionResult> OnGetAsync(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }
    
            Test = await _context.Test.FirstOrDefaultAsync(m => m.Id == id);
    
            if (Test == null)
            {
                return NotFound();
            }
            return Page();
        }
    }

    Result:

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 13, 2020 8:06 AM
  • User-1063667917 posted

    Rena, you're a lifesaver !!!!

    I really appreciate your help

    Thank you :)

    Wednesday, May 13, 2020 2:29 PM