2

我的视图中有一个 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();
}
4

4 回答 4

0

以下是我正在使用的 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>

设备控制器.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);
}
于 2013-09-20T10:47:59.670 回答
0

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

于 2013-09-20T09:27:00.030 回答
0

针对问题的变化，特别是提问者希望在同一个Action中有更多的回报：

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

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

我在网上搜索并得出结论，尤其是 HTML5 将通过 HTTP 流解决此要求，但这是另一个主题。例如：我得到了这个网址：http ://socket.io/ 。

旁路：

但作为我的一个想法，我会进行第一次 ajax 调用以确定下一个请求的计数，在控制器 Action1 中处理。然后在第一个ajax请求的成功部分调用几个新请求，使用Action2的url，例如Calculate等，然后将这几条数据附加到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);
                    }
                });
            }
        }
    });                      
}
于 2013-09-23T12:11:28.857 回答
0

你可以这样做：

  1. 在您看来，使用Ajax Form如下：

    @using (Ajax.BeginForm("ActionName", "ControllerName", new AjaxOptions { OnBegin = "beforeSubmitFunction()", HttpMethod = "POST",UpdateTargetId = "divStatus", OnComplete = "InsertRow()" }))
{
  .. //你的 HTML 表单控件
}

函数之前提交函数（）
{
    //提交前的代码...
}

  2. 然后在您的控制器中返回您的部分视图作为结果，这将在您的 div 中使用 id 进行更新divStatus

    [HttpPost]
public ActionResult Index(TypeName model)
{
    return PartialView("PartialViewName", model);
}
于 2013-09-20T09:44:57.633 回答