CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcasp.net-mvc-4twitter-bootstrap
Willy
Willy

Reputation: 1729

Update tables after editted value on bootstrap modal

I'm using bootstrap modal to update value on table. User click edit link on table and fill billing rate on modal form. After save, how to update the table?

_Edit.cshtml (PartialView):

@model Namespace.ViewModels.TimeKeeperEditViewModel

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Edit Time Keeper</h4>
</div>

@using (Ajax.BeginForm("Edit", "TimeKeeper", FormMethod.Post,
    new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "POST"
    }))
{
    @Html.HiddenFor(model => model.TimeKeeperID)

    <div class="modal-body">
        <label for="billingRate" class="control-label">Billing Rate</label>
        @Html.EditorFor(model => model.BillingRate, new { htmlAttributes = new { @class = "form-control" } })
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
    </div>
}

Index.cshtml (View)

@model Namespace.ViewModels.BillingViewModel
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<div class="table-responsive">
    <table class="table table-striped table-hover table-condensed">
        <tr>
            <th></th>
            <th>Currency</th>
            <th>Elite Rate</th>
            <th>e-Bill Rate</th>
        </tr>

        @foreach (var item in Model.TimeKeepers)
        {
            <tr>
                <td>
                    <a href="#myModal" data-toggle="modal"><span class="glyphicon glyphicon-pencil"></span></a>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Currency.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EliteRate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.BillingRate)
                </td>
            </tr>
        }
    </table>
</div>

My controller:

public ActionResult Edit(int? id)
{
    TimeKeeper timeKeeper = db.TimeKeepers.Find(id);
    TimeKeeperEditViewModel timeKeeperEditVM = new TimeKeeperEditViewModel()
    {
        TimeKeeperID = timeKeeper.TimeKeeperID,
        EliteRate = timeKeeper.EliteRate,
        BillingRate = timeKeeper.BillingRate
    };
    return PartialView("_Edit", timeKeeperEditVM);
}

[HttpPost]
public ActionResult Edit(TimeKeeperEditViewModel timeKeeperEditVM)
{
    if (ModelState.IsValid)
    {
        TimeKeeper timeKeeper = db.TimeKeepers.Find(timeKeeperEditVM.TimeKeeperID);
        timeKeeper.BillingRate = timeKeeperEditVM.BillingRate;
        db.Entry(timeKeeper).State = EntityState.Modified;
        db.SaveChanges();
    }
    return View("Index");
}

Upvotes: 0

Views: 1650

Answers (1)

milagvoniduak
milagvoniduak

Reputation: 3254

I understand that your _Edit.chstml is included on your index.cshtml which renders the table.

The easiest way would be to:

1) Put your table into the partial view.

2) Render your table using Html.RenderAction.

3) Then create a javascript function that will reload your partial using $.get or $.ajax (if you use jquery).

4) Pass your created javascript function as an OnSuccess handler to the AjaxOptions when you create your ajax form (Ajax.BeginForm)

Upvotes: 1

Related Questions