Question

我刚刚开始使用JQuery for asp.net core mvc。

我有一个页面的一部分，其中包含链接到主要主题的项目列表。当针对其中一个列表项单击“编辑”按钮时，将显示隐藏的部分（字段集）并使用该列表项的值进行填充。页面上的其他输入被禁用，用户可以编辑该项目。一切正常。

但是，完成编辑后，用户单击“提交”按钮（在先前隐藏的字段集中），其想法是通过ajax提交已编辑的数据，如果接受，则更新列表。 Ajax等不是（问题）。

当用户单击“提交”按钮（编码为type =“button”）时，编辑部分中的值似乎已被清除，并作为空格或空值返回。它似乎只适用于此字段集，因为可以检索文档其余部分的（禁用）值（仅用于测试目的）。

有人能告诉我这里发生了什么以及如何保留这些编辑过的值吗？

    @**** Drop-down section for editing Admissions ****@
<fieldset id="AdmissionsEditFieldset" class="app-edit-main-fieldset" hidden>
    <legend id="AdmissionsEditLegend" class="app-edit-fieldset-legend">Editing Admission</legend>

    <div class="row">
        <div class="col-sm-12" style="padding-left: 5%; padding-right: 5%">
            <div class="form-group">
                <strong><label>Institution:</label></strong>
                <span class="app-label-to-input-sep">
                    <input id="admId" name="aId" type="text" class="form-input app-can-disable" asp-for="Admission.Id" hidden />
                    <select id="admPlace" name="aPlace" type="text" class="app-can-disable" asp-items="Model.PlaceOfDetentionDd" asp-for="Admission.PlaceId"></select>
                </span>
                <strong><label class="app-input-fld-sep">Date Admitted:</label></strong>
                <span class="app-label-to-input-sep">
                    <input id="admDate" name="aDate" type="text" class="form-input app-can-disable" asp-for="Admission.DateAdmitted" style="width: 5%" />
                </span>
                <strong><label class="app-input-fld-sep">Sequence:</label></strong>
                <span class="app-label-to-input-sep app-can-disable">
                    <input id="admSeq" name="aSeq" type="text" class="form-input" asp-for="Admission.Seq" style="width: 5%" />
                </span>
                <span>
                    <button id="admSubmitBtn" class="btn btn-sm btn-primary app-adm-edit-btn" type="button">Submit</button>
                    <button id="admCancelBtn" type="button" class="btn btn-sm btn-danger app-button-to-button-sep">Cancel</button>
                </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12" style="padding-left: 5%; padding-right: 5%">

        </div>
    </div>

这是JavaScript / JQuery

$(document).ready(function () {

 $('.app-adm-edit-btn').click(function (event) {
   //*** Prevent default button actions
   event.preventDefault();
  // btn has format 'editN[N...]'

  var btn = event.target.id;
  var sid = btn.substring(4);

  //*** Un-hide the editing drop-down
  $('#AdmissionsEditFieldset').removeAttr('hidden');

  //*** Copy values from the relevent line in the  table to the editing drop-down
  $('#admId').val($('#ident' + sid).text());
  $('#admPlace').val($('#placeN' + sid).text());
  $('#admDate').val($('#dateAdm' + sid).text());
  $('#admSeq').val($('#seq' + sid).text());

  //*** Set the section legend
  $('#AdmissionsEditLegend').text('Editing an Admission');

  //*** Disable other sections
  DisableFieldsets();  // Works OK - makes no difference if commented out

  //*** Focus the first input box
  $('#admPlace').focus();

 });  // $('.app-adm-edit-btn').click

 /*----------------------------------------------------------------------------------
 Admissions Submit button click handler
 ----------------------------------------------------------------------------------*/
 $('#admSubmitBtn').click(function (event) {
  //*** Prevent default button actions
  event.preventDefault();

  // Just to verify nothing wrong with JSON.stringify
  var id = $('#admId').val();
  var placeId = $('#admPlace').val();
  var seq = $('#admSeq').val();
  var dateAdmitted = $('#admDate').val();
  var court = $('#Court').val();

  // Not integrated, so that I can display the values
  var jsn = JSON.stringify({
   Id: $('#admId').val(),
   PlaceId: $('#admPlace').val(),
   Seq: $('#admSeq').val(),
   DateAdmitted: $('#admDate').val()
  });

  $.ajax({
   url: "api/EditAdmissionApi",
   method: "POST",
   contentType: "application/json",
   data: jsn,
   success: function (data) {
    alert("Ajax Success");  //TODO
   }
  });
  alert(jsn);
  //TODO
 });

  /*------------------------------------------------------------------------
  Admissions Cancel button click handler
  --------------------------------------------------------------------------*/
 $('#admCancelBtn').click(function (event) {
   //*** Prevent default button actions
   event.preventDefault();
 });

 });  // $(document).ready

 /*===========================================================================
   Helper Functions
  ===========================================================================*/
 /*---------------------------------------------------------------------------
  DisableFieldsets Helper function to disable fieldsets while input of linked
  items takes place 
 ---------------------------------------------------------------------------*/
   function DisableFieldsets() {
    DoDisableFieldsets('#MainFieldset');
    DoDisableFieldsets('#AdmissionsFieldset');
    DoDisableFieldsets('#ChildrenFieldset');
    DoDisableFieldsets('#SubmitButtonsNonFieldset');
   }

   function DoDisableFieldsets(id) {
    var xId = $(id);
    $('.app-can-disable', xId).attr('disabled', 'disabled');
    $(xId).addClass('app-disabled-background');
   }

Answer 1

是的确非常感谢你的建议，mj。

然而，试图了解原因和测试替代方案将我带到了真正的问题。我必须承认，这是一种愚蠢的行为，你可以盯着它看几个小时而没有看到。我仍然会承认，万一它可以帮助其他人。

我在列表中给出了编辑按钮＆＃39; dummy＆＃39;类名使选择更容易。然后我无意中将按钮html复制并调整为编辑后的提交按钮，而不删除类。因此，编辑和提交按钮处理程序似乎都被调用，这造成了严重破坏（我还没有弄清楚为什么这不仅仅是在第二个处理程序中生成未编辑的文本 - 但生命太短了）。对我来说这是一个愚蠢的问题 - 抱歉浪费每个人的时间。

构造$（＆＃39;＃admId＆＃39;）。val（$（＆＃39;＃ident＆＃39; + sid）.text（））;现在工作正常。

按钮上的输入框值消失单击

1 个答案: