javascript - 模态按钮未在单击时注册

Question

我对 MVC 开发非常陌生，并且正在开发一个提交抽奖券的应用程序。我相信我的问题出在我的脚本上，一旦我开始添加变量和 ajax 来发布数据，按钮就没有响应。

非常感谢任何帮助或建议。

下面是我的脚本和模态，脚本中注释掉的部分是按钮失败的地方

//控制器

using HR.HolidayFamiliesApplication.Web.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;

namespace HR.HolidayFamiliesApplication.Web.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public IActionResult Index()
        {
            return View();
        }

        public IActionResult Privacy()
        {
            return View();
        }

        [ResponseCache(Duration = 0, Location = 
        ResponseCacheLocation.None, NoStore = true)]
        public IActionResult Error()
        {
            return View(new ErrorViewModel { RequestId = 
        Activity.Current?.Id ?? HttpContext.TraceIdentifier });
        }

        private readonly ConnectionDB _db;

        public HomeController(ConnectionDB db)
        {
            _db = db;
        }

        public JsonResult InsertRecords(RaffleSubmissions submissions)
        {
            RaffleSubmissions rs = new RaffleSubmissions();
            submissions.Raffle_ID = rs.Raffle_ID;
            submissions.Raffle_Item_Name = rs.Raffle_Item_Name;
            submissions.Number_of_Tickets = rs.Number_of_Tickets;
            submissions.User_Name = rs.User_Name;
            submissions.Insert_Date = rs.Insert_Date;

            _db.HolidayFamilies_Raffle_Submissions.Add(submissions);
            _db.SaveChangesAsync();
            return Json(submissions);
        }

        public IActionResult RaffleList()
        {
            var results = _db.HolidayFamilies_Raffles.ToList();
            return View(results);
        }

        public ActionResult Details(int Id)
        {
            RaffleList frnds = new RaffleList();
            frnds = _db.HolidayFamilies_Raffles.Find(Id);
            return PartialView("_Details", frnds);
        }

    }
}

//看法

    @model IEnumerable<HR.HolidayFamiliesApplication.Web.Models.RaffleList>

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

<h2>Holiday Family Raffles</h2>

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Raffle_ID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Raffle_Item_Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Raffle_Item_Description)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Raffle_ID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Raffle_Item_Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Raffle_Item_Description)
            </td>
            <td>
                <button type="button" class="anchorDetail" data-toggle="modal" data-target="#exampleModal" data-id="@item.Raffle_ID">
                    Submit Tickets
                </button>
            </td>
        </tr>
    }

</table>


<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>
                    Raffle Tickets: <input type="number" id="txtnumber" />
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="btinsert">Save changes</button>
            </div>
        </div>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>


<script>
    $("#btinsert").click(function () {
        $.ajax({
            type: 'POST',
            url: '../Home/InsertRecords',
            data: {
                "Raffle_ID": id, "Raffle_Item_Name": "", "Number_of_Tickets": txtnumber.val(), "User_Name": "", "Insert_Date": Date.now()
            },
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {

            }
            ,
            error: function (ex) {
                alert('Failed to retrieve data : ' + ex);
            }
        });

        alert("Tickets have been submitted");
    });
</script>

 $.ajax({
            type: 'POST',
            url: '../Home/InsertRecords',
            data: {
                    "Raffle_ID": id, "Raffle_Item_Name": "", "Number_of_Tickets": txtnumber.val(), "User_Name": "", "Insert_Date": Date.now()
                  },
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {

            }
             ,
            error: function (ex) {
                alert('Failed to retrieve data : ' + ex);
            }
        });

标签： javascriptasp.net-mvcbootstrap-modal