我的页面上有一个表格,如此
@using (Html.BeginForm("AddRecipeLine", "Kitchen", FormMethod.Get, new { id = "addRecipeLine" }))
{
<div class="medium-4 columns">
@Html.DropDownList("ingredients", (IEnumerable<SelectListItem>)ViewBag.ingredients, "--Select Ingredients--")
</div>
<div class="medium-4 columns">
@Html.TextBox("quantity", null, new { placeholder = "Quantity", @type = "number", min = "1" })
@Html.TextBox("recipeId", null, new { @type = "hidden", @value = @ViewBag.recipe.Id })
</div>
<div class="medium-4 columns">
<button class="button tiny">Add</button>
</div>
}
我使用这样的Jquery提交此表单
$('#addRecipeLine').submit(function (event) {
event.preventDefault();
var ingredientId = $('#ingredients').val();
var quantity = parseInt($('#quantity').val());
var rId = $('#recipeId').val();
if (ingredientId != '' && quantity != '') {
InstaFood.RecipeLine.Add(ingredientId, quantity, rId, function (result) {
console.log(result);
$('#addRecipeLine')[0].reset();
});
}
});
在同一视图中,我有一个表格,显示通过此表单添加的数据。
<table>
<thead>
<tr>
<th>Ingredient Name (KCals)</th>
<th>Quantity</th>
</tr>
</thead>
@foreach (var recipeLine in RecipeLine.GetByRecipe(@ViewBag.recipe.Id))
{
<tr>
<td>@recipeLine.GetIngredient().Name (@recipeLine.GetIngredient().KiloCalories)</td>
<td> @recipeLine.Quantity</td>
</tr>
}
</table>
我想要的是每当我通过表单添加数据时,此表记录都会刷新。像一些ajax的东西,当用户提交表单时将刷新此表。
答案 0 :(得分:1)
在JQuery提交中使用回调。附加到你正在做的事情的表格
console.log(result);