使用.NET 4 MVC 3和jQuery更新DIV

Question

我正在使用 .NET 4、MVC 3 和 jQuery 创建诊断页面。该页面将允许用户通过调用各种 Web 服务手动运行对我们的系统的测试。我希望在一个视图上有 3 个表单，分别用于 3 个独立的测试。每个表单提交应异步返回一个值，以便他们可以仅提交其中两个测试并查看测试的返回值，而无需刷新页面。

在我的 PHP 时代，我会为每个表单设置一个 Ajax 调用，然后访问服务器端脚本来执行工作并返回值，但是我在概念上很难将其转换到 MVC 的解决方案中。如果有人能够提供一些示例代码，说明如何实现以及每个代码片段应放在哪里（视图、控制器、局部视图等），我将不胜感激。

看起来很简单，但我今天似乎无法理解它。

提前致谢...

编辑

Eric Sowell提供了一堂精彩的课程，教授MVC 3和jQuery最佳实践。这需要一个小时的时间，并包括DDD设计原则以及DI，并专注于创建可重用的jQuery代码。

http://channel9.msdn.com/Series/mvcConf/mvcConf-2-Eric-Sowell-Evolving-Practices-in-Using-jQuery-and-Ajax-in-ASPNET-MVC-Applications

- GregB

Answer 1

这里是一个使用单个表单作为示例的代码快速介绍。我知道你需要翻译多个内容，但扩展这个示例应该相对容易。

1）为每个表单创建一个PostModel来保存值。因此，请创建一个models.cs文件并将以下类添加到其中：

public class Form1ViewModel() // This will hold all the fields you need in the form
{
    public string Field1 { get; set; }
    public string Field2 { get; set; }
    // etc...
}
public class Form1PostModel()
{
  public string Value1 { get; set; }
  public string Value2 { get; set; }
  // add for each post value you expect
}

public class ReturnModel() // some object to hold the values you want to return
{
   public string Message { get; set; }
   public bool Success { get; set; }
}

2）在您的控制器中：HomeController.cs设置以下内容：

public ActionResult Index()
{
    return View( new Form1Model() ); // default view
}

[HttpPost]
public JsonResult Form1(Form1PostModel model)
{
    ReturnModel returnModel = SomeAction(model);
    return JsonResult(returnModel);
}

3) 在你的视图（Views/Home/Index.cshtml）中，你需要显示这个表单并调用ajax post：

@using (Html.BeginForm()) {
  @Html.EditorForModel()
  <div class="editor-actions">
      <input type="button" value="Update" id="btnUpdateForm1" />
  </div>
}

4) 然后是Jquery：

$('#btnUpdateForm1').click(function(){
     $.post(
      "/Home/Form1", // url
      { Value1 : "", Value2 : "" }, // payload
      function(result) // success
      {
        // can access result.Message or result.Success here (I.E fields returned from the model)
      },
      function( msg ) // error
      {
        alert( 'Error' );
      }
     );
    return false; // for the button
  });

希望这能够给你提供一个想法。这是我凭记忆所写，所以请见谅任何小问题。

- TheRightChoyce

Answer 2

1. 创建代表您领域中每个概念的控制器。您可能只需要一个名为“TestsController”的控制器。

2. 为每个测试创建操作，返回JsonResult。

3. 编写每个测试的功能，构建某种返回对象，然后通过调用Json(result, JsonRequestBehavior.AllowGet)来序列化它。

4. 在主页控制器的Index操作中（新MVC项目默认提供），返回View()并创建相应的视图。

5. 在此视图中，使用Jquery进行Ajax调用，与往常一样显示结果。Ajax调用的URL将如下所示：

   /Tests/Test1

等等

- Chris McCall

---

Eric Sowell进行了精彩的讲解，教授MVC 3和jQuery最佳实践。该视频时长一个小时，包括DDD设计原则和DI，并侧重于创建可重用的jQuery代码。http://channel9.msdn.com/Series/mvcConf/mvcConf-2-Eric-Sowell-Evolving-Practices-in-Using-jQuery-and-Ajax-in-ASPNET-MVC-Applications - GregB

Answer 3

这是我在页面元素上更新一些信息的做法：

在我的 Practices.ascx 视图中，我有一个需要更新实践的 div。

<div style=" width:20%; float:right; background-color:inherit" >
    (Last Seen: <span id="<%: practice.ID %>LastSeenPractice" class="LastSeenPractice" >Loading...</span>)
</div>

同时，在 Practices.ascx 文件的脚本部分，使用 jQuery 每 10 分钟更新一次实践：

function UpdatePractice() {
    jQuery.post("/reporter/LastSeenPractice", $.param({ practiceID: pid, doctorIDs: DoctorIDs }, true), UpdateLastSeenPractice, "json");
}

setInterval(UpdatePractice, 1000*60*10)

在你的控制器中，创建一个函数来接收jQuery调用：

[HttpPost]
public JsonResult LastSeenPractice(string practiceID, List<String> doctorIDs)
{            
    ... process query ...
    return Json(new { pid = practiceID, LastSeenPractice = lastSeenPractice, LastSeenDoctor = lastSeenDoctor });
}

最后，在您的JScript中，创建一个回调函数来处理JSON结果。

function UpdateLastSeenPractice(data) {
    $("#" + data.pid + " .LastSeenPractice").html(data.LastSeenPractice);
    for (var key in data.LastSeenDoctor) {
        $("#" + key + " .LastSeenDoctor").html(data.LastSeenDoctor[key]);
    }
};

这应该是使用jQuery进行Ajax调用的基本流程

更新： 忘记了问题中的部分视图。我使用嵌套部分视图来降低已经复杂语法的复杂度。每个实践都在自己的视图下，而index.ascx循环遍历所有实践并在一个treenode中创建一个部分视图并传递一个参数（不幸的是你只能传递一个参数，所以我把部分视图所需的所有设置都放在一个字典里，因此PracticesDict:

<div id="bodyPracticesList" style="float:left; width:100%">
    <% Html.RenderPartial("Practices", Model.PracticesDict); %>
</div>

我的所有脚本都在index.aspx中，而html则在practices.ascx中，所以你可以像Max建议的那样，将你的三个表单放在部分视图中来拆分它们。

- Joe

Answer 4

局部视图可能是更好的方法来处理您所需的内容。然后，您可以单独将每个视图进行Ajax化。

- dexter