Как передать параметр в модальную форму, используя Ajax

Question

У меня есть страница бритвы, которая отображает список расходов для выбранного отчета. У меня есть кнопка «Добавить расходы» на странице, которая вызывает модальное. Модальный это частичный вид формы. Что мне нужно сделать, это передать ExpenseId модальному. Я могу получить идентификатор из URL-адреса следующим образом:

 @{ 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>

Javascript

    <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>

Идентификатор расхода должен быть вставлен в форму, чтобы при сохранении он сохранялся в правильном отчете о расходах.

Действия контроллера

    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);
    }

Спасибо за помощь!

Answer 1

Вы можете сохранить 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 );