javascript - 将 ViewData 值从 Controller 传递到 View

Question

我正在对我的 Controller 方法进行 ajax 调用，并期望将结果返回到我的 View 中。但是，即使 Controller 返回 ViewData 值，我的 View 也不会显示来自 Controller 方法的值。

扫描仪 View (为简洁起见，删除了版本)

<div class="card card-outline-danger card-danger">
    <div class="card-block">
        <blockquote class="card-blockquote">
            <p>Result In</p>
            <div id="resultsList"></div>
            <p>Result Out</p>
            @ViewData["TextAreaResult"]
        </blockquote>
    </div>
</div>

家庭 Controller

public IActionResult Scanner() {
    ViewData["TextAreaResult"] = "No Scan yet";
    return View();
}

[HttpPost]
public IActionResult DecodeScanner(string productCode, string serialNumber, string batch, string expirationDate, int commandStatusCode) {
    try {
        Control.Initialize();
        Control control = new Control();
        Request request = new Request();

        request.setProductCode(productCode);
        request.setSerialNumber(serialNumber);
        request.setBatch(batch);
        request.setExpirationDate(expirationDate);
        request.setCommandStatusCode(commandStatusCode);

        control.sendSinglePackOperation(request);

        Console.WriteLine("Response:" + request.getHttpResponseCode());

        ViewData["TextAreaResult"] = string.Format(" Response {0}", request.getHttpInformation());

    } catch (Exception exc) {
        ViewData["TextAreaResult"] = "Exception: " + exc.Message;
    }

    return View("Scanner");
}

JS(为简洁起见，精简版本)

$('#my-button').click(function() {
    $.ajax({
        url: "DecodeScanner",
        type: "POST",
        data: {
            productCode: productCode,
            serialNumber: serialNumber,
            batch: batch,
            expirationDate: expirationDate,
            commandStatusCode: 0
        },
        async: true
    });
});

在“网络”选项卡下的响应部分中，我可以看到在成功的 ajax 调用后 Controller 正在传递结果，但 @ViewData["TextAreaResult"] 的更新值未呈现 View 中。我猜这与由于没有页面刷新而未传递新值有关。

我期望的输出(在本例中)是显示Response The pack is active

网络选项卡 - Ajax 调用响应

HTML View - 仍然显示 Scanner() 函数中定义的默认 @ViewData["TextAreaResult"] 文本。

Answer 1

您无法更新已渲染的@ViewData["TextAreaResult"]。为了实现这个你需要这样做

扫描仪 View

将 View 数据放入p标签

  <p id="pTextAreaResult">@ViewData["TextAreaResult"]</p>

Controller

[HttpPost]
public IActionResult DecodeScanner(string productCode, string serialNumber, string batch, string expirationDate, int commandStatusCode) {
    string TextAreaResult = string.Empty;
    try {
        Control.Initialize();
        Control control = new Control();
        Request request = new Request();

        request.setProductCode(productCode);
        request.setSerialNumber(serialNumber);
        request.setBatch(batch);
        request.setExpirationDate(expirationDate);
        request.setCommandStatusCode(commandStatusCode);

        control.sendSinglePackOperation(request);

        Console.WriteLine("Response:" + request.getHttpResponseCode());

        TextAreaResult = string.Format(" Response {0}", request.getHttpInformation());

    } catch (Exception exc) {
        TextAreaResult = "Exception: " + exc.Message;
    }

    return Json(TextAreaResult, JsonRequestBehavior.AllowGet);
}

脚本

$('#my-button').click(function() {
    $.ajax({
        url: "DecodeScanner",
        type: "POST",
        data: {
            productCode: productCode,
            serialNumber: serialNumber,
            batch: batch,
            expirationDate: expirationDate,
            commandStatusCode: 0
        },
        async: true,
        success: function(data) {
           $('#pTextAreaResult').text(data);
        }
    });
});