一种不同外观的视图 - MVC

Question

我有一个MVC项目。这些观点是aspx。

我在一条垂直线上创建了一个视图分割。左侧始终相同，不会改变。在左侧，有两个按钮。如果我点击button1，右边的部分应该有一个输入食物的表格。如果我点击button2，右边的部分应该有一个用于输入饮料的表格。形式有着截然不同的外观。

我已经做了关于食物的部分并且它有效。我将表单放在一个名为“food”的div中的表中，除非单击button1，否则它总是被隐藏。

现在我必须为饮料做部分。我想为此做同样的事情，但我有一个问题。当我制作食物表格时，我去设计aspx页面的视图，这非常容易，我看到了我在视觉上做的事情。现在，如果我去设计视图（制作饮料部分），食物的一部分已经显示出来了。如何控制我已经拥有的那个？如何将饮料放在食物上方？它的div会有一个名为'drinkSide'的id，我会在饮料和食物之间切换。

除了新观点之外还有其他方法吗？

Answer 1

您可以创建单独的页面部分视图，并将它们都注册到包含页面。这会让他们很好地分开。

Answer 2

如果你不喜欢隐藏div，你可以使用AJAX。我们的想法是，您将2个表单放在2个单独的部分视图中：food.ascx和drink.ascx。最初，您将在主视图中有一个div元素，该元素将用作表单的占位符。单击button1时，您可以向控制器操作发送一个AJAX请求，该操作将返回第一个部分，然后将生成的部分HTML注入容器div。您可以对第二个按钮执行相同的操作，只是您将调用另一个控制器操作返回第二个部分。