CODEWITHSUNDEEP
javascriptasp.net-mvc-3razor
Tolga Evcimen
Tolga Evcimen

Reputation: 7352

partial update on an mvc model in razor using js

I have a table showing some data as name mail and id. 

<table id="da-ex-datatable-numberpaging" class="da-table">
    <thead>
        <tr> 
            <th>Name</th>
            <th>Mail</th>
            <th>Operations</th>
        </tr>
    </thead>
    <tbody>
    @foreach(var c in Model.models)
    {    
    <form method="post" action="EditCustomer" >                             
         <tr> 
             <td>@c.name</td>
             <td>@c.mail</td>
             <td> 
                 <input type="button" value="Edit" onclick="edit()" />
                 <input type="submit" value="Save"/>
             </td>
         </tr>
     </form>
     } 
     </tbody>
</table>

what I want to do is edit names and mail on the fly for just one row. On right most column of the table I have two buttons as edit and save. when I click on edit I transform the 

<td>john doe</td>

to 

<td><input type="text" name="nameE" id="3nameE" value="john doe" /></td>

by using this javascript method

function edit(tag) {

    var id = tag.getAttribute("id");
    var name = document.getElementById(id + "name").innerHTML;
    var mail = document.getElementById(id + "mail").innerHTML;

    document.getElementById(id + "name").innerHTML = '<input type="text" name="nameE" id="' + id + 'nameE" value="' + name + '" />';
    document.getElementById(id + "mail").innerHTML = '<input type="text" name="mailE" id="' + id + 'mailE" value="' + mail + '" />';
}

and user edits the element on that textboxes.

my question is where to put the form and how to get the post values on controller? as you see my model has a customer list in it. but I want to update them individually. I know when I submit the form the model will be passed to the client, but the values that I just changed are not put in model since I've created those inputs in javascript. I'm lost here please help me out here. I might have mixed things up, dont hesitate to suggest to change the overall approach.

Upvotes: 0

Views: 1469

Answers (1)

Alden
Alden

Reputation: 6703

You could have the <input> already on the page, tied to the model, and hide/show it with javascript.

Instead of:

@foreach(var c in Model.models)
{
    ...
    <td>@c.name</td>
    ...
}

Try:

@for (var i = 0; i < Model.models.Count; i++)
{
    ...
    <td>
        <span>@Model.models[i].name</span>
        @Html.TextBoxFor(x => x.models[i].name, new { @style = "display:none" });
    </td>
    ...
}

Use jQuery .show() and .hide() on the input and span objects when someone clicks edit.

The generated input names may look strange, but they will bind to the model correctly assuming you have one form (not one for each row) and a controller method that looks something like this:

[HttpPost]
public ActionResult EditCustomers(MyViewModel model)
{
    // model.models works here
    ...
}

This post might be helpful for you as well.

Upvotes: 1

Related Questions