Question

我已经浏览了网站上的其他几个问题，无法找到任何可以解决我想要做的事情。为了帮助我提供一些背景知识。

我最近开始尝试使用ASP.NET和MVC4。作为我第一次真正尝试构建有用的东西，我正在构建一个Web应用程序，这将允许我记录和跟踪我在健身房的锻炼。我有所有模型/控制器/视图等的基础。我遇到的部分是记录锻炼的页面的实际布局。每个锻炼都由一组集合组成（这些集合包含锻炼，重量，重复次数等信息......现在，我想让它在WebApp上工作的方式是让用户能够按下按钮然后加载一个集合。这将加载一个下面的部分而不重新加载页面，允许他们输入有关该集合的信息。他们可以再次点击同一个按钮来记录第二个集合等等.... / p>

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

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

任何想法的人？

还有其他问题让我知道。

Answer 1

你说“没有页面重新加载”。你可以使用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，首先，页面加载我们加载一个包含一些初始内容的表，以及一个Add Option按钮。当用户点击按钮时，我们增加当前计数并通过返回部分视图的操作向表中添加另一行。

<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" />

我们的局部视图会将当前计数作为输入并返回如下所示

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

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

动态添加视图ASP.NET MVC

2 个答案: