如何从 MVC3 中的 javascript 调用 Controller 方法？答案

【问题标题】：How to call a Controller method from javascript in MVC3?如何从 MVC3 中的 javascript 调用 Controller 方法？
【发布时间】：2012-07-23 14:02:44
【问题描述】：

我使用 MVC3 架构，c#.net。当焦点更改为下一个字段（即密码字段）时，我需要立即将文本框内容（用户 ID）与数据库进行比较。所以我想对 User Id 字段使用 onblur 事件，然后调用 Controller 方法。谁能告诉我如何解决这个问题？我是新手，非常感谢代码 sn-ps。

提前致谢，

普拉桑特

【问题讨论】：

您的控制器方法是否返回 JsonResult？

标签： c# javascript .net ajax asp.net-mvc-3

【解决方案1】：

这是一个例子。控制器方法示例

[HttpPost] // can be HttpGet
public ActionResult Test(string id)
{
     bool isValid = yourcheckmethod(); //.. check
     var obj = new {
          valid = isValid
     };
     return Json(obj);
}

这将是您的 javascript 函数。

function checkValidId(checkId)
{
    $.ajax({
         url: 'controllerName/Test',
         type: 'POST',
         contentType: 'application/json;',
         data: JSON.stringify({ id: checkId }),
         success: function (valid)
         {
              if(valid) { 
                  //show that id is valid 
              } else { 
                  //show that id is not valid 
              }
         }
    });
}

【讨论】：

感谢大家！！我得到了它。我很高兴:-)

【解决方案2】：

请参阅JQuery.get()、System.Web.Mvc.JsonResult。

例如：

<script type="text/javascript">
    $('#userID').blur(function()
    {
        $.get('/Home/ValidateUserID/' + $(this).val(), {}, 
            function(data, status)
            {
                if( !data.success ) {
                    alert('User ID is invalid!');
                }
            });
    });
</script>

您需要一个操作来捕获 GET 请求：

public class HomeController
{
    [HttpGet]
    public ActionResult ValidateUserID(string id)
    {
        bool superficialCheck = true;

        return Json(new { success = superficialCheck },
            JsonRequestBehavior.AllowGet);
    }
}

几点，不分先后：

注意.get 的第一个参数是控制器操作的匹配URL？
#userID html 字段的值附加到 URL 的末尾，允许 MVC 将其数据绑定到操作参数 ValidateUserID(string id)。
Controller.Json 方法将 .NET 对象格式化为 JavaScript 对象。 JQuery 在回调函数中将格式化的对象作为data 接收。
JsonRequestBehavior.AllowGet 告诉 MVC 可以将数据从 .GET 传回浏览器。

【讨论】：

【解决方案3】：

这听起来像是服务器端验证，所以您可以为此使用客户端验证功能。

http://msdn.microsoft.com/en-us/library/gg508808(v=vs.98).aspx

一般来说，这可以通过使用 ajax 调用来完成（不确定您是否使用 jQuery，但如果没有并且没有特殊限制，建议您使用它）：

http://api.jquery.com/jQuery.ajax/

在客户端：

$.ajax({
            url: '@Url.Action("ActionName", "ControllerName")',
            type: "POST",
            async: true,
            dataType: "json",
            data: $('#form').serialize(),                    
            success: function (data) {
               // process result
            },
            error: function (request, status, error) {
               // process error message
            }
        });

在服务器端：

[HttpPost]
public virtual ActionResult ActionName() 
{
     return Json("value")
}

但一般来说，你应该从 ASP.NET MVC 3 Ajax 上搜索，网络上有很多关于这方面的东西，你可能已经找到了你需要的东西。

【讨论】：

我也在使用 Jquery。请告诉我如何使用 jquery 调用该方法。
既然你是通过'post'动词发送请求，那么JsonRequestBehavior.AllowGet参数中就不需要了，是吗？
@user1545987 更新了一些片段，但总的来说，我认为您正在尝试验证用户名/密码，如果是这样，您应该真正使用验证框架，它已经存在。

【解决方案4】：

您可以使用 RemoteValidation attribute with a server side action on your controller 通过 MVC Unobtrusive javascript 为您完成所有工作，而无需为其编写单行 JS/Jquery。

【讨论】：

【解决方案5】：

你可以这样做：

假设您有名为 AccountController 的控制器和名为 CheckPassword 的操作，它接受参数 string password，您可以将其放在您的视图中：

$('#texboxId').blur(function() {
    $.ajax({
        url: '/Account/CheckPassword',
        data: { password: $('#texboxId').val() },
        success: function(data) {
            // put result of action into element with class "result"
            $('.result').html(data);
        },
        error: function(){
            alert('Error');
        }
    });
});

您的控制器操作大致如下所示：

public class AccountController : Controller
{
    public ActionResult CheckPassword(string password)
    {
        bool passwordIsCorrect = //do your checking;
        string returnString = "whatever message you want to send back";
        return Content(returnString);
    }
}

【讨论】：