如何将表单值传递给控制器​​并将值返回到jQuery数据表

时间:2012-04-26 01:14:33

标签: c# jquery asp.net-mvc-3 datatables

我想做的是这样的。
提交表单后,表单中的值将传递给控制器​​,值将被转换并返回到数据表中
我知道如何从控制器返回json数据到数据表 我也知道如何通过Ajax.BeginForm将表单值传递给控制器 但我不知道如何做到这两点 这是我的代码,只是将固定的json数据返回到数据表。

查看

    <script type="text/javascript">

        function PullIntoTable() {
            $('#example').dataTable({
                "bDestroy": true,
                "bAutoWidth": false,
                "aoColumns": [
                { sWidth: '30%' },
                { sWidth: '10%' },
                { sWidth: '20%' },
                { sWidth: '20%' },
                { sWidth: '20%' }, ],
                "sAjaxSource": '@Url.Action("Search", "SearchCompany")',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        dataType: 'json',
                        type: "POST",
                        url: sSource,
                        data: aoData,
                        success: function (json) {
                            fnCallback(json);
                        }
                    })
                }
            });
        };

    </script>

    <input type="submit" value="Search" onclick="PullIntoTable()" />


<table cellpadding="0" cellspacing="0" border="0" class="search_result" id="example" width="100%">
    <thead>
        <tr>
            <th>Company</th>
            <th>Location</th>
            <th>Address</th>
            <th>Status</th>
            <th>Inactive</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
</table>

控制器

public class SearchCompanyController : Controller
{
    [HttpPost]
    public ActionResult Search()
    {
        var Result = new List<Result>()
        {
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"},
            new Result{Name="DummyCompany", Location="DummyLocation", Address="DummyAddress", Status="SL", Inactive="Y"}
        };

        return Json(
            new { aaData = Result.Select(x => new[] { x.Name, x.Location, x.Address, x.Status, x.Inactive }) },
            JsonRequestBehavior.DenyGet
            );
    }
}

public struct Result
{
    public string Name { get; set; }
    public string Location { get; set; }
    public string Address { get; set; }
    public string Status { get; set; }
    public string Inactive { get; set; }
}

2 个答案:

答案 0 :(得分:1)

数据表需要very specific format中的数据。

There's an example using OpenSearch,您可以收集用于特定实现的详细信息(即,在javascript中为回调构造json对象的非数据表特定实现)。这个解决方案最让我感兴趣,因为它将特定于数据表的实现细节保留在服务器端代码之外。

已经有asp.net samples on the datatables.net site可以为您提供所需的一切,尽管它采用相当丑陋的匈牙利符号格式。

我没有触手可及的样本,但我确实把c#样本转换成了一个动作过滤器,所以我没有必要处理匈牙利符号。如果我把手放在上面,你感兴趣的话,我会看看我是否可以把它贴在这里。

答案 1 :(得分:0)

解决了。
我可以从控制器获取值并将它们拉入数据表中,如下所示

查看脚本

function PullIntoTable(e) {
    $('#example').dataTable({
        "bDestroy": true,
        "bAutoWidth": false,
        "aoColumns": [
        { sWidth: '30%' },
        { sWidth: '10%' },
        { sWidth: '20%' },
        { sWidth: '20%' },
        { sWidth: '20%' }, ],
        "aaData": e.aaData
    });
};