我是使用Web API的ASP MVC的初学者。
通过使用以下代码，我试图调用在控制器上编写的函数。为了进行检查，我使用了断点，因此控件无法转到控制器，因此我无法真正跟踪正在发生的事情。
给定的代码说明了如何将用户名和密码传递给控制器：
<script type="text/javascript">
function Login() {
var Login = {};
Login.username = document.getElementById("txtUserName").value;
Login.password = document.getElementById("txtPassword").value;
$.ajax({
URL: 'api/Login/' + Login,
type: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(Login),
success: function (data) {
alert("Saved successfully");
}
})
}
</script>
这是我过去使用的控制器
public class LoginController : ApiController
{
[HttpPost]
public void Login(Login login)
{
string user = login.UserName.ToString();
string password = login.Password.ToString();
}
}
[基本上是URL与url的区分大小写的问题，结合了一些不必要的工作。因此，将脚本更改为：
<script type="text/javascript">
function Login() {
var Login = {};
Login.username = $("#txtUserName").val();
Login.password = $("#txtPassword").val();
$.ajax({
url: '/api/Login/',
method: 'POST',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: Login,
success: function (data) {
alert("Saved successfully");
},
fail : function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
}
})
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Register Page</title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body style="padding-top: 20px">
<div class="col-md-10 col-md-offset-1">
<div class="well">
<table class="table table-bordered">
<thead>
<tr class="success">
<td colspan="2">
New User Registration
</td>
</tr>
</thead>
<tbody>
<tr>
<td>Email</td>
<td>
<input type="text" id="txtEmail" placeholder="Email" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" id="txtPassword" placeholder="Password" />
</td>
</tr>
<tr>
<td>Confirm Password</td>
<td>
<input type="password" id="txtConfirmPassword" placeholder="Confirm Password" />
</td>
</tr>
<tr class="success">
<td colspan="2">
<input id="btnRegister" class="btn btn-success" type="button" value="Register" />
</td>
</tr>
</tbody>
</table>
<div class="modal fade" tabindex="-1" id="successModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Success</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
<h2>Registration Successful</h2>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-success">
Close
</button>
</div>
</div>
</div>
</div>
<div id="divError" class="alert alert-danger collapse">
<a id="linkClose" class="close" href="#">×</a>
<div id="divErrorText"></div>
</div>
</div>
</div>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#linkClose').click(function() {
$('#divError').hide('fade');
});
$('#btnRegister').click(function () {
$.ajax({
url: 'api/account/register',
method: 'POST',
data: {
email: $('#txtEmail').val(),
password: $('#txtPassword').val(),
confirmPassword: $('#txtConfirmPassword').val()
},
success: function() {
$('#successModal').modal('show');
},
error: function(jqXHR) {
$('#divErrorText').text(jqXHR.responseText);
$('#divError').show('fade');
}
});
});
});
</script>
</body>
</html>
让我知道是否有帮助，我已经在寄存器绑定模型中使用了它。