jquery 如何使用JavaScript自动更新请求No的原因?

stszievb  于 12个月前  发布在  jQuery
关注(0)|答案(2)|浏览(130)

我工作在asp.net mvc我面临的问题我不能自动更新的原因使用java脚本安装
自动更新意味着当用户开始写的原因,它将保存在数据库表自动基于请求号
更新我需要将不使用更新按钮,它将自动保存使用java脚本自动完成
我的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; }
}

确认

我需要当写任何文字的原因文本区,那么它会
根据请求号在表上自动更新
我不需要更新声明
正是我需要的javascript代码与apache请求,
将调用函数Action Edit

ffvjumwh

ffvjumwh1#

我工作在asp.net mvc我面临的问题我不能自动更新的原因使用java脚本安装
自动更新意味着当用户开始写的原因,它将保存在数据库表自动基于请求号
如何使用JavaScript自动更新请求No的原因?
根据你的描述和场景,如果你想使用aQuery发送更新请求而不需要点击任何按钮,在这种情况下,你需要调用JavaScript事件。例如:OnChange,OnMouseUp。
一旦用户完成输入原因,那么你应该通过使用事件监听器触发你的JavaScript函数。
根据你给出的代码片段,你必须决定什么时候调用aExclusive。如果你想在用户完成输入后立即调用aExclusive,那么你可以使用@onblur,它会在光标失去焦点时调用。
除此之外,您还可以使用settask函数设置一些延迟,以便每隔一定的时间间隔就会调用一次。
但是考虑到这种情况,你可以尝试@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 event的想法,您可以从official document here.尝试其他事件侦听器

vwoqyblh

vwoqyblh2#

您可以将oninput设置为文本区域,并在用户每次键入内容时发送数据:

$('#Reason').children('textarea').on('input', function(){
    let data = $(this).val()
    $.ajax({
        url: /* your route */,
        method: /* your preferred method */,
        data: data,
        success: res => console.log('you got it!')
    })
})

字符串
如果用户仍在输入,您可能希望中止较旧的请求,并且只发送最新的请求,但现在让我们解决这个问题。

相关问题