ASP.NET core MVC,页面如何在function中通过url调用控制器中的action,请写一些有ajaxsubmit的示例
时间: 2024-03-12 21:47:35 浏览: 182
MVC示例运用ajax
假设我们有一个控制器叫做 `HomeController`,里面有一个名为 `Index` 的 action,我们可以通过以下方式在页面中通过 url 调用它:
首先需要安装 jQuery Unobtrusive Ajax 库,可以通过 NuGet 包管理器来安装。
然后我们可以使用 `Ajax.BeginForm` 方法来创建一个带有 Ajax 提交功能的表单。示例代码如下:
```html
@using (Ajax.BeginForm("Index", "Home", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "result" }))
{
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
</div>
<div>
<label for="age">Age:</label>
<input type="text" name="age" id="age" />
</div>
<input type="submit" value="Submit" />
}
<div id="result"></div>
<script>
$(function () {
$('form').submit(function () {
if ($(this).valid()) {
$(this).ajaxSubmit({
target: '#result',
success: function () {
console.log('success!');
}
});
}
return false;
});
});
</script>
```
在上述代码中,我们创建了一个带有 `Ajax.BeginForm` 方法的表单,指定了 `Index` action 和 `Home` 控制器。在 JavaScript 中,我们使用了 jQuery 的 `ajaxSubmit` 方法来提交表单,并在 `success` 回调函数中处理返回的数据。
需要注意的是,在使用 `Ajax.BeginForm` 方法时,我们需要在视图中引入 `jquery.unobtrusive-ajax.min.js` 脚本,这个脚本会自动将表单转换为 Ajax 提交。
阅读全文