jquery 弹出窗口在 asp.net 核心 2.2 中不起作用

Question

I am trying to create a popup form to add some employees or categories.but when I click the "Create" button, it's not work anything.

Here is my code:

namespace EasyBay.Areas.Admin.Controllers
{
    [Area("Admin")]
    public class CategoryController : Controller
    {
        private ApplicationDbContext _db;

        public CategoryController(ApplicationDbContext db) //input parameter
        {
            _db = db;
        }

        public IActionResult Index()
        {
            return View(_db.Category.ToList());
        }



        [HttpGet]

        public ActionResult Create()
        {
            Category ca = new Category();
            return PartialView("_CatPartial", ca);

        }



        [HttpPost]
        [ValidateAntiForgeryToken]  //using for security purpose

        public async Task<IActionResult> Create(Category category)   //input parameter
        {
            if (ModelState.IsValid)
            {
                _db.Category.Add(category);
                await _db.SaveChangesAsync();
                TempData["save"] = "Product Type Save Successfully";  
                return RedirectToAction(nameof(Index));
            }

            return View(category);
        }
    }

Index.cshtml

@model IEnumerable<EasyBay.Models.Category>

@{
    ViewData["Title"] = "Index";
}

<div id="PlaceHolderHere"></div>

@*<button type="button" class="btn" id="c-btn" data-url="@Url.Action("Create")">Open Contact Form</button>*@
<button type="button" class="btn btn-primary" data-toggle="ajax-model" data-target="#addEmployee"  data-url= "@Url.Action("Create")">Create</button>

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CategoryName)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>

PartialView

@model Category

<div class="modal fade" id="#addEmployee">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="#addEmployeeLabel">Add Category</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span>x</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="Create">
                    <div class="form-group">
                        <label asp-for="CategoryName"> </label>
                            <input asp-for="CategoryName" class="form-control" />
                       <span asp-validation-for="CategoryName" class="text-danger"></span>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
                <button type="button" data-save="modal" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

js(site.js)

$(function () {
    var PlaceHolderElement = $('#PlaceHolderHere');
    $('.button[data-toggle="ajax-model"]').click(function (event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {

            PlaceHolderElement.html(data);

            PlaceHolderElement.find('.modal').modal('show');



        })
    })
    
})

Output:

here I also showed where I create PartialView.when I click the "Create" button does nothing. I don't understand where is wrong. I am beginner, please help anyone.

Answer 1

$(function () {
    var PlaceHolderElement = $('#PlaceHolderHere');
    $('button[data-toggle="ajax-model"]').click(function (event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {

            PlaceHolderElement.html(data);

            PlaceHolderElement.find('.modal').modal('show');



        })
    })
    
})