我如何从 ajax 调用网络 api 控制器

Question

我是 ASP 网络 MVC api 的初学者。

通过使用下面的代码，我试图调用一个在控制器上编写的函数。为了检查，我使用了断点，这样控件就无法转到控制器，这样我就无法跟踪实际发生的事情。

给出的代码解释了如何将用户名和密码传递给控制器：

<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();
}

}

Answer 1

基本上这是 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>

Answer 2

<!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">
                            &times;
                        </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="#">&times;</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>

如果这有帮助，请告诉我，我已经在我的寄存器绑定模型中使用了它。

我如何从 ajax 调用网络 api 控制器

how can i call web api Controller from ajax

asp.net

asp.net-mvc

c#-4.0

asp.net-ajax

asp.net-web-api2