在一个页面中呈现多个表单

时间:2015-02-25 13:14:11

标签: asp.net asp.net-mvc

在我的索引视图中,我渲染(动作)3个其他视图,创建,编辑和列表。 “创建”和“编辑”视图都是用于处理数据库中数据的表单。当我在列表视图中按下编辑按钮时,创建表单应该消失,并且应该出现编辑表单。因此,不应同时显示创建和编辑。

当我不在一个视图中渲染视图时,一切正常。但由于我不想切换页面,我想在一个页面中呈现视图。这是问题所在。当我在一个页面中呈现它时,我的创建表单和列表视图工作正常。但是,当我还想渲染我的编辑表单时,我会收到错误。

发生的一件事是Create表单将数据放入数据库2次。此外,当我不在表单中放置经过验证的数据时,编辑表单会在创建表单的同时出现。第三个问题是当我把编辑按钮放在我的列表中时。创建表单消失,编辑形式出现。这样可行,但是当我想保存更改的数据时,我得到一个十六进制字符串错误。当我重新启动应用程序时,数据没有更改,但是有更改数据的新记录。

我猜id字符串有问题。但我无法修复它。

所以我有4个视图(索引,创建,列表和编辑) 创建,列出和编辑都有自己的模型。 我为视图/模型使用一个控制器

控制器(CarsController):

public class CarsController : BaseController
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult List()
        {
            List<Car> carsInDb = CarRentalContext.Cars.FindAll().ToList();
            return View(carsInDb.ConvertAllToViewModels());
        }

        [HttpGet]
        public ActionResult Create(string id)
        {
            if (String.IsNullOrEmpty(id))
            {
                return View();
            }
            return null;
        }

        [HttpPost]
        public ActionResult Create(InsertCarViewModel insertCarViewModel)
        {
            if (ModelState.IsValid)
            {
                Car car = insertCarViewModel.ConvertToDomain();
                CarRentalContext.Cars.Insert(car);
                Response.Redirect("Cars", true);
            }
            return View(insertCarViewModel);
        }

        [HttpGet]
        public ActionResult Edit(string id)
        {
            if (String.IsNullOrEmpty(id))
            {
                return null;
            }
            Car car = CarRentalContext.Cars.FindOneById(new ObjectId(id));
            return View(car.ConvertToUpdateViewModel());
        }

        [HttpPost]
        public ActionResult Edit(UpdateCarViewModel updateCarViewModel)
        {
            if (ModelState.IsValid)
            {
                Car modifiedCar = updateCarViewModel.ConvertToDomain();
                CarRentalContext.Cars.Save(modifiedCar);
                return RedirectToAction("Index");
            }
            return View(updateCarViewModel);
        }
    }

索引视图:

@model MvcApplication1.ViewModels.UpdateCarViewModel

@{
    Layout = null;
}

    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>

        <div>
            @{Html.RenderAction("Create", Model);}
        </div>

        <div>
            @{Html.RenderAction("Edit", Model);}
        </div>

        <div>
            @{Html.RenderAction("List", Model);}
        </div>

    </body>
    </html>

1 个答案:

答案 0 :(得分:0)

不是显示/隐藏创建和编辑视图的视图,而是尝试使用ajax替换另一个视图,以获取操作的结果。这样,页面中只有一个视图。

做这样的事情:

<script type="text/javascript">
function renderActionInDiv(idcar, action)
{
    $.ajax({
        type: "POST",
        url: action, //or "/Cars/Edit"
        data: { id = idcar},
        success: function (ajxData) {
            if (typeof callback !== 'undefined') {
                $("#div-editOrCreate").html(ajaxData);
            }
        },
        async: asyncCall
    });
}
</script>

    <a onclick='renderActionInDiv(3, "Edit")'>edit car<a/>

    <a onclick='renderActionInDiv(0, "Create")'>create new car<a/>

    <div id="div-editOrCreate">
     @{Html.RenderAction("Create", Model);}
    </div>