Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Ajax MVC jQuery JSON JQueryUI Razor , +
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");
           		
        	}
Posted 11-Apr-13 5:52am
Edited 12-Apr-13 1:38am
v4
Comments
Moykn at 11-Apr-13 13:59pm
   
is this right? @using (Ajax.BeginForm("EditEmployees", "Home", new AjaxOptions shouldn't be @using (Ajax.BeginForm("EditEmployee", "Home", new AjaxOptions ?
devdev13 at 12-Apr-13 6:37am
   
Yeah. That's right. It is spelt correctly in the code. Thanks. Any other suggestions ?
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Hi,
 
This normally occures if you try to post a form in an IFrame and the result is JSON (mostly used in Ajax-fileuploads.
 
The problem is (in the above mentioned scenario) that IE does not detect the JSON result as a text to display, so it assumes that you want to download it.
 
To circumvent this behaviour, you can simply change this:
 
JsonResult result = new JsonResult();
result.Data = employeeData;
return result;
 
into this:
 
JsonResult result = new JsonResult();
result.Data = employeeData;
result.ContentType = "text/plain";
return result;
 
After this change, IE will assume that he will get Text, so it displays it correctly.
 
Give it a try, perhaps this also solves your problem Smile | :)
Hope this helps.
 
Best regards and happy coding,
Chris
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Probably you have forgotten to add jquery.unobtrusive-ajax.min.js to your page, check it please.
 
   <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
  Permalink  
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 190
1 Jochen Arndt 155
2 PIEBALDconsult 150
3 Afzaal Ahmad Zeeshan 120
4 DamithSL 115
0 OriginalGriff 5,695
1 DamithSL 4,591
2 Maciej Los 4,012
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,190


Advertise | Privacy | Mobile
Web02 | 2.8.141220.1 | Last Updated 24 Apr 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100