刷新asp.net中的表

I have a form on my page like this

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

I use Jquery like this to submit this form

$('#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();
        });
    }
});

In the same view I have a table which shows the data added through this form.

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

What I want is that this table record gets refreshed whenever I add data through the form. Like some ajax thing which will refresh this table when ever user submits the form.

Use callback in JQuery submit. Append to table where you are doing below thing

console.log(result);