.net MVC2 jQuery 无法从控制器调用操作

Question

你好 我是 MVC 和 jQuery 的新手，我遵循了在网上找到的示例，但我一直坚持 我的页面上有 img 元素，我试图通过 jQuery 单击事件添加该元素，然后从我的控制器调用操作。

我的页面

<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
<h2>About</h2>
<p>
    Put content here.
</p>
<img id="img1" alt="some image" src="http://www.google.pl/logos/2010/stevenson10-hp.jpg" />

<script type="text/javascript" language="javascript">
    $("#img1").click(function (e) {
        $.ajax({
            type: "POST",
            url: "Home/CheckAge",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function (msg) {
                alert("ok");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus+" - "+errorThrown);
            }
        });
        return false;
    });       
</script>

添加了事件，但是当我单击图像时，我总是会遇到错误函数 警报显示“错误 - 未定义”

我的控制器看起来像这样

public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewData["Message"] = "Welcome to ASP.NET MVC!";
        return View();
    }

    public ActionResult About()
    {
        return View();
    }

    public static string Test()
    {
        string name = "aaa";
        return "Hello " + name;
    }

    [HttpPost]
    public JsonResult CheckAge(String code)
    {
        return Json("abc");
    }
}

我尝试了很多组合和很多示例，但结果总是相同的 知道我做错了什么吗？ 我正在使用 Visual Web Developer 2010 Express

谢谢您的建议

Answer 1

您的 CheckAge 方法需要一个参数：

[HttpPost]
public JsonResult CheckAge(String code)
{
    return Json("abc");
}

但是您没有在 AJAX 中传递参数：

data: "{}",

您还需要将脚本代码包装在 $(document).ready() 中：

$(document).ready(function () {
    $("#img1").click(function (e) {
        $.ajax({
            type: "POST",
            url: "Home/CheckAge",
            data: {code: "theCode"},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function (msg) {
                alert("ok");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus+" - "+errorThrown);
            }
        });
        return false;
    });  
});

Answer 2

您正在将 contentType = application/json 设置为请求，但控制器上没有任何内容可以理解这一点。默认模型绑定器仅适用于标准查询字符串参数 (application/form-url-encoded)。所以你可以尝试这个：

$('#img1').click(function (e) {
    $.ajax({
        type: 'POST',
        url: '<%= Url.Action("CheckAge") %>',
        data: { code: 'some code you want to send' },
        dataType: 'json',
        cache: false,
        success: function (msg) {
            alert(msg.result);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus+" - "+errorThrown);
        }
    });
    return false;
}); 

控制器操作：

[HttpPost]
public ActionResult CheckAge(string code)
{
    return Json(new { result = "abc" });
}

注意 contentType 不再使用，数据哈希包含将发送到控制器操作的代码参数，并且 url 不再硬编码，而是使用 url helper 来计算它。此外，控制器操作使用匿名对象返回 JSON。