使用 jquery ajax 调用操作答案

【问题标题】：Invoking an action using jquery ajax使用 jquery ajax 调用操作
【发布时间】：2010-09-07 02:14:34
【问题描述】：

我正在使用 ASP.NET MVC 2。我有一个模式对话框（通过 jquery UI 完成），其中包含两个文本框和一个按钮。所有的控件都在一个表单中。

当用户单击按钮时，我想调用一个控制器操作，该操作对两个文本框中包含的传递数据进行一些操作，然后向用户返回一个整数值和一个字符串消息。

谁能提供使用 jquery 执行此操作的示例？

非常感谢！

【问题讨论】：

标签： asp.net-mvc jquery jquery-ui-dialog

【解决方案1】：

假设你有以下表格：

<form id="ajax-form">
    <fieldset>
        <input type="text" id="firstname" name="firstname" />   
        <input type="text" id="lastname" name="lastname" />
        <input type="submit" value="send" />
    </fieldset>
</form>

使用 jQuery

$(document).ready(function(){ 
$("#ajax-form").submit(function(){ 

    $.ajax({
            type: "POST",
            url: "Person/Add",
            data: $("#ajax-form").serialize(),
            success: function (response) {
                // whatever you want to happen on success
            },
            error: function (response) {
                    alert('There was an error.');
                }
        });

});

});

在操作方法中访问您的数据。

public ActionResult Add(FormCollection form)
{
    string firstname  = form["firstname"];
    string firstname  = form["lastname"];
    // do whatever you want here
    // then return something to the view
    return Json(/*some object*/);
}

另一种方法是使用 Microsoft Ajax

<% using (Ajax.BeginForm("Add", "Person", 
            new AjaxOptions() { 
                               UpdateTargetId = "formDiv", 
                               InsertionMode = InsertionMode.Replace, 
                               HttpMethod = "Post" }))   {%>

        <fieldset>

             // Form Elements Here.            

        </fieldset>

<% } %>

UpdateTargetId 是要定位的 html 元素的 id。 InsertionMode 选项有三个值Replace、InsertAfter、InsertBefore

希望对你有帮助

更新：您不必在操作方法中返回 Json 结果，您可以简单地返回部分视图或任何 HTML 代码作为响应对象，然后使用 jQuery 将其插入。

【讨论】：

【解决方案2】：

您可以查看documentation，了解如何实现包含表单字段的对话框。当点击confirm 按钮时，您可以简单地发送一个 AJAX 请求。

buttons: {
    Confirm: function() {
        // read the value in the textbox
        var name = $('#name').val();

        // send an AJAX request to an action that will return JSON:
        $.getJSON('/home/foo', { name: name }, function(result) {
            // read the returned value
            alert(result.Value);
        });
    },
    Cancel: function() {
        $(this).dialog('close');
    }
}

还有你的控制器动作：

public ActionResult Foo(string name)
{
    return Json(new { Value = '123' }, JsonRequestBehavior.AllowGet);
}

【讨论】：

非常感谢您的参考和解答！