ASP.NET:通过ajax jquery函数将多个变量从视图发布到控制器

时间:2014-02-06 09:06:39

标签: jquery asp.net-mvc razor kendo-grid

我正在使用asp.net mvc 5开发应用程序。现在我有部分视图用于创建方案的新记录。此局部视图还显示表格中的区域,用户可以从中选择单个或多个,以便分配给新创建的记录

在razor Html.BeginForm我添加id并使用此id我调用ajax函数将序列化表单发送回控制器。我的问题是我想将存储在数组中的选定区域列表ID与提交的表单值一起发送回控制器,以便我可以更新数据库中的相关记录。 array在javaScript中声明为全局变量...

脚本

<script type="text/javascript">

$(document).ready(function () {

    $("#NewFeeSchemeForm").submit(function (e) {           

        $.ajax({
            type: "Post",
            url: "/Qualification/CreateNewFeeScheme",
            data: { newSchemeData: $("#NewFeeSchemeForm").serialize(), FeeZoneList: selectedZonesList },
            success: function(data)
            {
                alert(data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
            }
        });

        e.preventDefault(); //STOP default action
    });
});
</script>

SCRIPT2

<script type="text/javascript">

var selectedZonesList = new Array();


function AddFeeZoneToScheme(e)
{

    var entityGrid = $("#FeeZoneGrid_02").data("kendoGrid");

    var selectedZone = entityGrid.dataItem(entityGrid.select());

    selectedZone = selectedZone.FeeZoneID;

    selectedZonesList.push(selectedZone);

}

</script>

控制器类

  [HttpGet]
    public ActionResult CreateNewFeeScheme()
    {

        return PartialView("Partial_FeeScheme",new FeeScheme());
    }

    [HttpPost]
    public ActionResult CreateNewFeeScheme(FeeScheme newSchemeData, Array selectedZonesList)
    {

        var a1 = selectedZonesList;

        try
        {
            if (ModelState.IsValid)
            {
                FeeScheme_UOF.CreateFeeScheme(newSchemeData);
            }
        }
        catch (DataException ex)
        {
            ModelState.AddModelError("", "Unable To Create New FeeScheme!" + ex);
        }

        return RedirectToAction("FeeScheme");
    }

Razor表格(待提交)

@using (Html.BeginForm("CreateNewFeeScheme", "Qualification", FormMethod.Post, new { id = "NewFeeSchemeForm" }))
{
  @Html.AntiForgeryToken()
  @Html.ValidationSummary(true)

 //rest of code to take user input for all variables ..

  <input type="submit" value="Create" class="btn btn-default" />
}

剑道网格中的区域表

@(Html.Kendo().Grid<DatabaseLayer.TableMappings.FeeZone>()
        .Name("FeeZoneGrid_02")
        .Columns(columns =>
          {
           columns.Bound(c => c.FeeZoneID);
           columns.Bound(c => c.FeeZoneDescription);
           columns.Command(
            command =>
               {
                 command.Custom("Add To Fee-Scheme").SendDataKeys(true).Click("AddFeeZoneToScheme").HtmlAttributes(new { @class = "AddFeeZoneToScheme_button" });
               }
              );
            })
           .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("GetAllFreeZone", "Qualification"))
                .Model(model => model.Id(c => c.FeeZoneID))
           )

2 个答案:

答案 0 :(得分:1)

而不是这个

public ActionResult CreateNewFeeScheme(FeeScheme newSchemeData, Array selectedZonesList)

试试这个

public ActionResult CreateNewFeeScheme(FeeScheme newSchemeData, IEnumerable<DatabaseLayer.TableMappings.FeeZone> selectedZonesList)

更新:

您可以将选定的区域放在表单中,以便此字段与其他区域序列化。

将此添加到您的表单:

<input id="zones" type="hidden">

然后在你的ajax电话之前:

$("#zones").val(selectedZonesList).join();

答案 1 :(得分:0)

我有发送两个数据的问题,但我已经找到解决方案......

获取SerializeObject插件

$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
   if (o[this.name]) {
       if (!o[this.name].push) {
           o[this.name] = [o[this.name]];
       }
       o[this.name].push(this.value || '');
   } else {
       o[this.name] = this.value || '';
   }
});
return o;
};

脚本

    function submit_createNewFeeScheme()
{

    $.ajax({
        type: "Post",
        url: "/Qualification/CreateNewFeeScheme",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({ ZonesList: selectedZonesList, newFeeSchemeData:  $("#NewFeeSchemeForm").serializeObject() }),
        success: function (data) {
            alert(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
    });
}

表格提交

  <input type="button" value="Create" onclick="submit_createNewFeeScheme()" class="btn btn-default" />

控制器

    [HttpPost]
    public ActionResult CreateNewFeeScheme(int[] ZonesList, FeeScheme newFeeSchemeData)
    {