ListView like implementation in ASP.NET MVC

Question

I have an existing web application built using ASP.NET WebForms and I am converting it to MVC 4.0. I have an administrative page that allows user to do CRUD operations on same page for employee such as edit address or add multiple addresses at same time by dynamically adding usercontrols. I have implemented ListView for displaying, editing and saving on same page. Now if I want to achieve same thing ie display/Edit/Save on the same view in MVC could someone suggest good practices for such scenario. (ps I have partial views ready for such CRUD operations)

Any help will be greatly appreciated.

Answer 1

Yes there are many way you can achieve this in MVC. Just like ListView,there are many third party controls which acts as ListView in MVC. But if you don not want to use those third party controls,then you can go with Table,Tr and Td. For that purpose, lets take an example. Your model is returning the list of data so that you need to display that list on the View. So get that list and use foreach loop and just use Table,TH,TR and TD. You can use @Html.ActionLink for Edit,Delete,etc. Hope this will help you.

Answer 2

I have implemented the similar thing in the MVC:

View:

 // Creating html Table from data present  in model
    <table class="content-wrapper">
        <tr>
            <th>
                @Html.DisplayName("Name")
            </th>
            <th>
                @Html.DisplayName("ID")
            </th>
            <th>
                @Html.DisplayName("Designation")
            </th>
            <th>
            </th>
        </tr>
        @foreach (var item in Model.lstEmployees)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.designation)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.id })
                    @Html.ActionLink("Delete", "Delete", new { id = item.id })
                </td>
            </tr>
        }

Controller:

public ActionResult Delete(Data model)
{
   //Code for delete
    return View("Index", data);
}

[HttpGet]
        public ActionResult Edit(Int32 Id)
        {
            //code for binding the existing records
            return View(_data);
        }



   [HttpPost]
    public ActionResult Edit(string sampleDropdown, Data model)
    {
        //code for saving the updated data
        return RedirectToAction("Index", "Home");

    }

Answer 3

As I wanted to use the same view to show/edit/save, I found a solution to implement AJAX and render partial views for CRUD operations. This can be achieved in many ways but I selected two options:

1. Using @Ajax.BeginForm and jquery.unobtrusive-ajax.min and just fetching partialview.

2. Using jQuery AJAX to acheive this.

Here is a link I found in Stackoverflow very helpful: Using Ajax.BeginForm with ASP.NET MVC 3 Razor

(Thanks all for your effort)