Mvc Razor Listing and editing in same view with submit button for every list item

Question

I am new to MVC Razor please help me to implement this, I have MVC Razor view I need to implement Listing and editing in the same view In the view, there is a List which will list the records from a collection

@foreach (var item in Model.IncidentListmodel).

The list contains TextArea, Button for each record.

@Html.TextAreaFor(modelItem => item.Note, 2, 20, new { maxlength = 50 })

<input type="button" title="Save" value="Save" onclick="location.href='@Url.Action("Updateinc", "Incident", new { id = item.Id, name = item.Name, note = item.Note})'" />

My purpose is for each list item record, User should be able to edit the content which is populated in the Text area and modify the content and can save (that particular record) with the corresponding button.

More Details:

Below are the details of I am trying to implement Each list item contains a Text area (data listing here properly) and a button for each. While tap on the button the new content in the text area (which I modified from UI) should be updated (I can write the update code). But while taping on the button, after changing the content of text area, the controller it is getting the old value only.

View:

<table>
    @foreach (var item in Model.IncidentListmodel)
    {
        string class1 = item.Id % 2 == 0 ? "orangeRaw" : "blueRaw";
        <tr class="@class1">
            <td>@Html.DisplayFor(modelItem => item.Name)</td>
            <td>@Html.DisplayFor(modelItem => item.Title)</td>
            <td>
                @Html.TextAreaFor(modelItem => item.Note, 2, 20, new { maxlength = 50 })
            </td>
            <td>
                <input type="button" title="Save" value="save" onclick="location.href='@Url.Action("Updateinc", "Incident", new { id = item.Id, name = item.Name, note = item.Note})'" />
            </td>
        </tr>
    }
</table>

Controller:

public ActionResult Updateinc(int id,string name,string note,int? status )
{
    return View();
}

First, you do not have a form or submit button (all you have is a link that just sends the original values of you model to your `Updateinc()` GET method (and you never use a GET to modify data in any case). Second, your `foreach` loop generates `name="item.Note"` which has no relationship to your model (to generate form controls for a collection, refer [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) — , May 01 '18 at 13:42
But if you only want to edit one item and post back one item, then either have an 'Edit' link that redirects to an `Edit(int id)` method, of generate a modal containing a `
` that is displayed when you click on a link/buttton — , May 01 '18 at 13:43
Thanks for the Answer, Do you have any sample or url which guide me to implement this in proper way. I would like to do view and edit in same view — user946106, May 01 '18 at 13:44

score 0 · Answer 1 · answered May 01 '18 at 14:36

You need form tag in order for HttpPost as Stephen Muecke said. The trick is to either use for loop to generate correct Ids, or create Partial View.

I like to use partial view, since it is a bit cleaner.

Models

public class SampleViewModel
{
    public IList<IncidentListmodel> IncidentListmodel = new List<IncidentListmodel>();
}

public class IncidentListmodel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
    public string Note { get; set; }
}

View

@model AspNetMvc.Models.SampleViewModel

@foreach (var item in Model.IncidentListmodel)
{
    @Html.Partial("_UpdatePartial", item)
}

Partial View (_UpdatePartial.cshtml)

@model AspNetMvc.Models.IncidentListmodel

@using (Html.BeginForm("Updateinc", "Home"))
{
    @Html.HiddenFor(m => m.Id)
    @Html.HiddenFor(m => m.Name)

    @Html.DisplayFor(m => m.Name)
    @Html.DisplayFor(m => m.Title)

    @Html.TextAreaFor(m => m.Note, 2, 20, new { maxlength = 50 })

    <button type="submit">Update</button>
}

Controller

public class HomeController : Controller
{
    public ActionResult Updateinc()
    {
        var model = new SampleViewModel
        {
            IncidentListmodel = new List<IncidentListmodel>
            {
                new IncidentListmodel {Id = 1, Name = "One", Note = "Sample text"},
                new IncidentListmodel {Id = 2, Name = "Two"},
                new IncidentListmodel {Id = 3, Name = "Three"},
            }
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Updateinc(IncidentListmodel viewModel)
    {
        // Rediret to different page.
        return RedirectToAction("Index");
    }
}

@user946106 If this answered your question, please mark it as `Answer`. It'll help the community. — Win, May 12 '18 at 22:10

Mvc Razor Listing and editing in same view with submit button for every list item

1 Answers1

Models

View

Partial View (_UpdatePartial.cshtml)

Controller