title: ASP.NET MVC Passing Data from View to Controller
body: <p>I have a view with a grid that contains items added to a workstation. The user can select an item from a drop down list and click an action link which calls a controller that adds that item to the workstation. I can make it work by reading the FormCollection object in the Post action of the controller.</p>
  
  <pre><code>&lt;p&gt;
      &lt;% using(Html.BeginForm("AddItem", "Home")) { %&gt;
      &lt;label for="ItemID"&gt;Item:&lt;/label&gt;
      &lt;%= Html.DropDownList("ItemID", Model.ItemsList) %&gt;
      &lt;%= Html.Hidden("WorkstationID", Model.Workstation.RecordID) %&gt;
      &lt;input type="submit" value="Submit" /&gt;
      &lt;% } %&gt;
  &lt;/p&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>[AcceptVerbs(HttpVerbs.Post)]
  public ActionResult AddItem(FormCollection formValue)
  {
      long workstationId = Convert.ToInt64(formValue["WorkstationID"]);
      long itemId = Convert.ToInt64(formValue["ItemID"]);
  
      Workstation workstation = itilRepository.FindWorkstation(workstationId);
      Item item = itilRepository.FindItem(itemId);
  
      itilRepository.AddItem(workstation, item);
      itilRepository.Save();
  
      return Content("Item added successfully!");
  }
  </code></pre>
  
  <p>What I want to do is be able to submit the two parameters the workstationId and itemId to the controller using Ajax.ActionLink and have the new item that was added get inserted into the grid. I am rendering the grid like this:</p>
  
  <pre><code>&lt;table&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;
          Name
        &lt;/th&gt;
        &lt;th&gt;
          Service Tag
        &lt;/th&gt;
        &lt;th&gt;
          Serial Number
        &lt;/th&gt;
      &lt;/tr&gt;
  
      &lt;% foreach (var item in Model.Items) { %&gt;
  
      &lt;tr&gt;
        &lt;td&gt;
          &lt;%= Html.ActionLink("Edit", "ItemEdit", new { id = item.RecordID }) %&gt; |
          &lt;%= Html.ActionLink("Details", "ItemDetails", new { id = item.RecordID   })%&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;%= Html.Encode(item.Name) %&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;%= Html.Encode(item.ServiceTag) %&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;%= Html.Encode(item.SerialNumber) %&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;% } %&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>The problem I have is when I submit using the ActionLink I can't figure out how to pass in the parameters to the controller and how to update the grid without reloading the entire view.</p>
  
  <p>I would really appreciate some help with this or even a link to a tutorials that does something similar.</p>
  
  <p>Thank You!</p>
  
  <p>This is the working version, the one problem is that when the controller returns the partial view that is all that gets rendred the actual page is gone.</p>
  
  <pre><code>&lt;% using (Ajax.BeginForm("AddItem", null, 
          new AjaxOptions
          {
              UpdateTargetId = "ResultsGoHere",
              InsertionMode = InsertionMode.Replace
          }, 
          new { @id = "itemForm" } ))
  { %&gt;
  
      &lt;label for="ItemID"&gt;Item:&lt;/label&gt;
      &lt;%= Html.DropDownList("itemId", Model.ItemsList) %&gt;
      &lt;%= Html.Hidden("workstationId", Model.Workstation.RecordID) %&gt;
  
      &lt;a href="#" onclick="$('#itemForm').submit();"&gt;Submit&lt;/a&gt;
  
      &lt;div id="ResultsGoHere"&gt;
          &lt;% Html.RenderPartial("WorkstationItems", Model.Items); %&gt;
      &lt;/div&gt;
  
  &lt;% } %&gt;
  </code></pre>
  
  <p>Not sure what the cause is, the replace was working correctly before but the controller wasn't getting the drop down value. Now the controller is getting the value but the partial view that is returned replaces the entire page.</p>
  
  <p>The Action Method:</p>
  
  <pre><code>[AcceptVerbs(HttpVerbs.Post)]
  public ActionResult AddItem(string workstationId, string itemId)
  {
      long lworkstationId = Convert.ToInt64(workstationId);
      long litemId = Convert.ToInt64(itemId);
  
      Workstation workstation = itilRepository.FindWorkstation(lworkstationId);
      Item item = itilRepository.FindItem(litemId);
  
      IQueryable&lt;Item&gt; items = itilRepository.AddItem(workstation, item);
      itilRepository.Save();
  
      return PartialView("WorkstationItems", items);
  }
  </code></pre>
  
  <p>This is the HTML for the View that does all the work:</p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage&lt;ITILDatabase.Models.WorkstationFormViewModel&gt;" %&gt;
  
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"&gt;
      Workstation Details
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"&gt;
  
      &lt;script src="/Scripts/MicrosoftAjax.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link type="text/css" href="/../Content/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" /&gt;    
      &lt;script type="text/javascript" src="/../Content/js/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/../Content/js/jquery-ui-1.7.2.custom.min.js"&gt;&lt;/script&gt;
  
      &lt;h2&gt;
          Workstation Details&lt;/h2&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Fields&lt;/legend&gt;
          &lt;p&gt;
              Record ID:
              &lt;%= Html.Encode(Model.Workstation.RecordID) %&gt;
          &lt;/p&gt;
          &lt;p&gt;
              Name:
              &lt;%= Html.Encode(Model.Workstation.Name) %&gt;
          &lt;/p&gt;
          &lt;p&gt;
              Description:
              &lt;%= Html.Encode(Model.Workstation.Description) %&gt;
          &lt;/p&gt;
          &lt;p&gt;
              Site:
              &lt;%= Html.Encode(Model.Workstation.Site.Name) %&gt;
          &lt;/p&gt;
          &lt;p&gt;
              Modified By:
              &lt;%= Html.Encode(Model.Workstation.ModifiedBy) %&gt;
          &lt;/p&gt;
          &lt;p&gt;
              Modified On:
              &lt;%= Html.Encode(String.Format("{0:g}", Model.Workstation.ModifiedOn)) %&gt;
          &lt;/p&gt;
          &lt;p&gt;
              Created By:
              &lt;%= Html.Encode(Model.Workstation.CreatedBy) %&gt;
          &lt;/p&gt;
          &lt;p&gt;
              Created On:
              &lt;%= Html.Encode(String.Format("{0:g}", Model.Workstation.CreatedOn)) %&gt;
          &lt;/p&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;People&lt;/legend&gt;
          &lt;% Html.RenderPartial("WorkstationPeople", Model.People); %&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Positions&lt;/legend&gt;
          &lt;% Html.RenderPartial("WorkstationPositions", Model.Positions); %&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Items&lt;/legend&gt;
  
              &lt;% using (Ajax.BeginForm("AddItem", "Home", null, 
                      new AjaxOptions
                      {
                          UpdateTargetId = "ResultsGoHere",
                          InsertionMode = InsertionMode.Replace
                      }, 
                      new { @id = "itemForm" } ))
              { %&gt;
  
                  &lt;label for="ItemID"&gt;Item:&lt;/label&gt;
                  &lt;%= Html.DropDownList("itemId", Model.ItemsList) %&gt;
                  &lt;%= Html.Hidden("workstationId", Model.Workstation.RecordID) %&gt;
  
                  &lt;a href="#" onclick="$('#itemForm').submit();"&gt;Submit&lt;/a&gt;
  
                  &lt;div id="ResultsGoHere"&gt;
                      &lt;% Html.RenderPartial("WorkstationItems", Model.Items); %&gt;
                  &lt;/div&gt;
  
              &lt;% } %&gt;
      &lt;/fieldset&gt;
      &lt;br /&gt;
      &lt;p&gt;
          &lt;%=Html.ActionLink("Edit", "WorkstationEdit", new { id = Model.Workstation.RecordID }) %&gt;
          |
          &lt;%=Html.ActionLink("Back to List", "Index") %&gt;
      &lt;/p&gt;
  &lt;/asp:Content&gt;
  </code></pre>