title: ASP.NET MVC Popup Partial View on Add Form (CRUD) Issue
body: <p>I am creating an MVC website which makes use of Partial Views on Popups to handle all my CRUD transactions. Please note that my application can already handle these CRUD operations perfectly (LINQ-To-Entity). However, I have a problem with my popup forms.</p>
  
  <p>Below is the code from my <code>_Add.cshtml</code>:</p>
  
  <pre><code>@model MyStore.Models.MyModels.ProductsModel
  
  @{
      Layout = null;
  }
  
  @using (Ajax.BeginForm("_Add", "Products", new AjaxOptions
  {
      InsertionMode = InsertionMode.Replace,
      HttpMethod = "POST",
      OnSuccess = "addSuccess"
  }, new { @id = "addForm" }))
  {
      @Html.ValidationSummary(true)      
      &lt;div id="add-message" class="error invisible"&gt;&lt;/div&gt;
  
      &lt;fieldset&gt;
          &lt;legend&gt;Products&lt;/legend&gt;
  
          @Html.HiddenFor(m =&gt; Model.ProductCode)
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.ProductName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.ProductName)
              @Html.ValidationMessageFor(model =&gt; model.ProductName)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Price)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.TextBoxFor(model =&gt; model.Price)
              @Html.ValidationMessageFor(model =&gt; model.Price)
          &lt;/div&gt;
      &lt;/fieldset&gt;
  } 
  </code></pre>
  
  <p>Below is the code from my <code>Controller</code>:</p>
  
  <pre><code>[HttpGet]
  public ActionResult _Add(string productCode)
  {
      ProductsModel model = newProductsModel();
      model.ProductCode = ProductCode ;
      return PartialView(model);
  }
  
  [HttpPost]
  public JsonResult _Add(ProductsModel model)
  {
      if (ModelState.IsValid)
      {
          ProductsManager prod = new ProductsManager();
          Products pa = new Products();
  
          pa.ProductCode = model.ProductCode;
          pa.ProductName = model.ProductName;
          pa.Price = model.Price;
  
          prod.AddProduct(pa);
  
          return Json(HelperClass.SuccessResponse(pa), JsonRequestBehavior.AllowGet);
      }
      else
      {
          return Json(HelperClass.ErrorResponse("Please review your form"), JsonRequestBehavior.DenyGet);
      }
  }
  </code></pre>
  
  <p>Please note that the <code>_Add.cshtml</code> is a partial view which is being rendered through a Popup.js which I found on the internet. It is rendered through this code:</p>
  
  <pre><code>@Html.ActionLink("[Add Product]", "_Add", new { ProductCode = @ViewData["ProductCode"] }, new { @class = "editLink" })
  </code></pre>
  
  <p>This works okay. I mean it adds product to my database. But my problem is upon clicking the <code>Proceed</code> button, I get this pop-up download dialog from the page:</p>
  
  <p><img src="https://i.stack.imgur.com/OPGKV.jpg" alt="Screenshot A"></p>
  
  <p>Can somebody please help me with this? I have a hunch it's because of the <code>HttpMethod</code> i'm using (POST, PUT, GET, DELETE) but i'm not really sure which one is right to use or if it really is the problem in the first place.</p>
  
  <p>Any help would be greatly appreciated!
  PS.
  Sorry for the long post.</p>
  
  <hr>
  
  <p><strong>EDIT:</strong></p>
  
  <p>This is the tutorial I followed for this project: <a href="http://ricardocovo.com/2012/04/06/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms-razor-version/" rel="nofollow noreferrer">http://ricardocovo.com/2012/04/06/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms-razor-version/</a></p>
  
  <hr>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Below is the jscript code I am using. It's basically the same one from the tutorial I followed. I just had to comment out a few lines on the last method. </p>
  
  <p>Also, I am using MVC 4. Hope this helps! Thanks!</p>
  
  <pre><code>var linkObj;
  $(function () {
      $(".addLink").button();
  
      $('#addDialog').dialog({
          autoOpen: false,
          width: 400,
          resizable: false,
          modal: true,
          buttons: {
              "Update": function () {
                  $("#add-message").html(''); //make sure there is nothing on the message before we continue                         
                  $("#addForm").submit();
              },
              "Cancel": function () {
                  $(this).dialog("close");
              }
          }
      });
  
      $(".addLink").click(function () {
          //change the title of the dialog
          linkObj = $(this);
          var dialogDiv = $('#addDialog');
          var viewUrl = linkObj.attr('href');
          $.get(viewUrl, function (data) {
              dialogDiv.html(data);
              //validation
              var $form = $("#addForm");
              // Unbind existing validation
              $form.unbind();
              $form.data("validator", null);
              // Check document for changes
              //$.validator.unobtrusive.parse(document);
              // Re add validation with changes
              //$form.validate($form.data("unobtrusiveValidation").options);
              //open dialog
              dialogDiv.dialog('open');
          });
          return false;
      });
  
  });
  
  
  function addSuccess(data) {
      if (data.Success == true) {
          //we update the table's info
          //var parent = linkObj.closest("tr");
          //parent.find(".carName").html(data.Object.Name);
          //parent.find(".carDescription").html(data.Object.Description);
          //now we can close the dialog
          $('#addDialog').dialog('close');
          //twitter type notification
          $('#commonMessage').html("Add Complete");
          $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
      }
      else {
          $("#add-message").html(data.ErrorMessage);
          $("#add-message").show();
      }
  }
  </code></pre>
  
  <p>I commented out these two lines: </p>
  
  <pre><code>$.validator.unobtrusive.parse(document);
  $form.validate($form.data("unobtrusiveValidation").options);
  </code></pre>
  
  <p>because not commenting them would give me the error below during runtime:
  <img src="https://i.stack.imgur.com/zsB0A.jpg" alt="enter image description here"></p>
  
  <p>This leads me to the opinion that this issue is  due to the unobtrusive validation. Like the link posted by Xnake below, I am having the same kind of problem. The only different thing is that the Thread Opener had to disable unobtrusive validation on his Web.config file to fix the problem whereas I cannot do the same since my code is using unobtrusive validation.</p>
  
  <p>Any help is greatly appreciated here. Thank you very much!</p>