title: Display model error on same popup dialog in MVC 4
body: <p>I am developing MVC4 application which has Index.cshtml (main pg with searching criteria &amp; Search button), _PartialView.cshtml (partial view displaying records with update/delete links), Edit.cshtml (View for updating). </p>
  
  <p>After clicking Update link, popup modal dialog is opened containing Edit view (Edit.cshtml) I applied Required &amp; StringLength attribute to some fields. If some of attributes not fulfilled, i want to display them in same popup. But in controller action method, I am returning View so modal popup disappears &amp; Edit view is opened in div. </p>
  
  <p>My records are displayed as grid in partialView (_PartialView.cshtml) with Update link and javascript function as</p>
  
  <pre><code>&lt;a href="javascript:void(0);" class="anchorDetail" onclick="editFunc(@item.SrNo)"&gt;Update&lt;/a&gt;&lt;/pre&gt;
  
  
  function editFunc(id) {
  var TeamDetailPostBackURL = '/Home/Edit';
  var $buttonClicked = $(this);
  var options = { "backdrop": "static", keyboard: true };
  
  $.ajax({
      type: "GET",
      url: TeamDetailPostBackURL,
      cache: false,
      contentType: "application/json; charset=utf-8",
      data: { "SrNo": id },
      datatype: "json",
      success: function (data) {
          $('#myModalContent').html(data);
          $('#myModal').css('display', 'block');
          $("#myModal").dialog({
              title: 'Edit Data',
              modal: true,
              bgiframe: true,
              show: 'slide',
              hide: 'slide',
              width: 750
          });
          $('#myModal').dialog("show");
      },
  
      error: function () {
          alert("Dynamic content load failed.");
      }
  });
  }
  </code></pre>
  
  <p>My Edit.cshtml : </p>
  
  <pre><code> @using (Ajax.BeginForm("Edit", "Home", new AjaxOptions { UpdateTargetId = "divPartial", HttpMethod = "POST", InsertionMode = InsertionMode.Replace, OnBegin = "CallEditBegin", OnSuccess = "CallUnblock" }))
   {
      @Html.AntiForgeryToken()
      @Html.ValidationSummary(true)   
  
      &lt;fieldset&gt;
  
          &lt;div class="editor-label" style="display:none" &gt;
              @Html.LabelFor(model =&gt; model.SrNo)
          &lt;/div&gt;
          &lt;div class="editor-field" style="display:none"&gt;
              @Html.EditorFor(model =&gt; model.SrNo)
              @Html.ValidationMessageFor(model =&gt; model.SrNo)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.UserName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.UserName)
              @Html.ValidationMessageFor(model =&gt; model.UserName)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.ReaderName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.ReaderName)
              @Html.ValidationMessageFor(model =&gt; model.ReaderName)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.UploadDate)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.TextBoxFor(model =&gt; model.UploadDate, new { @readonly = "readonly" })
              @Html.ValidationMessageFor(model =&gt; model.UploadDate)
          &lt;/div&gt;
  
          &lt;p&gt;
              &lt;input type="submit" value="Save" /&gt;
          &lt;/p&gt;
      &lt;/fieldset&gt;
   }
  </code></pre>
  
  <p>My HomeController.cs</p>
  
  <pre><code>[HttpPost]
    public ActionResult Edit(UploadData uploadData)
    {
        if (!ModelState.IsValid)
        {
  
            return View(uploadData);
        }
         else 
        {
  
            // Processing Logic here
  
        }
     }
  </code></pre>
  
  <p>My Model class (UploadData.cs) is :</p>
  
  <pre><code>public class UploadData
  {
      public int SrNo { get; set; }
  
      [Display(Name = "User Name")]
      [Required(ErrorMessage = "User Name is required")]
      public string UserName { get; set; }
  
      [Display(Name = "Reader Name")]
      [Required(ErrorMessage = "Reader Name is required")]
      [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
      public string ReaderName { get; set; }
  
      [Required(ErrorMessage = "Upload Date is required")]
      [Display(Name = "Upload Date")]
      public DateTime UploadDate { get; set; }
  
  }
  </code></pre>
  
  <p>Now some filed are required and ReaderName has restiction of min length of 6 characters. If any of the condition not fulfilled below block will be executed.</p>
  
  <pre><code>if (!ModelState.IsValid)
  {
  
        return View(uploadData);
  }
  </code></pre>
  
  <p>But what happened next, my popup dialog disappears &amp; div will be open on main pg displaying error message.
  I want to show them on popup itself in front of control. </p>
  
  <p>I am confusing what to do in case of model errors so that they appear in same popup after control.
  Please give some advice, what I am missing.....</p>