Question

您好我是MVC和jQuery的新手，我已经按照我在网上找到的例子，但我已经卡住了我在我的页面上有img元素，我试图通过jQuery click事件添加，然后从我的控制器调用动作。

我的页面

<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。

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

2 个答案: