Question

I am new to MVC framework and here stucked with an updation method, can anyone help me?

MyCode in View :

       <table>
        <% if (Model == null || Model.Count <= 0)
        {
        %>
        <tr>
        <td >
     No Records found !!.Please search.
     </td>
     </tr>
    <% }
     else
     {
     foreach (var item in Model)
     { %>

     <tr>
     <td>Id</td>
     <td><%: item.ID %></td>

    <tr>
     <td > System : </td>
    <td >                                                                        
     <input id="txtSystemName" value=' <%: item.System %>' type="text"style="height: 20px; width: 120px;" />
     </td>
     <td >TaskName :</td>
    <td><input id="txtTaskName" value='<%: item.TaskName %>' class="TextBoxStyle" type="text"
    style="height: 20px; width: 340px;" /><td/>
    <tr>

    <tr>
    <td><input id="Submit1" name="btnSave" type="submit" value="Save" class="ButtonStyle"
     style="width: 100px; height: 20px" /></td>
    </tr>
<%
}
}
%>

The above is my code and here i will get the records in the view and the above code doesnt contain all the property i have pasted only 3 fields and wen i update some names in the input field and wen i clicked the button in that table i want to update only that record values for this i want to know how to call the controller method and and to pass the parameters to the method.

can anyone help me for this.
thanks in advance.

Answer 1

Here’s what I would suggest you. Start with a view model which will represent a table row:

public class MyViewModel
{
    public int Id { get; set; }
    [Required]
    public string SystemName { get; set; }
    public string TaskName { get; set; }
}

then a controller which will contain actions for listing all models and updating a single row:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        // I have hardcoded some data here in order to return a list
        // of models => in your case you would probably fetch those from
        // some data source
        var model = Enumerable.Range(1, 7).Select(x => new MyViewModel
        {
            Id = x,
            SystemName = "system " + x,
            TaskName = "task " + x
        });
        return View(model);
    }

    [HttpPost]
    public ActionResult Update(MyViewModel model)
    {
        // This action will be responsible for updating the view model
        if (ModelState.IsValid)
        {
            // The model is valid
            // TODO: update it using a repository
            return Json(new { success = true });
        }
        // there was an error => redisplay the view so that the user can fix it
        return PartialView("_MyViewModel", model);
    }
}

Then let’s move on to the main view (~/Views/Home/Index.aspx):

<%@ Page 
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<IEnumerable<AppName.Models.MyViewModel>>" 
%>

...

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>System name</th>
            <th>Task name</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <% if (Model == null || Model.Count() < 1) { %>
            <tr>        
                <td colspan="4">
                    No Records found !! Please search.
                </td>
            </tr>
        <% } else { %>
            <% foreach (var item in Model) { %>
                <%= Html.Partial("_MyViewModel", item) %>
            <% } %>
        <% } %>
    </tbody>
</table>

Then we define a partial for the view model (~/Views/Home/_MyViewModel.ascx):

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.MyViewModel>" 
%>
<tr>
    <% using (Html.BeginForm("Update", "Home", FormMethod.Post, new { @class = "updateForm" })) { %>
        <td>
            <%= Html.DisplayFor(x => x.Id) %>
            <%= Html.HiddenFor(x => x.Id) %>
        </td>
        <td>
            <%= Html.EditorFor(x => x.SystemName) %>
            <%= Html.ValidationMessageFor(x => x.SystemName) %>
        </td>
        <td>
            <%= Html.EditorFor(x => x.TaskName) %>
            <%= Html.ValidationMessageFor(x => x.TaskName) %>
        </td>
        <td>
            <input type="submit" value="Update" />
        </td>
    <% } %>
</tr>

and the last part is to AJAXify those forms. This could be done unobtrusively in a separate javascript file using jquery:

$(function() {
    $('.updateForm').submit(function () {
        var form = $(this);
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (!result.success) {
                    form.closest('tr').replaceWith(result);
                } else {
                    alert('record successfully updated');
                }
            }
        });
        return false;
    });
});