我有这样的示例代码：
<div class="cart">
<a onclick="addToCart('@Model.productId');" class="button"><span>Add to Cart</span></a>
</div>
<div class="wishlist">
<a onclick="addToWishList('@Model.productId');">Add to Wish List</a>
</div>
<div class="compare">
<a onclick="addToCompare('@Model.productId');">Add to Compare</a>
</div>
如何编写 JavaScript 代码来调用控制器操作方法？
【问题讨论】：
标签： javascript asp.net-mvc asp.net-mvc-3 razor
使用 jQuery ajax：
function AddToCart(id)
{
$.ajax({
url: 'urlToController',
data: { id: id }
}).done(function() {
alert('Added');
});
}
【讨论】：
只需使用 Javascript 调用您的 Action Method，如下所示：
var id = model.Id; //if you want to pass an Id parameter
window.location.href = '@Url.Action("Action", "Controller")/' + id;
希望这会有所帮助...
【讨论】：
您正在调用 addToCart 方法并传递产品 ID。现在您可以使用 jQuery ajax 将该数据传递给您的服务器端操作方法。d
jQuery post 是 jQuery ajax 的简称。
function addToCart(id)
{
$.post('@Url.Action("Add","Cart")',{id:id } function(data) {
//do whatever with the result.
});
}
如果您想要更多选项，例如成功回调和错误处理，请使用 jQuery ajax，
function addToCart(id)
{
$.ajax({
url: '@Url.Action("Add","Cart")',
data: { id: id },
success: function(data){
//call is successfully completed and we got result in data
},
error:function (xhr, ajaxOptions, thrownError){
//some errror, some show err msg to user and log the error
alert(xhr.responseText);
}
});
}
在进行 ajax 调用时，我强烈建议使用 Html 辅助方法（例如 Url.Action）来生成操作方法的路径。
如果您的代码在 razor 视图中，这将起作用，因为 Url.Action 将由服务器端的 razor 执行，并且该 c# 表达式将替换为正确的相对路径。但是如果你在你的外部 js 文件中使用你的 jQuery 代码，你可以考虑这个answer 中提到的方法。
【讨论】：
如果您不需要太多的自定义并追求简单，您可以使用内置方式 - AjaxExtensions.ActionLink method。
<div class="cart">
@Ajax.ActionLink("Add To Cart", "AddToCart", new { productId = Model.productId }, new AjaxOptions() { HttpMethod = "Post" });
</div>
对于此方法的所有可能重载以及AjaxOptions class 的参数，必须阅读该 MSDN 链接。实际上，你可以使用确认、更改 http 方法、设置 OnSuccess 和 OnFailure 客户端脚本等等
【讨论】：
如果你想从你的 JavaScript 调用一个动作，一种方法是在你的视图中嵌入你的 JavaScript 代码（例如.cshtml 文件），然后使用 Razor 创建那个动作的 URL：
$(function(){
$('#sampleDiv').click(function(){
/*
While this code is JavaScript, but because it's embedded inside
a cshtml file, we can use Razor, and create the URL of the action
Don't forget to add '' around the url because it has to become a
valid string in the final webpage
*/
var url = '@Url.Action("ActionName", "Controller")';
});
});
【讨论】：
当您使用相同的控制器进行重定向时，您可以简单地添加它
var url = "YourActionName?parameterName=" + parameterValue;
window.location.href = url;
【讨论】：
var url = "YourController/YourActionName?parameterName=" + parameterValue; window.location.href = url;
Javascript Function
function AddToCart(id) {
$.ajax({
url: '@Url.Action("AddToCart", "ControllerName")',
type: 'GET',
dataType: 'json',
cache: false,
data: { 'id': id },
success: function (results) {
alert(results)
},
error: function () {
alert('Error occured');
}
});
}
Controller Method to call
[HttpGet]
public JsonResult AddToCart(string id)
{
string newId = id;
return Json(newId, JsonRequestBehavior.AllowGet);
}
【讨论】：
您可以使用
设置您的element
value="@model.productId"
和
onclick= addToWishList(this.value);
【讨论】：
我正在使用这种方式，并且效果很好：
//call controller funcntion from js
function insertDB(username,phone,email,code,filename) {
var formdata = new FormData(); //FormData object
//Iterating through each files selected in fileInput
formdata.append("username", username);
formdata.append("phone", phone);
formdata.append("email", email);
formdata.append("code", code);
formdata.append("filename", filename);
//Creating an XMLHttpRequest and sending
var xhr = new XMLHttpRequest();
xhr.open('POST', '/Home/InsertToDB');//controller/action
xhr.send(formdata);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//if success
}
}
}
在控制器中：
public void InsertToDB(string username, string phone, string email, string code, string filename)
{
//this.resumeRepository.Entity.Create(
// new Resume
// {
// }
// );
var resume_results = Request.Form.Keys;
resume_results.Add("");
}
您可以找到密钥 (Request.Form.Keys)，或直接从参数中使用。
【讨论】：