Skip to main content

How to get collections on viewmodel on postback in MVC

In mvc most of the people will face problem how to bind view model list while post request. If a partial control is binding with a list and want to preserve the user input with view model list, most common issue is id/name is same. If the Id/Name are different only MVC engine can bind it with the model.

Please see the below example

Build the view/partial view in the following way. By keeping a row counter means all items will have unique names.

Suppose this partial view is coming inside a View Called MethodName.ASPX and is included inside the

Main Page


 using html.beginform()
[httpGet]

{
<%html.dropdownlist(model=>model.Test, new {onclick=Test(<%=model.Id%>);});
<.div id="dvPopulatePartialViewWithList"></.div>
}


Javascript function Test


function Test(id)
{
 $.ajax({
        type: "Get",
        data: "Id=" + Id,
        url: '/MyController/GetPartialViewListById',
        success: function (result) {
            $('#dvPopulatePartialViewWithList').html(result);
        }
    });
}


Controller Method


public actionresult GetPartialViewListById(int Id)
{
 try
{
  List list=GetListById(Id);

return renderPartial("MyPartialView",list);
}
catch(Exception ex)
{
throw new exception("error",ex);
}
}

PartialView   MyPartialView
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl>" %>
<%@ Import Namespace="External_ViewModel" %>

<%  int rowCounter = 0; //Keep track of unique value for binding to model list
%>
   

<%
           foreach (var model in Model)
           {
           
<%: Html.ValidationSummary(true)%>
<%: Html.Hidden("[" + rowCounter + "].Id", model.Id)%>
<%: Html.Hidden("[" + rowCounter + "].Name", Model.Name)%>

    <%= model.nameOfItem%>
    [
    <%= cav.Item%>
    ]



    <%: Html.TextBox("[" + rowCounter + "].Value", model.Value, new { Style = "width:140px;" })%>
 
    <%: Html.ValidationMessage("[" + rowCounter + "].Value", model.Value)%>
 
<% ++rowCounter;
           }  //end foreach  Loop
%>

In Controller create the action like this


[httpPost]
 public ActionResult MethodName(ViewModel model, List resultList)

        {
// when you submit the form resultList will have binded values
}

Comments

Post a Comment

Popular posts from this blog

Bootstrap Server Side Sorting Cont....

On my previous post   I had already mentioned about how to apply the sort to Bootstrap paginated tables. By making the following changes server side sorting can be achieved along with pagination. On Filter Model self.sortBy = ko.observable( 'Id' );//Default sort Column self.sortAscending = ko.observable( false ); self.iconType = ko.observable( 'glyphicon glyphicon-chevron-down' ); // Icon to appear near Column No Changes to Adarsh Log Model or Adarsh Log list Model Knockout.js View Model for Adarsh Log Changes Add the sortTable  method to it self.sortTable = function (viewModel, e) {             var columClicked = $(e.target).attr( "data-column" )             var sortAscending = (self.filter().sortAscending() === true ) ? false : true ;             self.filter().sortAscendi...
Post a Comment
Read more

Emergence and Creative Confidence

I started my career on 1st of September 2008 as a software developer at Manchester. Some people in my personal life might know about it. I like to say, that day as the day I found an aura in my life, transformation from the worst possible situation into a new beginning in a matter of 1 hour. The week before, I got an interview confirmation from that company and I was not at all excited about it because I know it is going to be the final interview in UK if I am unsuccessful. I was in that mental state because I was not successful for past 12 such occurrences and not expecting anything different. This shows I was not a brilliant person but had a strong passion and hardworking nature to achieve success. I passed my masters on Sep 2007 and after that, I decided to work only in software development, and lots of people including my parents told this as a worst possible decision. To be precise, they have no issues in choosing software development, but on my adamant decision only software de...
1 comment
Read more

Single page application (SPA) using ext.js

what is spa? Single page application are applications that fit in one page with rich and fluid user experiences like a desktop based applications. Why is SPA? All web based elements (html, CSS,javascript) are downloaded from the server on single page load and avoid the continuous page post back. i can explain what this mean. Suppose your web application is made of certain flow and it consists of 5 different pages. Each page need to get data from the user and save before moving to the next page. So when we navigate from one page to other it need to make a round trip to server to store the data in one page and get the data for the next page to display. but in spa we can avoid the continuous post backs. The whole page will not post back any time other than the first load. But it communicate to the server dynamically behind the scene and can achieve the same functionality. Spa using ext.js designing a SPA using ext.js is a challenging task if you are unaware about the ext.js ...
4 comments
Read more