刷新asp.net中的表

时间:2014-12-16 09:03:37

标签: jquery asp.net ajax razor

我的页面上有一个表格,如此

@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的东西,当用户提交表单时将刷新此表。

1 个答案:

答案 0 :(得分:1)

在JQuery提交中使用回调。附加到你正在做的事情的表格

console.log(result);