通过调用javascript函数通过Ajax Post更新带有模型的视图

Question

我使用Ajax调用来更新我的模型值，然后在视图中显示该新值。这是我的代码。在这段代码中，我调用了GetText方法并更新了模型值。如何在html中显示新的模型值。请帮助

public class EmpModel
{
public string EmpClaim {get;set;}
}


 public IActionResult EmpClaim()
 {
    return View();
 }
 [HttpPost]
    public ActionResult GetText(EmpModel model)
    {
        model.EmpClaim = "New Text" // This should be shown in view

         return Json(data);

    }

HTML文件

@model Test.Models.EmpModel
<div>
<input type="text" name="Claim" class="form-control" id="TxtClaim"  asp-for="Claim" data-role="text"/>
</div>

<div>
    <input type="button" onclick="changeText()" id="changeButton"  />
</div>

Javascript

<script>
 function changeText()
{
 var url = '@Url.Action("GetText", "EmpDoc")';
    $.post(url, $('form').serialize(), function (view) {
        $("#TxtClaim").val(); // How can I update the TxtClim with model.EmpClaim "New Text" 
    });
}

</script>

Answer 1

您可以使用return Content()将字符串返回给ajax函数。

    [HttpPost]
    public IActionResult GetText(EmpModel model)
    { 
       model.EmpClaim = "New Text" // This should be shown in view  
        return Content(model.EmpClaim); 
    }

Js：

 <script>
     function changeText()
     {
     var url = '@Url.Action("GetText", "EmpDoc")';
        $.post(url, $('form').serialize(), function (view) {
            $("#TxtClaim").val(view); // How can I update the TxtClim with model.EmpClaim "New Text"
        });
    }
    </script>

以下是结果：

注：

在您的情况下，该模型没有a key field，因此在更新数据时，您无法确定要更新的数据。进一步的操作可能需要您修改模型设计。

您可以参考this。