如何在表单中使用AJAX调用方法?

时间:2013-02-05 05:48:43

标签: c# ajax jquery asp.net-ajax

在这个剃刀视图中,我有两个按钮,分别为previous和next。当用户按下这些按钮时,我需要调用存储用户类型的方法:

@using (Html.BeginForm("Index", "Quiz", FormMethod.Post))
{
<div style="border-bottom: 2px solid #c8c8c8; overflow: auto; width: 100%">
    <h2 class="float-left" style="padding-bottom:5px;">@Model.Quiz.Name</h2>

    <div class="float-right">
        <input name="button" type="submit" value="done" />
    </div>
</div>

@for( ...) {
...
}

<div class="fixednavcontainer">
    <div id="questionnav" class="content-wrapper">
        <div id="questionnavstatus" class="float-left">
            <p>
                Question <span id="currentPage">@ViewBag.CurrentPage</span> of <span id="totalPages">@ViewBag.TotalPages</span>
            </p>
        </div>

        <div id="navbuttons" class="float-right">
            <img id="previous" src="~/Images/previous.png" />
            <img id="next" src="~/Images/next.png" />
        </div>

        <div class="clear-fix" />
    </div>
</div>

这样的事情应该调用按钮

private void Save(@model model)
{
    ...
}

我希望ajax不会刷新任何页面或加载其他页面,只需保存并保持同一页面。从jquery(我猜)开始,可以这样做调用一个动作方法吗?

2 个答案:

答案 0 :(得分:2)

您也可以使用jQuery并进行如下调用:

var myModel = @Html.Raw(Json.Encode(MyModel));  //MVC3

$.ajax({
    type: "POST",
    url: "/MyController/SomeAction/",
    data: myModel ,
    cache: false,
    dataType: "json",
    success: function (response) {
        // Do whatever you have to do...
    }
});

在你的控制器中有这样的东西:

public class MyController
{
    [HttpPost]
    public ActionResult SomeAction(MyModel myModel)
    {
        // Do whatever and return whatever
            return true;
    }
}

答案 1 :(得分:2)

你可以

$.ajax({
    type: "POST",
    url: "@Url.Action('yourAddress')",
    data: parametr,
    cache: false,
    dataType: "json",
    success: function (response) {
        // Do whatever you have to do...
    }
});

并在控制器中

public class XController
{
    [HttpPost]
    public ActionResult yourAddress(YourModel)
    {
...
    }
}