从控制器传递ViewData值来查看

Question

我正在对我的控制器方法进行ajax调用，并期待将结果返回到我的视图。但是，即使通过控制器返回值ViewData，我的视图也不会显示来自控制器方法的值。

扫描器视图（为了简洁剥离版本）

<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> 

家庭控制器

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后传递的结果，但更新后的结果@ViewData["TextAreaResult"]的值不会在视图中呈现。我想这是以某种方式相关的新值不传递，因为没有页面刷新。

输出我期待（在这种情况下）是显示Response The pack is active

网络标签 - Ajax调用响应

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

Answer 1

不能更新@ViewData["TextAreaResult"]这是已经呈现。你需要为实现p标签

认沽可视数据这

扫描仪查看为此

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

控制器

[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); 
     } 
    }); 
}); 

Answer 2

我看不到任何地方你的代码，你真的用返回的HTML更新视图？

如果添加成功回调到您的AJAX后，你可以做这样的事情：

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

（没有测试但希望你的想法）