如何更新MVC3中显示视图的一部分

Question

我有一个视图,使用以下方法调用部分视图:

Html.RenderPartial

我想使用控制器方法隔离调用它来停止整个页面必须刷新,但返回void的控制器方法似乎破坏了现有视图(我得到一个空白屏幕).

我有javascript代码更新HTML文档部分,但我看不到如何保留视图/在控制器中获取对它的引用来调用javascript方法.

我应该补充一点,我对这个MVC3的东西还是比较新的.

NB长话短说,使用JQuery不是一个选项,所以我们仅限于Javascript.

Answer 1

基本模式是在Controller中创建PartialView结果,并使用该结果更新页面上某个容器的innerHTML:

HTML

<input type="button" onclick="UpdateMyContainer();" value="Update" />

<div id="MyContainer">
    @Html.Partial( "_MyPartialView", Model )
</div>

JavaScript的

按照阿贾克斯没有jQuery的初学者用于创建不需要JQuery的一个Ajax方法.实质上:

function UpdateMyContainer() {
  var xmlHttp = createXMLHttp();
  // set your controller URL here:
  xmlHttp.open('get', 'Url/To/SomeMethodInController', true);
  xmlHttp.send(null);
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState === 4) {
      if (xmlHttp.status === 200) {
        // Set the Id of the container to update here:
        document.getElementById('MyContainer').innerHTML = xmlHttp.responseText;
      } else {
        alert('Error: ' + xmlHttp.responseText);
      }
    } else {
      //still loading
    }
  };
}

可以进一步重构上述JS以获取要更新的元素的URL和ID.

调节器

[HttpPost]
public PartialViewResult SomeMethodInController()
{
    var model = MethodToRetreiveModel();

    return PartialView( "_MyPartialView", model );
}