Question

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

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

有人可以提供一个用jquery做这个的例子吗？

非常感谢！

Answer 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插入它。

Answer 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);
}

使用jquery ajax调用操作

2 个答案: