如何使用JavaScript ajax根据请求号自动更新原因？

Question

我在 asp.net mvc 上工作，我面临问题，我无法使用 java 脚本 ajax 自动更新原因

自动更新意味着当用户开始写入时，它将根据请求编号自动保存在数据库表中

我需要的更新将在不使用更新按钮的情况下完成，它将使用java脚本ajax自动保存

我的html如下

@model HR.WorkforceRequisition.Models.ResignationRequester
<table style="border: 1px solid 
black;width:100%;">




     <tr>
         <td style="width: 50%; font-weight: bold; padding-top: 10px;">
             <div class="form-group hover">
                 @Html.LabelFor(model => model.RequestNo, htmlAttributes: new { @class = "control-label col-md-5" })
                 <div class="col-md-7" id="RequestNo">
                     @Model.RequestNo
                 </div>
             </div>
         </td>
         <td>
<div class="col-md-7" id="Reason">
                @Html.TextAreaFor(model => model.Reason, new { id = "Reason", @class = "form-control" })
</div>
        </td>

     </tr>
</table>

动作名称

Edit

将在数据库中更新

ResignationController

如下

public JsonResult  Edit(ResignationRequester req)
{
    dynamic responseData = new ExpandoObject();
    responseData.success = false;
    responseData.message = "";
    string query;
 
        ResignationRequester workforceRequest = ResignationupdateReason((int)req.RequestNo,req.Reason);
    return Json(responseData);
}

自动更新时将执行java脚本函数

<script type="text/javascript">
function changereasonbasedonrequestno() {
    console.log("fire event")
    var ResignationRequester = new Object();
    ResignationRequester.RequestNo = document.getElementById("RequestNo").innerHTML.trim();
    ResignationRequester.Reason = document.getElementById("Reason").innerHTML.trim();
}
</script

asp.net mvc

使用的型号将是

public class ResignationRequester
{


    [Display(Name = "Request No")]

    public int RequestNo { get; set; }

    [Display(Name = "Reason")]

    public string Reason { get; set; }
}

确认

我需要在原因文本区域上写任何文本，然后它就会

根据请求编号在表格上自动更新

我不需要更新声明

正是我需要带有ajax请求的java脚本代码

将调用函数 Action Edit

Answer 1

我在 ASP.NET MVC 上工作，我面临问题，我无法使用自动更新原因 java 脚本 ajax

自动更新意味着当用户开始书写原因时它将保存 数据库表自动根据请求编号

如何使用 JavaScript ajax 根据请求自动更新原因？

根据您的描述和场景，如果您想使用ajax发送更新请求而不单击任何按钮，在这种情况下，您需要调用javascript事件。例如：OnChange、OnMouseUp。

用户完成输入原因后，您应该使用事件侦听器触发您的 javascript 函数。

根据您给定的代码片段，您已经决定何时调用ajax。如果你想在用户完成输入后立即调用ajax，那么你可以使用

@onblur

，它将调用然后光标松开焦点。

除了你还可以使用setTimeout函数设置一些延迟，这样每隔一定的时间间隔就会调用ajax。

但是考虑到场景，你可以尝试

@onblur

，它可以满足你的要求，但你也可以尝试其他的。

让我们看看实践中如何实现这一目标：

CSHTML 视图：

@model ShoppingCartApp.Controllers.ResignationRequester
@{
    ViewBag.Title = "Resignation Request";
}


<table style="border: 1px solid black; width:100%;">
    <tr>
        <td style="width: 50%; font-weight: bold; padding-top: 10px;">
            <div class="form-group hover">
                @Html.LabelFor(model => model.RequestNo, htmlAttributes: new { @class = "control-label col-md-5" })
                <div class="col-md-7" id="RequestNo">
                    @Model.RequestNo
                </div>
            </div>
        </td>
        <td>
            <div class="col-md-7" id="Reason">
                @Html.TextAreaFor(model => model.Reason, new { id = "txtreason", @class = "form-control", @onblur = "updateReason()" })
            </div>
        </td>
    </tr>
</table>

Javascript：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript">
    var timeoutId;

    function updateReason() {
        var requestNo = parseInt(document.getElementById("RequestNo").innerHTML.trim());
        var reason = document.getElementById("txtreason").value.trim();
        // console.log(ResignationRequester)

        $.ajax({
            url: '@Url.Action("Edit", "JsVariableInCshtml")',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify({ RequestNo: requestNo, Reason: reason }),
            success: function (data) {
                alert(data.message);
            },
            error: function (error) {
                console.error("Error updating Reason");
            }
        });
    }
</script>

控制器：

   [HttpPost]
   public JsonResult Edit([FromBody] ResignationRequester req)
    {
          dynamic responseData = new ExpandoObject();
          responseData.success = false;
          responseData.message = "";
    
          try
          {
              // Update the Reason in the database
              ResignationRequester updatedRequest = ResignationupdateReason(req.RequestNo, req.Reason);
    
              responseData.success = true;
              responseData.message = "Reason updated successfully";
          }
          catch (Exception ex)
          {
              responseData.message = "Error updating Reason: " + ex.Message;
          }
    
          return Json(responseData);
      }
    
    
      public ResignationRequester ResignationupdateReason(int RequestNo, string Reason)
      {
          ResignationRequester resignationRequester = new ResignationRequester();
          resignationRequester.Reason = Reason;
          resignationRequester.RequestNo = RequestNo;
          return resignationRequester;
      }

注意： 假设您正在使用

ResignationupdateReason

方法写入数据库。

输出：

注意：我刚刚分享了使用onblur事件的想法，您可以在此处尝试官方文档中的其他事件监听器。