动态添加视图 ASP.NET MVC

Question

我查看了网站上的其他几个问题，但找不到任何能准确回答我想要做的事情的内容。为了提供帮助，我将介绍一些背景知识。

我最近开始尝试使用 ASP.NET 和 MVC4。作为我第一次真正尝试构建有用的东西，我正在构建一个 Web 应用程序，它可以让我记录和跟踪我在健身房的锻炼情况。我已经掌握了所有 models/controllers/views 等的基础。我遇到问题的部分是记录锻炼的页面实际布局。每个锻炼都由一个集合列表组成（这些集合包含诸如锻炼、体重、重复次数等信息……现在我希望它在 WebApp 上工作的方式是让用户能够点击一个按钮用于添加一组。然后这将加载下面的一个部分，而无需重新加载页面，允许他们输入有关该组的信息。他们可以再次点击相同的按钮来记录第二组，依此类推....

然后他们会点击保存按钮，我需要遍历每个已添加的 "Set" 并将信息保存到数据库中。

我认为应该是可以的，只是不确定如何实现它。我在标准 Windows 应用程序中使用的方法是使用 UserControls，我想也许 ASP.NET 和 MVC 中的部分视图？

大家有什么想法吗？

还有什么问题可以告诉我。

Answer 1

你说的是"without a page re-load"。您可以使用 AJAX 来做到这一点。听起来你必须接受很多基础教育才能实现你的目标。我想建议您研究 JavaScript 并了解 Web 开发领域中客户端和服务器端之间的区别。此外，了解 HTTP 的行为（请求、响应等）也很重要。

之后，您可以使用 ajax 请求从服务器异步加载内容。您可以使用 jQuery 轻松做到这一点。此处示例：

$.ajax({
  type: 'post',
  url: '/Controller/Action',
  data: {CustomerName: 'James', AdditionalData: ... },
  dataType: 'JSON',
         success: function() {

           // do anything after request success

         }

});

使用 JavaScript，您可以在服务器和客户端之间创建通信并操纵客户端的 DOM。

Answer 2

我们用 MVC5 做了类似的事情，也许你可以从这里想出一些办法。

我们使用了 AJAX 和 PartialViews，首先加载页面我们加载了一个 table 和一些初始内容，以及一个 Add Option 按钮。当用户点击按钮时，我们增加当前计数并通过 returns 部分视图的操作向 table 添加另一行。

<script>
  var currentCount = 1;
  $(document).ready(function () {
    $("#AddOptionButton").click(function () {
      var CountryOptions = {};
      CountryOptions.url = "AddOption";
      CountryOptions.type = "POST";
      CountryOptions.datatype = "text/html";
      CountryOptions.data = JSON.stringify({count: currentCount });
      CountryOptions.contentType = "application/json";
      CountryOptions.success = function (html) {
        $("#attributesList tr:last").after(html);
        currentCount = currentCount + 1;
      };
      $.ajax(CountryOptions);
    });
  });
</script>

<table id="attributesList">
  <tr>
    <th>#</th>
    <th>Name</th>
  </tr>
  <tr>
    <td>1.</td>
    <td><input type="text" name="optionInput[0]" value="Option 1" /></td>                    
  </tr>
</table>

<input type="button" name="AddOptionButton" id="AddOptionButton" value="Add 1 More" />
<input type="submit" value="Submit Form" />

我们的部分视图将获取当前计数作为输入，returns 如下所示

<tr id="NewRow1">
  <td>2.</td>
  <td><input type="text" name="optionInput[1]" value="New Option Value"/></td>
</tr>

请注意，当提交表单时，我们将获得一个 optionInput 数组。我们可以通过循环输入来轻松保存数据。

动态添加视图 ASP.NET MVC

Dynamically Add Views ASP.NET MVC

c#

asp.net

asp.net-mvc

asp.net-mvc-4