2016-08-18 4 views
0

AJAX를 사용하여 양식을 제출할 예정입니다. 필드는 부분 뷰에있어 컨트롤러 조치로 전송됩니다. 부분보기는 기본 폼의 버튼을 클릭하면 나타나는 div에 있습니다. 사용자가 양식을 완료하고 제출 버튼을 클릭하면 제어기 조치에서 갱신이 수행되고 모두 양호합니다. 그러나 사용자가 마음이 바뀌면 취소 버튼을 추가하여 양식을 숨길 때가 있습니다. 단추를 추가하고 양식을 숨기면 예상대로 작동하지만 컨트롤러 조치 메소드 호출이 계속 발생합니다. 사용해 보았습니다.취소 MVC 양식 제출

e.preventDefault(); 

그러나이 방법은 효과가 없습니다.

취소 ID에 첨부 된 두 번째 JQuery 메서드를 사용하여 시도했지만이 작업을 수행 할 수 없습니다.

내 JQuery와는 다음과 같습니다

$('#VisitorModal').on('submit', '#visitorform', function (e) { 
    var data = $(this).serialize(); 
    var url = '@Url.Action("CreateVisitor", "Meetings")'; 
    var text = $('#title').val() + ' ' + $('#firstname').val() + ' ' + $('#surname').val() + ' (' + $('#company').val() + ')'; // a value from the form that you want as the option text 
    $.post(url, data, function (response) { 
     if (response) { 
      $('#VisitorID').append($('<option></option>').val(response).text(text)).val(response); 
     } else { 
      dialog.hide(); 
     } 
    }).fail(function() { 
     dialog.hide(); 
    }); 
    dialog.hide(); 
    e.preventDefault(); 
    //return false; // cancel the default submit 
}); 

$('#cancel').on('click', function() { 
    dialog.hide(); 
}); 

을 그리고 여기 내 액션 메소드입니다 :

[HttpPost] 
public JsonResult CreateVisitor(AppointmentViewModel model) 
{ 
    var visitor = new Visitor() 
    { 
     Title = model.VisitorTitle, 
     FirstName = model.VisitorFirstName, 
     LastName = model.VisitorSurname, 
     Company = model.VisitorCompany 
    }; 
    db.Visitors.Add(visitor); 
    db.SaveChanges(); 
    return Json(visitor.id); 
} 

그리고 제출 & 여기에 버튼을 취소 :

<div class="form-group"> 
    <div class="col-md-offset-2 col-md-5"> 
     <input type="submit" value="Create" class="btn btn-success" id="submit" /> 
     <input type="button" value="Cancel" class="btn btn-warning" id="cancel" /> 
    </div> 
</div> 

는 사람이 어떤 제안을 가지고 있습니까 그 이걸 내가 희망대로 작동시킬 수 있을까? 양식이 초기 페이지가 렌더링 된 후에 동적으로로드되기 때문에

+3

버튼을'type = "button"'으로 취소하면 제출하지 않습니다. –

+0

유형을 사용하여 "submit"양식을 제출합니다. 제출 또는 취소 여부를 클릭했기 때문에 양측에서 양식을 제출하는 이유입니다. –

+0

유형을 버튼으로 변경하고 클릭 이벤트를 연결했지만 행운은 없습니다. 위의 코드를 수정하여 변경 사항을 반영합니다. –

답변

1

, 당신은 페이지가

대신

의 렌더링 될 때 존재하는 조상에 리스너를 추가 .on()를 사용하여 event delegation을 사용할 필요가
$('#cancel').on('click', function() { 
    dialog.hide(); 
}); 

사용

$(document).on('click', '#cancel', function() { 
    dialog.hide(); 
}); 

존재하지만 가장 가까운 조상과 document 교체 페이지가 처음 생성됩니다.