Ajax를 사용하여 모달 양식에 매개 변수를 전달하는 방법

스콧 퍼탄

선택한 보고서에 대한 비용 목록을 표시하는 면도기 페이지가 있습니다. 모달을 불러오는 페이지에 "비용 추가"버튼이 있습니다. 모달은 양식의 부분보기입니다. 내가해야 할 일은 ExpenseId를 모달에 전달하는 것입니다. 이렇게 URL에서 Id를 얻을 수 있습니다.

 @{ var expenseId = Request.Url.Segments[3]; }

버튼은 현재 다음과 같습니다.

<button type="button" data-toggle="modal" data-target="#expenseModal_@expenseId" data-id="@expenseId" class="btn btn-primary" id="addExpenses">
                        Add Expense
                    </button>

내가 필요한지 알 수없는 몇 가지가 있습니다. 나는 다른 것을 시도하고 있었다.

모달

<!-- MODAL -->
<div class="modal fade" id="expenseModal_@expenseId" tabindex="-1" role="dialog" aria-labelledby="expenseModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="expenseModalLabel"> Expences </h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div> <!-- MODEL HEADER-->
        <div class="modal-body">
        </div> <!-- MODAL BODY-->
    </div>
</div>

자바 스크립트

    <script type="text/javascript">
    $(document).ready(function () {
        $("#addExpenses").click(function () {

            $(".modal-body").html('');

            $.ajax({

                type: 'GET',
                url: '@Url.Action("_ExpenseForm", "Admin")',
                data: { type: $(this).attr("data-type") },
                success: function (response) {
                    $(".modal-body").html(response);
                    $("#expenseModal").modal('show');
                },
                error: function () {
                    alert("Something went wrong");
                }

            });

        });
    });
</script>

비용 ID는 양식에 삽입해야 저장 될 때 올바른 비용 보고서에 저장됩니다.

컨트롤러 작업

    ExpensesDataAcessLayer objexpense = new ExpensesDataAcessLayer();
    public ActionResult ExpenseReports()
    {
        return View(db.ExpenseReports.ToList());
    }

    public ActionResult Expenses(int ExpenseId)
    {
        return View(db.Expenses.Where(x => x.ExpenseId == ExpenseId).ToList());
    }

    public ActionResult _ExpenseForm()
    {
        CustomerEntities customerEntities = new CustomerEntities();
        List<SelectListItem> categoryItem = new List<SelectListItem>();
        ExpensesViewModel casModel = new ExpensesViewModel();
        List<ExpenseTypes> expensetypes = customerEntities.ExpenseType.ToList();
        expensetypes.ForEach(x =>
        {
            categoryItem.Add(new SelectListItem { Text = x.CategoryItem, Value = x.ItemCategoryId.ToString() });
        });
        casModel.ExpenseTypes = categoryItem;

        return View(casModel);
    }

당신의 도움을 주셔서 감사합니다!

다음 expenseId과 같이 숨겨진 필드에 저장할 수 있습니다.

<input id="expenseId" name="expenseId" type="hidden" value="@Request.Url.Segments[3]">

