CODEWITHSUNDEEP
jqueryasp.netajaxrazor
mohsinali1317
mohsinali1317

Reputation: 4425

Refresh a table in 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.

Upvotes: 0

Views: 271

Answers (1)

Amit
Amit

Reputation: 890

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

console.log(result);

Upvotes: 1

Related Questions