通过只调用一次ActionResult来更新多个DOM元素

时间:2013-12-19 21:50:02

标签: jquery asp.net-mvc razor

当我在MVC3应用程序中进行某个调用时,我必须更新多个DOM元素(在本例中为div)。我的所有Action结果都在各自的视图模型的单独函数中:

         public ActionResult Action3(ViewModel3 model)
    {
        return PartialView("_DomElement3", model);
    }

    public ActionResult Action2(ViewModel2 model)
    {
        return PartialView("_DomElement2", model);
    }

    public ActionResult Action1(ViewModel1 model)
    {
        return PartialView("_DomElement1", model);
    }

以下是所有三个剃刀部分视图的外观(仅适用于不同型号):

      @model ViewModel1
      <div id='domElement1'>@Model.values1</div>

我是这样做的,因为它们是按需调用的,我认为别的什么都不会触发它们。但是我遇到了一个场景,在满足某个条件后我必须更新所有三个div元素。我现在这样做,我不喜欢它:

           var values_1 = {'values1':'one'};
           $.ajax({
        url: '@Url.Action("Action1")',
        dataType: 'json',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: values_1,
        success: function (data) {
            $('#domElement1').html(data);
           var values_2 = {'values2':'two'};
            $.ajax({
                url: '@Url.Action("Action2")',
                        dataType: 'json',
                        type: 'POST',
                        contentType: 'application/json; charset=utf-8',
                        data: values_2,
                        success: function (data) {
                            $('#domElement2').html(data);
           var values_3 = {'values3':'three'};
                            $.ajax({
                                url: '@Url.Action("Action3")',
                                                dataType: 'json',
                                                type: 'POST',
                                                contentType: 'application/json;                         charset=utf-8',
                                                data: values_3,
                                                success: function (data) {
                                                    $('#domElement3').html(data);

                                                }
                                            });

                        }
                    });

        }
    });

如您所见,我一次拨打一个服务器。有没有人知道更好的方法来更新我的元素只需要一次调用服务器?

1 个答案:

答案 0 :(得分:1)

我必须构建一个示例应用程序来测试它,但有一种可能性是拥有一个返回JSON的方法。此响应可能会返回一系列部分结果:

[HttpPost]
public ActionResult SomeMethodName()
{
    /* get your data */

    var results = new List<ActionResult>();

    foreach(var model in YourCollection)
    {
        results.Add(new PartialResult("viewname", mode));
    }

    return Json(results.ToArray());
}

这几乎是伪代码,但应该明白这一点。