ASP.NET核心剃刀页面中的Ajax请求 - 不更新字段 [英] Ajax request in ASP.NET core razor pages - not updating fields
问题描述
（根据进行更改后我昨天提出的问题）
我的目标是每次对下拉列表进行更改时动态更新两个字段。在我的示例中，下拉列表是员工列表，我需要每次更改时更新组/子组字段。我正在尝试调用我创建的C＃方法，该方法运行2个linq查询并将结果设置为字段。我已经验证了这种方法是否正常工作。
我现在在我的文件Edit.html.cs中有以下方法：
//更新所选专家组和子组
[BindProperty]
public GroupModel Group {get;组; }
public class GroupModel
{
public string subGroup {get;组; }
公共字符串组{get;组; }
}
public ActionResult OnPostSearchCurrGroup（）
{
var subgroupQuery =（来自c in _context.ppcc_matrix
来自e in _context.employees
from s in _context.subGroups
其中c.employeesID == e.Id
其中e.subGroupsID == s.Id
select s.subgrp_nm）.FirstOrDefault（）;
//subGroups.subgrp_nm = subgroupQuery;
var groupQuery =（来自_context.ppcc_matrix中的c
来自econ in _context.employees
来自s in _context.subGroups
来自g in _context.groups
其中c.employeesID == e.Id
其中e.subGroupsID == s.Id
其中s.groupsID == g.Id
select g.grp_nm）.FirstOrDefault（） ;
//groups.grp_nm = groupQuery;
var result = new GroupModel {subGroup = subgroupQuery，group = groupQuery};
返回新的JsonResult（结果）;
}
我在Edit.cshtml中有这三个字段：
< div class =form-group>
< label asp-for =ppcc_matrix.employeesIDclass =control-label>< / label>
< select asp-for =ppcc_matrix.employeesIDclass =form-controlid =employeeasp-items =ViewBag.employeesID>
< option disabled selected value =0style =display：none> - select - < / option>
< / select>
< / div>
< div class =form-group>
< label asp-for =Group.groupid =grptxt> Group< / label>
< input asp-for =Group.groupid =grpnmclass =form-controldisabled />
< / div>
< div class =form-group>
< label asp-for =Group.subGroupid =subgrptxt> SubGroup< / label>
< input asp-for =Group.subGroupid =subgrpnmclass =form-controldisabled />
< / div>
使用我分配给它们的三个id，我在同一个文件中运行这个javascript和ajax请求：
@ *动态更新视图以显示所选专家的组和子组* @
< script language =javascripttype =text / javascript>
var employee = document.getElementById（'employee'）;
employee.addEventListener（'change'，UpdateGroup）;
函数UpdateGroup（）{
$ .ajax（{
type：'post'，
url：'/ edit？handler = searchcurrgroup'，
contenttype： application / json; charset = utf-8，
datatype：'json'，
data：'{}'，
async：'true'，
success：function（数据）{
OnSuccessed（data.subGroup）{
document.getElementById（'subgrpnm'）。append（subgroupQuery）;
}
OnSuccessed（data.group）{
document.getElementById（'grpnm'）。append（groupQuery）;
}
}
}）
}
< / script>
仍然没有任何反应，我没有收到错误。
我是什么尝试过：
多篇文章，也作为对我之前类似问题的评论提交。
这篇文章很有帮助，但弄清楚如何显示结果令人困惑对我来说。
.ajax（{
type：'post'，
url：'/ edit？handler = searchcurrgroup'，
contenttype：application / json; charset = utf-8，
数据类型：'json'，
数据：'{}'，
async：'true'，
成功：函数（数据）{
OnSuccessed（data.subGroup）{
document.getElementById（'subgrpnm'）。append（subgroupQuery）;
}
OnSuccessed（data.group）{
document。 getElementById（'grpnm'）。append（groupQuery）;
}
}
}）
}
< / script>
仍然没有任何反应，我没有收到任何错误。
我尝试了什么：
多篇文章，也作为对我之前类似问题的评论提交。
这篇文章很有帮助，但弄清楚如何显示结果让我很困惑。
您知道如何使用Chrome调试工具吗？您应该使用它们来查看此代码，查看请求返回的内容并查看成功时会发生什么。
你的代码看起来像是在你的成功方法中定义了两个函数，它实际上并没有调用任何东西？什么是OnSuccessed？
当你使用jquery时，你应该使用jquery来设置你的元素。但总的来说，我建议从2004年开始逐渐远离并考虑使用React或Angular，甚至是Handlebars来模拟你的UI而不是一直查找DOM
(After making changes based on this question I made yesterday)
My goal is to dynamically update two fields every time there's a change made to a dropdown list. In my example, the dropdown is a list of employees, and I need the group/subgroup fields to update every time it changes. I'm attempting to call the C# method I've created which runs 2 linq queries and sets the result to the fields. I've verified that this method works properly.
I now have the following method in my file "Edit.html.cs":
// Updates chosen specialist's group and subgroup
[BindProperty]
public GroupModel Group { get; set; }
public class GroupModel
{
public string subGroup { get; set; }
public string group { get; set; }
}
public ActionResult OnPostSearchCurrGroup()
{
var subgroupQuery = (from c in _context.ppcc_matrix
from e in _context.employees
from s in _context.subGroups
where c.employeesID == e.Id
where e.subGroupsID == s.Id
select s.subgrp_nm).FirstOrDefault();
//subGroups.subgrp_nm = subgroupQuery;
var groupQuery = (from c in _context.ppcc_matrix
from e in _context.employees
from s in _context.subGroups
from g in _context.groups
where c.employeesID == e.Id
where e.subGroupsID == s.Id
where s.groupsID == g.Id
select g.grp_nm).FirstOrDefault();
//groups.grp_nm = groupQuery;
var result = new GroupModel { subGroup = subgroupQuery, group = groupQuery };
return new JsonResult(result);
}
I have these three fields in "Edit.cshtml":
<div class="form-group">
<label asp-for="ppcc_matrix.employeesID" class="control-label"></label>
<select asp-for="ppcc_matrix.employeesID" class="form-control" id="employee" asp-items="ViewBag.employeesID">
<option disabled selected value="0" style="display:none">--select--</option>
</select>
</div>
<div class="form-group">
<label asp-for="Group.group" id="grptxt">Group</label>
<input asp-for="Group.group" id="grpnm" class="form-control" disabled />
</div>
<div class="form-group">
<label asp-for="Group.subGroup" id="subgrptxt">SubGroup</label>
<input asp-for="Group.subGroup" id="subgrpnm" class="form-control" disabled />
</div>
Using the three id's I've assigned to them, I run this javascript and ajax request in the same file:
@* Dynamically updates the view to show chosen specialist's group and subgroup*@
<script language="javascript" type="text/javascript">
var employee = document.getElementById('employee');
employee.addEventListener('change', UpdateGroup);
function UpdateGroup() {
$.ajax({
type: 'post',
url: '/edit?handler=searchcurrgroup',
contenttype: "application/json; charset=utf-8",
datatype: 'json',
data: '{}',
async: 'true',
success: function (data) {
OnSuccessed(data.subGroup) {
document.getElementById('subgrpnm').append(subgroupQuery);
}
OnSuccessed(data.group) {
document.getElementById('grpnm').append(groupQuery);
}
}
})
}
</script>
Still, nothing happens and I receive no errors.
What I have tried:
Multiple articles, submitted as a comment on my similar previous question as well.
This article has been helpful, but figuring out how to display the results is confusing to me.
.ajax({ type: 'post', url: '/edit?handler=searchcurrgroup', contenttype: "application/json; charset=utf-8", datatype: 'json', data: '{}', async: 'true', success: function (data) { OnSuccessed(data.subGroup) { document.getElementById('subgrpnm').append(subgroupQuery); } OnSuccessed(data.group) { document.getElementById('grpnm').append(groupQuery); } } }) } </script>
Still, nothing happens and I receive no errors.
What I have tried:
Multiple articles, submitted as a comment on my similar previous question as well.
This article has been helpful, but figuring out how to display the results is confusing to me.
Do you know how to use Chrome debugging tools? You should use them to watch this code, see what the request returns and see what happens when it succeeds.
Your code looks to me like it defines two functions in your success method, it doesn't actually call anything? What is OnSuccessed?
As you're using jquery, you should use jquery to set your elements. But overall, I'd recommend drifting away from 2004 and looking into using React or Angular, or even Handlebars, to template your UI rather than looking up the DOM all the time
这篇关于ASP.NET核心剃刀页面中的Ajax请求 - 不更新字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
