Question

我的视图中有一个div块，如下所示：

   <div id="divStatus" style="margin-top:10px;width: 200px; height: 100px; overflow-y: scroll;">
   </div>

然后从视图中，用户单击调用控制器的按钮。在控制器中，一些任务是从控制器执行的，我想更新视图中的div块。在这个div我打印出短语。

怎么做？

示例：

public ActionResult()
    {
        // Do something
    Update_DIV_in_View("some thing has been done"); <--- DIV in the view must be updated by appending this message

    // Do another thing
    Update_DIV_in_VIEW("another thing has been done");<--- DIV in the view must be updated by appending this message

    .... and so on

    // All things done
    Update_DIV_in_VIEW("All things have been done");<--- DIV in the view must be updated by appending this message

    return View();
}

Answer 1

在您的控制器中创建第二个操作，该操作仅显示div的更新内容，当您按下按钮时会在正常页面上加载AJAX调用加载状态（例如jQuery.load()方法）。

Answer 2

您可以按照以下方式执行此操作：

在您的视图中使用Ajax Form，如下所示：

@using (Ajax.BeginForm("ActionName", "ControllerName", new AjaxOptions { OnBegin = "beforeSubmitFunction()", HttpMethod = "POST",UpdateTargetId = "divStatus", OnComplete = "InsertRow()" }))
{
  .. //your Html form Controls
}

function beforeSubmitFunction()
{
    //Your code for before submitting...
}

然后在您的控制器中返回您的部分视图作为结果，该视图将在ID为divStatus的div中更新
```
[HttpPost]
public ActionResult Index(TypeName model)
{
    return PartialView("PartialViewName", model);
}
```

Answer 3

以下是我使用的3个示例：

示例1：

按钮（此处带有telerik css样式）：

<a class="t-button t-button-icontext" onclick="ajaxCreateEquipment()"><span
    class="t-icon t-add"></span>Create</a>

javascript：＃equipment-table-container 是目标div的ID：

<script type="text/javascript">
    function ajaxCreateEquipment() {
        $.ajax({
            type: 'GET',
            url: '@Url.Action("ShowCreate", "Equipment")',
            dataType: 'html',
            success: function (data) {
                $('#equipment-table-container').html(data);
            }
        });
    }
</script>

EquipmentController.cs：

[HttpGet]
public ActionResult ShowCreate()
{
    // some calculation code, fetch model from DB something else
    ViewData.Add("FormAction", "Create"); // some ViewData
    return PartialView("Create", model); // returns the View html file
}

示例2： 函数调用此处带有id参数和Json返回：

@{
    var supplierQuoteId = Model.ID.ToString();
    <a id="@supplierQuoteId" onclick="updateDiv(this.id)"></a>
}

的javascript：

function updateDiv(id) {
    var strUrl = "/LicenseTerm/UpdateUsedQuantity/" + id;
    $.ajax({
        type: "GET",
        url: strUrl,
        cache: false,
        dataType: "json",
        success: function (data) {
            $('#licenseterm-usedquantity').html(data.sum);
        }
    });
}

LicenseTermController.cs

[HttpGet]
public JsonResult UpdateUsedQuantity(Guid id)
{
    var licenseTerm = _repository.GetAll<LicenseTerm>().Where(l => l.ID == id).First();
    int sum = 0;
    foreach (LicenseAllocation l in licenseTerm.LicenseAllocations.Where(o => o.Deleted == false))
        sum = sum + l.LicenseQuantity;
    return Json(new { sum = sum }, JsonRequestBehavior.AllowGet);
}

示例3：简单获取

function ajaxFieldDefinitionCreate(id) {
    var strUrl = '/FieldDefinition/Create' + '/' + id.toString() + '?isRefreshAction=true';
    $.get(strUrl, function (data) {
        $('#equipmenttype-fielddefinition-createeditarea').html(data);
    });
}

[HttpGet]
public ActionResult Create(Guid id, [Optional, DefaultParameterValue(false)] bool isRefreshAction)
{
    var equipmentType = _equipmentTypeRepository.GetById(id);
    var fieldDefinitionDto = new FieldDefinitionDto
    {
        ID = Guid.NewGuid(),
        ParentName = equipmentType.Name,
    };
    return PartialView("Create", fieldDefinitionDto);
}

Answer 4

回答问题的变化，尤其是提问者希望在同一行动中获得更多回报：

HTTP请求的概念是将相对较小的数据从服务器传输到客户端，客户端调用例如HTTP GET请求。

您无法保持打开 HTTP GET请求以进行更多传输。

我在网上搜索并提取，特别是HTML5将使用HTTP流来满足此要求，但这是另一个主题。例如：我得到了这个网址：http://socket.io/。

<强>旁路：

但作为我的想法，我将进行第一次ajax调用，以确定在控制器Action1中寻址的下一个请求的计数。然后在第一个ajax请求的成功部分中使用Action2的url调用几个新请求，例如，计算等，然后将几个数据附加到div内容。

这里有一些快速发明的javascript代码：

function updateDiv() {
    var strUrl = "/Home/RequestCount/";            
    $.ajax({
        type: "GET",
        url: strUrl,
        cache: false,
        dataType: "json",
        success: function (count) {
            var strUrlCalc = "/Home/Calc/";
            for (var i = 0; i < count; i++) {
                $.ajax({
                    type: "GET",
                    url: strUrlCalc,
                    cache: false,
                    dataType: "json",
                    success: function (data) {
                        $('#test').append(data);
                    }
                });
            }
        }
    });                      
}

从控制器打印到视图中的div

4 个答案: