상태 업데이트 기능으로 mvc를 사용하여 드롭 다운 목록을 onchange로 새로 고치지 않아야합니까?

Question

상태 업데이트를 onclick하면 해당 행만 새로 고쳐야합니다. 그 전에는 테이블 행만 표시한다는 onchange 함수를 작성했습니다.

cs.html :

<section class="card "> 
      <div class="card-block"> 
       <h5 class="with-border m-t-lg">View Module List</h5> 
       <div class="row"> 
        <div class="col-lg-4"> 
         <fieldset class="form-group"> 
          <label class="form-label" for="exampleInput">Domain Name</label> 
          @Html.DropDownList("DomainID", null, "--- Select Domain Name ---", new { @class = "select2-arrow" }) 
         </fieldset> 
        </div> 
       </div> 
       <br /> 
       <div class="table-responsive" id="findValue" style="display:none;"> 
        <table id="example" class="display table table-bordered" cellspacing="0" width="100%;"> 
         <thead> 
          <tr> 
           <th>S#</th> 
           <th>Module Name</th> 
           <th>Url</th> 
           <th>Roles</th> 
           <th>Action</th> 
         </thead> 
         <tbody></tbody> 
        </table> 
       </div> 

      </div> 
     </section> 

드롭 다운보기 테이블 코드를 기반으로 :

<script> 
    $(document).ready(function() { 

     $("#DomainID").change(function() { 

      var id = $(this).val(); 
      $("#example tbody tr").remove(); 

      $.ajax({ 

       type: 'POST', 

       url: '@Url.Action("ViewModules")', 
        dataType: 'json', 
        data: { id: id }, 
        success: function (data) { 
         var items = ''; 
         $.each(data.EmpList, function (i, item) { 
          $("#findValue").show(); 

          /*Find Role here - Comparing Emp List ModuleId to RoleList ModuleId*/ 

          var RoleName = $(data.role).filter(function (index, item) { 
           return item.ModuleID == item.ModuleID 
          }); 

          if (item.ParentModuleID == -1) { 

           item.ModuleName = " -- " + item.ModuleName 
          } 
          else { 
           item.ModuleName = item.ModuleName 
          } 

          var Status = ''; 
          if (item.Status == "Y") { 
           Status = '<a href="JavaScript:void(0)" data-status=' + item.Status + ' data-id=' + item.ModuleID + ' class="user-status" title="Disable status"><img src="/img/Active.png" height="22" width="42"/></a>' 
          } else { 
           Status = '<a href="JavaScript:void(0)" data-status=' + item.Status + ' data-id=' + item.ModuleID + ' class="user-status" title="Active status"><img src="/img/InActive.png" height="22" width="42"/></a>' 
          } 

          var rows = "<tr>" 
          + "<td>" + (i + 1) + "</td>" 
          + "<td>" + item.ModuleName + "</td>" 
          + "<td>" + item.Url + "</td>" 
          + "<td>" + RoleName[i].RoleName + "</td>" 
          + "<td>" + '<a href="@Url.Action("EditModules", "Account")?id=' + item.ModuleID + '" class="font-icon font-icon-pencil" title="Edit"></a>&nbsp;&nbsp;&nbsp;' + Status + "</td>" 
          + "</tr>"; 
         $('#example tbody').append(rows); 
        }); 
       }, 
       error: function (ex) { 
        var r = jQuery.parseJSON(response.responseText); 
        alert("Message: " + r.Message); 
        alert("StackTrace: " + r.StackTrace); 
        alert("ExceptionType: " + r.ExceptionType); 
       } 
      }); 
      return false; 
     }); 
    }); 
    </script> 

업데이트 상태 코드

<script> 
     $(document).ready(function() { 
      $("#example tbody").on('click', '.user-status', function() { 
       var getId = $(this).data('id'); 
       var status = $(this).attr('data-status'); 

       $.ajax({ 
        type: 'POST', 
        url: '@Url.Action("UpdateStatusModule")', 
        dataType: 'json', 
        data: { ModuleID: getId }, 
        success: function (data) { 
         if (data.success) { 
          alert(data.message); 
          $("#example tbody").load("/Account/UpdateStatusModule"); 
         } 
        }, 
        error: function (ex) { 
         alert('Failed to retrieve Sub Categories : ' + ex); 
        } 
       }); 

      }); 
     }); 
    </script> 

테이블 행만 표시된다는 것을 기반으로 onchange 함수를 작성했습니다. 다음 상태 업데이트를 온 클릭하면 당신이 작동하지 않을 수 초기화 한 후 HTML을 추가하면 값이

#region Update Status 
     [Authorize] 
     [HttpPost] 
     public ActionResult UpdateStatusModule(int ModuleID) 
     { 
      try 
      { 
       int refID = Convert.ToInt32(Session["RefID"]); 
       int typeID = Convert.ToInt32(Session["ComTypeID"]); 

       if (ModelState.IsValid && refID > 0) 
       { 
        userType type = new userType(); 
        type.UpdateStatusModule(ModuleID); 
       } 
       return Json(new { success = true, message = "updated successfully" }, JsonRequestBehavior.AllowGet); 
      } 
      catch 
      { 
       return View(); 
      } 

     } 
     #endregion 

Answer 1

을 변경할해서는 안 onchange를 단 행을 해당하는 새로 고침해야합니다. 당신은 비동기 POST를 들어

$(document).on("change","#DomainID", function() { 
    alert("domain changed"); 
}).on('click', '.user-status', function() { 
    alert("clicked"); 
}); 

() .ready $ (문서 없음) 문서에 이벤트를 등록해야합니다

$.post("MyUrl",{myId: myId},function(data){ 
    do wathever 
}).fail(function(x,y,z){ 
    alert("ops"); 
}); 

더 간단