ASP.net MVC Core Razor 页面和 Ajax JQuery

Posted 2023-03-27

【中文标题】ASP.net MVC Core Razor 页面和 Ajax JQuery

【英文标题】：ASP.net MVC Core Razor Pages and Ajax JQuery

【发布时间】：2019-08-04 14:10:12

【问题描述】：

非常感谢您的帮助。我从工作中得到了一个任务，自从我被困住以来已经有两个星期了。非常感谢您的帮助和建议。我正在使用 ASP.NET 核心 2.1 和 EnitityFramework。 我收到此错误“：HTTP404：未找到-服务器未找到与请求的URI（统一资源标识符）匹配的任何内容。 (XHR)POST - https://localhost:44336/EducationPage?handler=Add" 我已经尝试了两个星期了。谢谢您的帮助。 我有一个名为 EducationPage 的 RazorPage。在该页面内，我正在填充我的数据。在同一页面中，我想允许用户通过单击将弹出一个表单的创建按钮来创建新的教育对象。用户输入数据，一旦点击添加按钮，我的 ajax 代码就会被触发。 这是我的表格

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <form id="myForm" method="post">
                    @html.AntiForgeryToken()
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <input type="hidden" asp-for="obj.EducationDetailId" id="eduId" />
                    <input type="hidden" asp-for="obj.UserId" id="userId" />
                    <div class="form-group">
                        <label asp-for="obj.InstituteName" class="control-label"></label>
                        <input asp-for="obj.InstituteName" id="instName" class="form-control" />
                        <span asp-validation-for="obj.InstituteName" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="obj.CertificateName" class="control-label"></label>
                        <input asp-for="obj.CertificateName" id="certName" class="form-control" />
                        <span asp-validation-for="obj.CertificateName" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="obj.Major" class="control-label"></label>
                        <input asp-for="obj.Major" id="major" class="form-control" />
                        <span asp-validation-for="obj.Major" class="text-danger"></span>
                    </div>

                    <div class="form-group">
                        <label asp-for="obj.startDate" class="control-label"></label>
                        <input type="text" id="startDate" asp-format="0:MM/dd/yyyy" asp-for="obj.startDate" class="form-control" />
                        <span asp-validation-for="obj.startDate" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="obj.EndDate" class="control-label"></label>
                        <input type="text" id="endDate" asp-format="0:MM/dd/yyyy" asp-for="obj.startDate" class="form-control" />
                        <span asp-validation-for="obj.EndDate" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="obj.Grade" class="control-label"></label>
                        <input asp-for="obj.Grade" id="grade" class="form-control" />
                        <span asp-validation-for="obj.Grade" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="obj.EduDescrp" class="control-label"></label>
                        <textarea asp-for="obj.EduDescrp" id="descp" class="form-control"></textarea>
                        <span asp-validation-for="obj.EduDescrp" class="text-danger"></span>
                    </div>
                    @*<div class="form-group">
                            <label asp-for="obj.UserId" class="control-label"></label>
                            <select asp-for="obj.UserId" class ="form-control" asp-items="ViewBag.UserId" hidden></select>
                        </div>*@
                    @*<div class="form-group">
                            <input type="submit" value="Create" class="btn btn-primary" />
                        </div>*@
                </form>
                <div id="msg"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="btnAdd">Add</button>
                <button type="button" class="btn btn-primary" id="btnUpdate" style="display:none;" onclick="Update();">Update</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我的 Ajax 代码是这样的：

<script>
        $("#btnAdd").click(function () 
            var options = ;
            options.url = "/EducationPage?handler=Add";
            options.type = "POST";

            var obj = ;
            obj.eduId = $("#eduId");
            obj.userId = $("#userId");
            obj.instName = $("#instName").val();
            obj.certName = $("#certName").val();
            obj.major = $("#major").val();
            obj.startDate = $("#startDate").val();
            obj.endtDate = $("#endDate").val();
            obj.descrp = $("#descp").val();
            console.log(obj);
            options.data = JSON.stringify(obj);
            options.data = $("#myForm").serialize;
            //console.log(options.data)
            options.contentType = "application/json; charset=utf-8";
            options.dataType = "json";
            options.beforeSend = function (xhr) 
            xhr.setRequestHeader("MY-XSRF-TOKEN",
            $('input:hidden[name="__RequestVerificationToken"]').val());
            ;
            options.success = function (msg) 
                $("#msg").html(msg);
            ;
            options.error = function () 
                $("#msg").html("Error while making Ajax call!");
            ;
            console.log(options);
            $.ajax(options);
        );
    </script>

我的后端代码是这样的

   [HttpPost]
        public async Task<IActionResult> OnPostAdd([FromBody] Obj obj)
        
            if (!ModelState.IsValid)
            
                return Page();
            
            var UserInDB = await _userManager.GetUserAsync(HttpContext.User);
            obj.UId = UserInDB.Id;
            _db.Obj.Add(obj);
            await _db.SaveChangesAsync();
            return new JsonResult("Customer Added Successfully!");
        



    The error message I am getting is this :
HTTP404: NOT FOUND - The server has not found anything matching the       requested URI (Uniform Resource Identifier).
    "(XHR)POST - https://localhost:44336/EducationPage?handler=Add"

【问题讨论】：

options.data = JSON.stringify(obj); 在这一行，您是否尝试将 obj 变量分配给数据？像这样：options.data = obj;

此 http 错误消息与 razor 页面无关。 EducationPage 是您的控制器或操作吗？您的操作是 OnPostAdd。但是您的网址就像 /EducationPage... 您确定这是正确的吗？我问是因为我不知道你的项目的结构。如果 EducationPage 是您的控制器，请尝试像这样更改网址 /EducationPage/OnPostAdd...

【参考方案1】：

它现在可以工作了，我的坏，我在我的服务中方便地给了一个空间。AddAntiforgery(option => option.HeaderName = "MY-XSRF-TOKEN");我删除了它并且它有效。所以上面的代码没什么不好