通过调用 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() 到 return 字符串到 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.

通过调用 javascript 函数，通过 Ajax Post 使用模型更改更新视图

Updating the View with Model changes via Ajax Post by calling a javascript function

javascript

ajax

json

http-post

asp.net-core