如何让Ajax表单提交在ASP.net MVC中工作?

时间:2009-04-18 03:55:39

标签: javascript asp.net-mvc ajax form-submit

我是AJAX和Javascript世界的新手,我正在尝试实现表单提交的Scott Hanselman's示例来更新页面的一部分。我几乎一字一句地复制了他的例子,我似乎无法让它发挥作用。当我单击提交按钮时,控制器操作被成功调用,但结果在浏览器中呈现为新页面,而不是仅更新我在Ajax表单中指定的范围。

这是我的观看代码:

<asp:Content ID="indexHead" ContentPlaceHolderID="head" runat="server">
    <title>Home Page</title>
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

    <% using (Ajax.BeginForm("TestAction", new AjaxOptions { UpdateTargetId = "target" }))
       { %>

        <%= Html.TextBox("TextBox")%>
        <input type="submit" value="Submit" />
        <span id="target" />

    <% } %>

</asp:Content>

我的控制器动作:

    public string TestAction(string TextBox)
    {
        return TextBox;
    }

我在母版页中包含了以下几行

<script src="../../Scripts/MicrosoftMvcAjax.debug.js"type="text/javascript"></script>  
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script> 
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> 

但它似乎只是调用操作并将结果呈现为新页面,而不是更新目标跨度。以下是一些小屏幕截图,用于说明正在发生的事情。

Screenshot 1 http://martindoms.com/scr1.JPG

Screenshot 2 http://martindoms.com/scr2.JPG

有什么想法吗?

2 个答案:

答案 0 :(得分:4)

您的主页中的javascript包含顺序错误。 重新排序,以便MicrosoftAjax.js包含在三者中的第一个,它将起作用。

<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

答案 1 :(得分:0)

只是抛出一些想法......

http://www.asp.net/learn/MVC/tutorial-33-cs.aspx

您的控制器操作是否在如此定义的类中?

public class MyController : Controller

显然,类的名称必须以控制器一词结束。