ASP.NET MVC - JSON response sends me a file instead of executing the function to close the jqueryUI dialog

See more:

Ajax

MVC

jQuery

JSON

Razor

MVC4

, +

I'm returning a json data, and I can confirm that it is bringing data back to client. but instead of updating my jqueryaccordion, it asks me to save or open the file. Below is my script and controller. I have used jquery modal dialog to edit the employee details through a partial view, and clicking on update button should update the respective employee in the accordion list.Any help would be greatly appreciated - thanks

When debugging through IE tools, I noticed that when the 'update' button is clicked, the 'initiator' in the 'request' tab shows 'click'. I am guessing this should be 'XMLHttpRequest' Instead. Hope this information helps. Thanks


**Main View**

@Html.ActionLink("Edit Employee", "EditEmployee", "Home",
                        new { id = item.Id }
                        , new { @class = "editLink" })

**Partial View with Edit Employee Form - EditEmployee.cshtml**

@using (Ajax.BeginForm("EditEmployees", "Home", new AjaxOptions
         {
             InsertionMode = InsertionMode.Replace,
             HttpMethod = "POST",
             OnSuccess = "updateSuccess"
         }, new { @id = "updateEmployeeForm" }))
     {
         <div class="editor-label">
             @Html.LabelFor(model => model.Name)
         </div>
         <div class="editor-field">
             @Html.TextAreaFor(model => model.Name)
             @Html.ValidationMessageFor(model => model.Name)
         </div>

 }

**Action Result that returns partial view containing the editemployee form**

Public ActionResult EditEmployee(int id)
   {
   //DataAccess part
   return PartialView("EditEmployee",employeedata);
   }

**Controller that returns Json Result after updating the employee details**

[HttpPost]
Public JsonResult EditEmployee(Models.Employee employee)
{
       //Data access part

     JsonResult result = new JsonResult();
                            result.Data = employeeData;
                            return result;
}

**Script on Main View**

  <script type="text/javascript">
           var linkObj;
           $(function () {
               $(".editLink").button();

           $('#updateDialog').dialog({
               autoOpen: false,
               width: 400,
               resizable: false,
               modal: true,
               buttons: {
                   "Update": function () {
                       $("#update-message").html('');
                       $("#updateEmployeeForm").submit();
                   },
                   "Cancel": function () {
                       $(this).dialog("close");
                   }
               }
           });

           $(".editLink").click(function () {
               //change the title of the dialog
               linkObj = $(this);
               var dialogDiv = $('#updateDialog');
               var viewUrl = linkObj.attr('href');
               $.get(viewUrl, function (data) {
                   dialogDiv.html(data);

                   var $form = $("#updateEmployeeForm");
                   // Unbind existing validation
                   $form.unbind();
                              dialogDiv.dialog('open');
               });
               return false;
           });

       });

function updateSuccess(data) {
// I want to make sure that this function gets executed on Success instead of a file being sent back to me from the server
 $('#updateDialog').dialog('close');
 $('#commonMessage').html("Update Complete");
 $('#commonMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
 alert("hello");

       }