javascript - 如何使用 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">×</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>
必须在表单中插入费用 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 );
推荐阅读
- hyperledger - 是否可以在超级账本作曲家中创建只读事务?
- solr - Solr 在单独的 fq 与单个 fq 参数中具有不同查询条件之间的区别
- google-cloud-platform - 监控 Google Cloud SQL 备份
- javascript - 如何使用 Angular js 取消设置 php 会话
- javascript - 如何在输入值之后显示按钮
- cmake - CMake 文件不会创建目标
- openssl - 在 ECDSA 中拥有自己的随机(不是私钥)
- xslt - XSL 变量或参数“CurrentPageCount”未定义
- javascript - Angular /在一个命令中创建一个没有css文件的模块,组件?
- c# - 带有mysql数据库的实体框架