Modal dialog not working (Razor)

Question

User-1063667917 posted

Hi,

I am sorry I am totally new at .NET Core 3.1 and razor pages and there seems to be very few information about Core 3.1 and Razor.

I am trying to show a modal dialog through AJAX to add clients, but is not working, all I get is the same form duplicated:

This is my partial view (AddPartial.cshtml):

@page
@model ClienteModel


<div class="modalHeader">
    <div class="modalLogo">
        <asp:Image runat="server" ImageUrl="~/content/images/modal_logo.png" alt="" Width="24" style="margin-top:8px" />
    </div>
    <div class="modalTitle">Add new client</div>
</div>
<form asp-page-handler="AddPartial">
    <div class="mppwrapper">

This is my Cliente.cshtml.cs:

public PartialViewResult OnGetAddPartial()
        {
            
            return new PartialViewResult
            {
                ViewName = "~/core/cliente/AddPartial",
                ViewData = new ViewDataDictionary<Cliente>(ViewData, new Cliente  { })
            };
        }

This is my Cliente.cshtml:

<div id="modal-placeholder"></div>

<span class="m-nav__link-text" data-toggle="ajax-modal" data-url="@Url.Page("Cliente", "_AddPartial")" id="btnnewcli">Add new</span>


 $(function () {
                var placeholderElement = $('#modal-placeholder');

                $('[data-toggle="ajax-modal"]').on('click', function (event) {
                    var url = $(this).data('url');
                    
                    $.get(url).done(function (data) {
                        placeholderElement.html(data);
                        placeholderElement.find('.modal').modal('show');
                    });
                });
            });

This is my model (Cliente.cs):

public class Cliente
    {

        public Int32 Id { get; set; }
        public string name { get; set; }
}

Any ideas what could be wrong?

Answer 1

User-854763662 posted

Hi  GeorgeClass ,

GeorgeClass

<asp:Image runat="server" ImageUrl="~/content/images/modal_logo.png" alt="" Width="24" style="margin-top:8px" />

Why do you use the asp.net grammar in a ASP.NET Core project?

In ASP.NET Core ,A partial view is a Razor markup file (.cshtml) that renders HTML output within another markup file's rendered output. In your code , it is incorrect that you create as a razor pages. Refer to the Microsoft official doc for more details about Partial View.

Here is a working demo , you could refer to

1.Create the AddPartial  view in the path /Pages/Shared

@model RazorPages3_1.Models.Client


<div class="container">
    <div class="title modal " tabindex="-1" id="createModal"
         data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modalHeader">
                    <div class="modalLogo">
                        <img src="~/content/images/modal_logo.jpg" alt="" Width="24" style="margin-top:8px" />
                    </div>
                    <div class="modalTitle">Add new client</div>
                </div>
                <div class="modal-body">
                    <form asp-page-handler="AddPartial">
                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>

                        <div class="form-group">
                            <label asp-for="Name" class="control-label"></label>
                            <input asp-for="Name" class="form-control" />
                            <span asp-validation-for="Name" class="text-danger"></span>
                        </div>

                        <div class="form-group">
                            <input type="submit" class="btn btn-primary" value="Create" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

2.Model

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

3.Client razor pages , 

@page
@model RazorPages3_1.ClientModel
@{
    ViewData["Title"] = "Client";
}

<h1>Client</h1>

<div id="modal-placeholder"></div>

<span class="m-nav__link-text" data-toggle="ajax-modal" data-url="@Url.Page("Client", "AddPartial")" id="btnnewcli">Add new</span>

@section Scripts
{
<script>
    $(function () {
                var placeholderElement = $('#modal-placeholder');

                $('[data-toggle="ajax-modal"]').on('click', function (event) {
                    var url = $(this).data('url');

                    $.get(url).done(function (data) {
                        placeholderElement.html(data);
                        placeholderElement.find('#createModal').modal('show');
                    });
                });
            });
</script>
}

4.Client.cshtml.cs

 public class ClientModel : PageModel
    {
        private readonly SampleContext _context;
        public ClientModel(SampleContext context)
        {
            _context = context;
        }
        public void OnGet()
        {

        }

        public PartialViewResult OnGetAddPartial()
        {

            return new PartialViewResult
            {
                ViewName = "AddPartial",
                ViewData = new ViewDataDictionary<Client>(ViewData, new Client { })
            };
        }

        public async Task<IActionResult> OnPostAddPartialAsync(Client model)
        {
            if (ModelState.IsValid)
            {
                _context.Client.Add(model);
                await _context.SaveChangesAsync();
                return RedirectToPage(nameof(Index));
            }
            return Page();
        }
    }

5.Result

For you are a new to asp.net core , I suggest that you take aside time to learn the Microsoft documentation  .

Best Regards,

Sherry

Answer 2

User-1063667917 posted

Thanks a lot Sherry !!! I'd buy you a beer