如何在MVC3中从javascript调用Controller方法



我使用MVC3架构,c#.net。当焦点更改为下一个字段(即密码字段)时,我需要立即将文本框内容(用户ID)与数据库进行比较。所以我想在UserId字段中使用onblur事件,然后调用Controller方法。有人能告诉我如何解决这个问题吗?作为一个新手,我们非常欣赏代码片段。

提前感谢

Prashanth

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

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

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

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中搜索,web中有很多关于这方面的东西,你可能已经找到了你需要的东西。

请参阅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传递回浏览器

您可以将RemoteValidation属性与控制器上的服务器端操作一起使用,通过MVC Unbstrusive javascript为您完成这项操作,而无需为其编写单行JS/Jquery。

以下是您可以做的:

假设您有一个名为AccountController的控制器和接受参数string passwordCheckPassword操作,您可以将其放在您的视图中:

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

最新更新