그러면 이렇게 얻을 수 있습니다

 $("#addExpenses").click(function () {
var expenseId = $("#expenseId").val();
// after code here

업데이트 됨

당신이 얻을 수있는 expenseId다음과 같은

var expenseId = $(this).attr("data-id")

그럼 당신은 숨겨진 필드 또는 어디에서 할당 할 수 있습니다 Model이와 같이,

<!-adding aditional input into HTML in MODEL-!>
<input id="expenseId" name="expenseId" type="hidden" value="">

<!- Javascript-!>
var expenseId = $(this).attr("data-id")
expenseId.val(expenseId );

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Angular의 모달에 매개 변수를 전달하는 방법

분류에서Dev

모달 팝업에 매개 변수를 전달하는 방법?

분류에서Dev

cakephp를 사용하여 URL에 매개 변수를 전달하는 방법

분류에서Dev

매개 변수를 ajax URL에 전달하는 방법 (DJANGO)

분류에서Dev

Get JSON을 사용하여 PHP에 매개 변수를 전달하는 방법

분류에서Dev

서블릿에서 JSON을 사용하여 여러 매개 변수를 Ajax에 전달하는 방법

분류에서Dev

유형을 모를 때 매개 변수를 함수에 전달하는 방법

분류에서Dev

양식 유효성 검사에서 URL을 통해 전달 된 매개 변수를 사용하는 방법

분류에서Dev

Jquery를 사용하여 여러 개체를 Resful 서비스에 양식 매개 변수로 전달하는 방법

분류에서Dev

await 함수에 매개 변수를 전달하는 방법

분류에서Dev

C ++ STL 함수에 매개 변수를 전달하는 방법

분류에서Dev

함수에서 매개 변수를 전달하는 방법

분류에서Dev

이 매개 변수에 인수를 전달하는 방법?

분류에서Dev

php-매개 변수를 함수에 전달하는 방법

분류에서Dev

변수 매개 변수를 사용하여 함수에 전달 된 배열을 병합하는 방법

분류에서Dev

웹 API를 사용하여 여러 매개 변수를 전달하는 방법

분류에서Dev

done () 또는 next ()를 사용하여 다운 스트림 함수에 매개 변수를 전달하는 방법

분류에서Dev

Java에서 Main에 매개 변수를 전달하는 방법

분류에서Dev

QWidget 매개 변수를 클래스에 전달하는 방법

분류에서Dev

AngularJS에서 매개 변수를 전달하는 방법

분류에서Dev

optionalChain 내부에서 매개 변수를 전달하는 방법

분류에서Dev

textInput에서 매개 변수를 전달하는 방법

분류에서Dev

KeyEventArgs 매개 변수를 명령에 전달하는 방법

분류에서Dev

CSS 클래스에 매개 변수를 전달하는 방법

분류에서Dev

managedBean간에 매개 변수를 전달하는 방법

분류에서Dev

AngularJS 팩토리에 매개 변수를 전달하는 방법

분류에서Dev

Spring Webflow에 매개 변수를 전달하는 방법

분류에서Dev

redirect_to에서 매개 변수를 전달하는 방법

분류에서Dev

FragmentActivity에서 Fragment로 매개 변수를 전달하는 방법

Related 관련 기사

  1. 1

    Angular의 모달에 매개 변수를 전달하는 방법

  2. 2

    모달 팝업에 매개 변수를 전달하는 방법?

  3. 3

    cakephp를 사용하여 URL에 매개 변수를 전달하는 방법

  4. 4

    매개 변수를 ajax URL에 전달하는 방법 (DJANGO)

  5. 5

    Get JSON을 사용하여 PHP에 매개 변수를 전달하는 방법

  6. 6

    서블릿에서 JSON을 사용하여 여러 매개 변수를 Ajax에 전달하는 방법

  7. 7

    유형을 모를 때 매개 변수를 함수에 전달하는 방법

  8. 8

    양식 유효성 검사에서 URL을 통해 전달 된 매개 변수를 사용하는 방법

  9. 9

    Jquery를 사용하여 여러 개체를 Resful 서비스에 양식 매개 변수로 전달하는 방법

  10. 10

    await 함수에 매개 변수를 전달하는 방법

  11. 11

    C ++ STL 함수에 매개 변수를 전달하는 방법

  12. 12

    함수에서 매개 변수를 전달하는 방법

  13. 13

    이 매개 변수에 인수를 전달하는 방법?

  14. 14

    php-매개 변수를 함수에 전달하는 방법

  15. 15

    변수 매개 변수를 사용하여 함수에 전달 된 배열을 병합하는 방법

  16. 16

    웹 API를 사용하여 여러 매개 변수를 전달하는 방법

  17. 17

    done () 또는 next ()를 사용하여 다운 스트림 함수에 매개 변수를 전달하는 방법

  18. 18

    Java에서 Main에 매개 변수를 전달하는 방법

  19. 19

    QWidget 매개 변수를 클래스에 전달하는 방법

  20. 20

    AngularJS에서 매개 변수를 전달하는 방법

  21. 21

    optionalChain 내부에서 매개 변수를 전달하는 방법

  22. 22

    textInput에서 매개 변수를 전달하는 방법

  23. 23

    KeyEventArgs 매개 변수를 명령에 전달하는 방법

  24. 24

    CSS 클래스에 매개 변수를 전달하는 방법

  25. 25

    managedBean간에 매개 변수를 전달하는 방법

  26. 26

    AngularJS 팩토리에 매개 변수를 전달하는 방법

  27. 27

    Spring Webflow에 매개 변수를 전달하는 방법

  28. 28

    redirect_to에서 매개 변수를 전달하는 방법

  29. 29

    FragmentActivity에서 Fragment로 매개 변수를 전달하는 방법

뜨겁다태그

보관