title: How to pass data from Partial view to post action method in mvc4?
body: <p>Hi i have one view called <strong>Customer</strong>.In that view  i have one field called <strong>Area</strong>. I kept one add button near to area. suppose if area is not in the list means i click that add button it open <strong>AreaPartialView</strong> as popup window.</p>
  
  <p>Now i have one issue in that. That is the data is not passing  from partial view to post action method of controller.</p>
  
  <p><strong>My Model</strong></p>
  
  <pre><code>    public Nullable&lt;System.Guid&gt; AreaID { get; set; }
      public string Area { get; set; }
      public Nullable&lt;System.Guid&gt; CityID{ get; set; }
      public string  City { get; set; }
  </code></pre>
  
  <p><strong>My Controller</strong></p>
  
  <pre><code>    public ActionResult AreaPartialView()
     {
         ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName");
         return View("AreaPartialView");
     }
    [HttpPost]
  
     public ActionResult AddAreaInfo(CustomerViewModel objareaVM)
     {
          var objAreaID = Guid.NewGuid();
          ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName", objareaVM.CityID);
  
        var ObjArea = new Area()
          {
              AreaID =objAreaID,
              DisplayName = objareaVM.Area,
              PrintName = objareaVM.Area,
              CityID = objareaVM.CityID,
              IsActive = true,
              IsDeleted = false,
              CreatedDate = DateTime.Now,
              EditedDate = DateTime.Now,
              LastActiveOn = DateTime.Now,
              RowID = Guid.NewGuid(),
              CreatedSessionID = Guid.NewGuid(),
              EditedSessionID = Guid.NewGuid(),
              OfflineMode = false,
              OfflineID = Guid.NewGuid()
          };
  
          db.Areas.Add(ObjArea);
          db.SaveChanges();
          ModelState.Clear();
  
          return Json("Customer", JsonRequestBehavior.AllowGet);
  
   }
  </code></pre>
  
  <p><strong>My View</strong></p>
  
  <pre><code>   &lt;div id="Area"&gt;
     &lt;div class="col-sm-4"&gt;
     &lt;div class="form-group"&gt;
     @Html.LabelFor(model =&gt; model.Area, new { @class = "control-label"})
     @Html.DropDownList("AreaID", null, "Select", new { @class = "form-control required" })
     &lt;button id="AddArea"&gt;Area&lt;/button&gt;
     &lt;div id="AddAreaNew"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
  </code></pre>
  
  <p><strong>My j-query</strong></p>
  
  <pre><code>   &lt;script src="~/Scripts/jquery-1.10.2-ui.js"&gt;&lt;/script&gt;
     &lt;link rel="stylesheet"href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /&gt;
  
      &lt;script type="text/javascript"&gt;
     $("#AddArea").click(function () {
         $('#AddAreaNew').dialog("open");
       });
    $(function () {
         $('#AddAreaNew').dialog({
             autoOpen: false,
             width: 400,
             height: 500,
             resizable: false,
             title: 'Add Area',
             modal: true,
             open: function (event, ui) {
                 $(this).load("@Url.Action("AreaPartialView", "Customer")");
             },
             buttons: {
                 "Close": function () {
                     $(this).dialog("close");
                 }
             }
         });
     });
  </code></pre>
  
  <p><strong>My Partial View</strong></p>
  
  <pre><code>   @Html.Label("Area" , new { @class = "control-label" })
     @Html.TextBoxFor(model =&gt; model.Area, new { @class = "form-control", type = "text" ,id ="AreaName"})
     @Html.ValidationMessageFor(model =&gt; model.Area)
  
  
    @Html.Label("City")        
    @Html.DropDownList("CityID", null, "Select", new { @class = "form-control " })
  
  
    &lt;script src="~/Scripts/jquery-1.10.4-ui.min.js"&gt;&lt;/script&gt;
    &lt;link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" /&gt;
    &lt;script src="~/Scripts/jquery-ui-1.8.24.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
    function SaveArea() {
      var Area = $("#AreaName").val();
      var CityID = $("#CityID").val();
      alert(Area);
      var AreaAdd = {
          "AreaName": Area, "CityID": CityID
                  };
      alert(AreaAdd.AreaName);
      alert(AreaAdd.CityID);
  
      $.post("/Customer/AddAreaInfo", AreaAdd,
      function (data) { if (data == 0) { location = location.href; } }, 'json').success(function (data) {
  
          alert("success");
          //window.close();
      });
   }
  &lt;/script&gt;
  </code></pre>
  
  <p>if i click the add button Area partial view will open as popup window and if i enter the details and click Create button it get  the values and showing all alert messages. But the problem is it does not pass the Area value to post action method  it pass the City ID value but it doesn't pass the <strong>Area</strong> value to post method. The Area value will be always null.</p>
  
  <p>Please any one cross check my code and tell me the solution.</p>
  
  <p>Advance Thanks...</p>