如何在ajax发布请求中传递模型?

问题描述

大家.我是ASP MVC的新手.我需要在ajax发布请求中将我的模型作为参数传递.

everybody.I'm new in asp mvc. I need to pass my model as parameter in ajax post request.

这是我的ajax帖子请求代码:

Here is my ajax post request code:

<script type="text/javascript">
        $(document).ready(function () {
            $("#contragentTable tr").click(function () {
                $.ajax({
                    type: 'POST',
                    url: "/Contragent/Index",
                    data: $('#form').serialize(),
                    dataType: 'json'
                });
            });
        });

</script>

这是模型

public class ContragentModel
{
    private readonly List<ContragentView> contragentList = new List<ContragentView>();

    public ContragentModel()
    {
        this.IsRowSelected = false;
    }

    public List<ContragentView> ContragentList
    {
        get
        {
            return this.contragentList;
        }
    }

    public ContragentView SelectedContragent { get; set; }

    public bool IsRowSelected { get; set; }
}

这些是控制器

public ActionResult Index()
{
    var contragentModel = new ContragentModel();
    var contragentView = new ContragentView();
    contragentView.Id = 1;
    contragentModel.ContragentList.Add(contragentView);

    return View(contragentModel);
}

[HttpPost]
public ActionResult Index(ContragentModel model)
{
    model.IsRowSelected = true;

    // Here exception throws, because there no items
    model.SelectedContragent = model.ContragentList.Single(t=>t.Id== 1);

    return this.RedirectToAction("Index", model);
}

当我在ajax发布请求中传递模型时，model.ContragentList没有任何项目.但是在cshtml方面它具有.有人知道为什么吗?

When I pass my model in ajax post request model.ContragentList has no items. However in cshtml side it has. Does anybody know why?

另外，如何在我的Ajax请求中传递模型和一个以上的int参数?

Also, how can I pass model and more one int parameter in my ajax request?

这是我的观点

@model Transportation.Models.ContragentModel
@{
    ViewBag.Title = "";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
}

@section head{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#contragentTable tr").click(function () {
                $.ajax({
                    type: 'POST',
                    url: "/Contragent/Index",
                    data: $('#form').serialize(),
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8'
                });
            });
        });

    </script>
}

<table id="contragentTable" class="table table-hover table-bordered">
    <tr id="0" style="background-color: #ccc">
        <th>
          @Html.ActionLink("some text1", "Index")
        </th>
        <th>
            @Html.ActionLink("some text2", "Index")
        </th>
        <th />
        <th></th>
    </tr>

    @if (@Model.ContragentList.Count > 0)
    {
        <tr id="@index.ToString()">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    }
    else
    {
        <tr>
            <td colspan="9">No data
            </td>
        </tr>
    }
</table>

<div>
    @{ var displayStyle = @Model.IsRowSelected ? "" : "none";
       var operationTypeGroups = Model.IsRowSelected ? Model.SelectedContragent.PriceList.GroupBy(t => t.OperationTypeId) : null;
       var operationTypes = operationTypeGroups == null ? null : operationTypeGroups.SelectMany(t => t);

        <table id="priceTable" class="table table-hover table-bordered" style="display: @displayStyle">
            <tr id="0" style="background-color: #ccc">
                <th>

                </th>
                <th>

                </th>

                @if (operationTypes != null)
                {
                    foreach (var operationType in operationTypes)
                    {
                    <th>
                        @Html.ActionLink(operationType.OperationTypeName, "Index");
                    </th>
                    }
                }

                <th></th>
            </tr>

        </table>
    }

</div>

推荐答案

请查看以下文章: http://www.codeproject.com/Articles/678591/CRUD-Operations-using-Partial-V

在本文中，CRUD操作是在ASP.NET MVC 4应用程序中使用jQuery AJAX调用执行的.

In this article, CRUD operations are performed using jQuery AJAX calls in ASP.NET MVC 4 Application.

关于您的代码，您需要修改以下行:

About your code, you need to modify below line:

            $("#contragentTable tr").click(function () {
                var modelDataJSON = '@Html.Raw(Json.Encode(Model))';

                $.ajax({
                url: "/Contragent/Index",
                type: 'POST',
                data: { myObject1: modelDataJSON},
                dataType: 'json'
                });
             });

您必须在AJAX调用中为对象提供名称，并且该名称应与目标控制器操作方法中的参数名称相同，并且由于您是从客户端发送JSON，因此操作方法应类似于:

You must provide a name to object in AJAX call and it should same as the argument name in targeted controller action method and Since you are sending JSON from client so action method should be like:

public ActionResult Index(string myObject1 )

然后在内部动作中，可以反序列化JSON对象并创建模型或所需的任何处理.

Then inside action you can deserialize the JSON object and create model or whatever processing you need.

这篇关于如何在ajax发布请求中传递模型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！