[英]Asp.Net - How to call ActionResult with ajax
I want to click "2" Ajax will call ActionResult and put new question up but not rerun page i have been trying two day but it haven't worked People help me, please ActionResult: 我想单击“ 2”,Ajax将调用ActionResult并提出新问题,但不重新运行页面,我已经尝试了两天,但没有成功。有人帮我,请ActionResult:
[HttpPost]
public ActionResult BaiTestIQ(int id)
{
var cauhoi = from q in data.Questions
join a in data.Answers on q.MaTests equals "IQ"
where q.MaCHoi == a.MaCHoi && a.keys == id
select new baitest()
{
Cauhoi = q.Noidung,
DAn1 = a.DAn1,
DAn2 = a.DAn2,
DAn3 = a.DAn3,
DAn4 = a.DAn4,
DAn5 = a.DAn5,
DAn6 = a.DAn6,
};
return View(cauhoi);
}
Function Ajax: 功能Ajax:
<script>
function loadcauhoi(num) {
$.ajax({
dataType: "Json",
type: "POST",
url: '@Url.Action("BaiTestIQ","TestIQ")',
data: { id: num },
success: function (a) {
// Replace the div's content with the page method's return.
alert("success");
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown)}
});
}
</script>
In HTML: 在HTML中:
<li>
<a href="javascript:;" onclick="loadcauhoi(2)">1</a>
</li>
enter image description here 在此处输入图片说明
Thanks for reading 谢谢阅读
I changed but it dont work!! 我改变了,但没有用!
I learned it myself so it was hard to get started 我是自己学的,所以很难上手
ActionResult: 动作结果:
[HttpPost]
public ActionResult BaiTestIQ(int id)
{
var cauhoi = from q in data.Questions
join a in data.Answers on q.MaTests equals "IQ"
where q.MaCHoi == a.MaCHoi && a.keys == id
select new baitest()
{
Cauhoi = q.Noidung,
DAn1 = a.DAn1,
DAn2 = a.DAn2,
DAn3 = a.DAn3,
DAn4 = a.DAn4,
DAn5 = a.DAn5,
DAn6 = a.DAn6,
};
return PartialView(cauhoi);
}
Function Ajax: 功能Ajax:
<script>
function loadcauhoi(num) {
$.ajax({
dataType: "Html",
type: "POST",
url: '@Url.Action("BaiTestIQ","TestIQ")',
data: { id: num },
success: function (a) {
// Replace the div's content with the page method's return.
alert("success");
$('#baitetstiq').html(a);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown)}
});
}
</script>
Full HTML: 完整HTML:
<div class="col-md-9" style="border-top-style:double;
border-top-color:aquamarine;
border-top-width:5px; margin-left:-15px">
<p style="text-align:center">
<b>Thời Gian Còn Lại Là:xxx</b>
</p>
<div id="baitestiq"></div>
@foreach(var item in Model)
{
<div class="baitest">
<div class="ques">
<img src="~/Hinh_Cauhoi/@item.Cauhoi" />
</div>
<div class="anw">
<div class="dapan">
<img src="~/Hinh_Cauhoi/@item.DAn1" />
</div>
<div class="dapan">
<img src="~/Hinh_Cauhoi/@item.DAn2" />
</div>
<div class="dapan">
<img src="~/Hinh_Cauhoi/@item.DAn3" />
</div>
<div class="dapan">
<img src="~/Hinh_Cauhoi/@item.DAn4" />
</div>
<div class="dapan">
<img src="~/Hinh_Cauhoi/@item.DAn5" />
</div>
<div class="dapan">
<img src="~/Hinh_Cauhoi/@item.DAn6" />
</div>
</div>
<div class="numbertest">
<ul>
<li>
<a href="javascript:;" onclick="loadcauhoi(2)">1</a>
</li>
</ul>
</div>
1st you need to return a partial view. 首先,您需要返回部分视图。
2nd you need to make a get ajax request and not a post 2您需要发出一个ajax请求而不是发布
3rd you need to test first the result of @Url.Action("BaiTestIQ","TestIQ"), translate this to a URL, directly to make sure it returns the expected results without the ajax call to avoid getting into sideways with routing etc. see this for example 第三,您需要首先测试@ Url.Action(“ BaiTestIQ”,“ TestIQ”)的结果,将其转换为URL,以直接确保其返回预期的结果而无需ajax调用,以避免侧身进入路由等例如看这个
See a working example here 在这里查看工作示例
Update: I see it now, you changed dataType: "Html" 更新:我现在看到了,您更改了dataType:“ Html”
You need to change several things: 1. The method is not changing any state so it should not be declared as a post method. 您需要更改几件事:1.该方法不会更改任何状态,因此不应将其声明为post方法。 You need to remove [HttpPost] attribute. 您需要删除[HttpPost]属性。
So the method might look like: 因此该方法可能类似于:
public JsonResult BaiTestIQ(int id)
{
var cauhoi = from q in data.Questions
join a in data.Answers on q.MaTests equals "IQ"
where q.MaCHoi == a.MaCHoi && a.keys == id
select new baitest()
{
Cauhoi = q.Noidung,
DAn1 = a.DAn1,
DAn2 = a.DAn2,
DAn3 = a.DAn3,
DAn4 = a.DAn4,
DAn5 = a.DAn5,
DAn6 = a.DAn6,
};
return Json(cauhoi.ToList(), JsonRequestBehavior.AllowGet);
}
3. Moving to the ajax call: 3.转到ajax调用:
<script>
function loadcauhoi(num) {
$.ajax({
url: '@Url.Action("BaiTestIQ","TestIQ")',
data: { id: num },
type: "GET",
cache: false,
dataType: "json",
success: function (a) {
// Replace the div's content with the page method's return.
alert("success");
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown)}
});
}
</script>
**But I'd like to suggest another approach using a ViewModel with a partial view because serializing JSON data can sometimes get you errors. **但是我想建议另一种使用带有局部视图的ViewModel的方法,因为序列化JSON数据有时会给您带来错误。 A quick tutorial 快速教程
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.