MVC 3使用Ajax提交复杂的对象控制器 [英] MVC 3 with ajax submit complex object to controller

问题描述

我只用MVC 3与C＃和Ajax javascript和我有一个强类型的模型绑定到一个视图。

I am using just mvc 3 with c# and ajax javascript and I have a view with a strongly typed model bound to it.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication2.Models.Car>" %>

和我通过一个ActionLink的......

And I am submitting via a ActionLink...

<%=Html.ActionLink("Add Car", "AddCar", "Car", new { id = "tester" })%>

这一切都通过AJAX / javascript调用...

this all goes through the ajax/javascript call...

$('#tester').click(function (e)
    {

        e.preventDefault();
        $(this).parents('form').first().submit();

        $.ajax({
            url: "Car/AddCar",
            type: "POST",
            data: { ID: $('#carid').val(), Manufacturer: "test", Model: "Test", Year: "01/01/2010" },
            success: function (data)
            {
                alert(data);
            }
        });
    }); 

控制器方法获取页面数据就好了......

The controller method gets the page data just fine...

[HttpPost]
    public ActionResult AddCar(Car newcar)
    {
        if (newcar.Passengers == null)//this is always null... data is not being persisted
            newcar.Passengers = new Dictionary<int, string>();

        newcar.Passengers.Add(newcar.ID, newcar.Model);
        IList<Car> cars = _carService.AddCarToGarage(newcar);
        return View("Index", newcar);            
    }

不过，我不知道它是如何在这里创建后的控制器坚持的乘客词典数据。每次我点击ActionLink的，乘客数据为空...

However I do not know how to persist the Passengers dictionary data after it has been created here in the controller. Everytime I click the Actionlink, the Passengers data is null...

如何保持AJAX调用之间的乘客数据？

How do I keep the Passengers data between ajax calls?

谢谢！

+++++++++++++++++++++++++++++++++++++++++++++++

+++++++++++++++++++++++++++++++++++++++++++++++

编辑：

我更新这个问题，下面为我工作的答案的格式.​​..

I am updating this question with the format of the answer below that worked for me...

视图=

<form id="my-form" method="post" action="/Car/AddCar">
<h2>Index</h2>
<%
    Response.Write("<input type=\"hidden\" name=\"ID\" value=\"" + Model.ID + "\">");
    Response.Write("<input type=\"hidden\" name=\"Manufacturer\" value=\"" + Model.Manufacturer + "\">");
    Response.Write("<input type=\"hidden\" name=\"Model\" value=\"" + Model.Model + "\">");
    Response.Write("<input type=\"hidden\" name=\"Year\" value=\"" + Model.Year.ToShortDateString() + "\">");

    if (Model.Passengers != null)
    {
        for (int i = 0; i < Model.Passengers.Count; i++)
        {
            Response.Write("<input type=\"hidden\" name=\"newcar.Passengers[" + i + "].Id\" value=\"" + Model.Passengers[i].Id + "\">");
            Response.Write("<input type=\"hidden\" name=\"newcar.Passengers[" + i + "].Name\" value=\"" + Model.Passengers[i].Name + "\">");
        }
    }
     %>

<input type="button" value="Submit" id="form-submit" />

控制器=

[HttpPost]
    public ActionResult AddCar(Car newcar)
    {
        if (newcar.Passengers == null)
            newcar.Passengers = new List<Passenger>();

        Passenger p = new Passenger();
        p.Id = newcar.ID;
        p.Name = "tester";
        newcar.Passengers.Add(p);
        return View("Index", newcar);            
    }

中的JavaScript =

The javascript =

<script type="text/javascript">
    $(document).on('click', '#form-submit', function () {
        $.ajax({
            url: "Car/AddCar",
            type: "POST",
            data: $('form#my-form').serialize(),
            success: function (data) {
                alert(data);
                // put the data in the container where you have the form.
            }
        });
    });

推荐答案

通常的做法是，在你的视图的形式。该表格​​应该有正确生成所有输入。给出的模型：

The usual approach is to have a form in your view. The form should have all inputs generated correctly. Given the model:

public class Car
{
    public int Id { get; set; }
    public string Manufacturer { get; set; }
    public string Model { get; set; }
    public DateTime Year { get; set; }
    public List<Passanger> Passangers { get; set; }
}

public class Passanger
{
    public int Id { get; set; }
    public string Name { get; set; }
}

视图应具有大致如下：

The view should have approximately the following:

@model Car
@using(Html.BeginForm("actionName", "controllerName", FormMethod.Post, new { id = "my-form" }))
{
    @Html.HiddenFor(x => x.Id)
    @Html.TextBoxFor(x => x.Manufacturer)
    @Html.TextBoxFor(x => x.Model)
    @Html.TextBoxFor(x => x.Year)

    for(int i = 0, i < Model.Passangers.Count(), i++)
    {
        @Html.HiddenFor(x => Model.Passangers[i].Id)
        @Html.HiddenFor(x => Model.Passangers[i].Name)
    }

    <input type="button" value="Submit" id="form-submit" />
}

<script type="text/javascript">
    $(document).on('click', '#form-submit', function(){
        $.ajax({
            url: "Car/AddCar",
            type: "POST",
            data: $('form#my-form').serialize(),
            success: function (data)
            {
                alert(data);
                // put the data in the container where you have the form.
            }
        });
    });
</script>

此方式，当您的形式张贴，数据发布将包括乘客，因为他们的信息是在视图上的hiddens呈现。

This way when your form is posted, the data posted will include passengers because their information was rendered in the hiddens on the View.

这篇关于MVC 3使用Ajax提交复杂的对象控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！