This is a migrated thread and some comments may be shown as answers.

IE tries to download Json result

3 Answers 55 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Sharif
Top achievements
Rank 1
Sharif asked on 28 Oct 2013, 03:41 PM
Hi, 
I convert my MVC project to use Kendo UI. I have action result return simple Json object status with message if there is an error. It was working fine before I convert.
now it tries IE tries to download the Json, Firefox and Chrome will show it as text.

here is my code. I add  ("text/html", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet) I was hoping it will fix it but it didn't

return Json(new { Success = true }, "text/html", System.Text.Encoding.UTF8,
                        JsonRequestBehavior.AllowGet);


 return Json(new { Success = false, Message = formPost.Message }, "text/html", System.Text.Encoding.UTF8,
                        JsonRequestBehavior.AllowGet);




form 

Ajax.BeginForm(new AjaxOptions { OnSuccess = "handleModalSubmit" })

JS


 function handleModalSubmit(result) {

        if (result.Success) {
            alert("Your request was sent Successfully");
            
        }
        else {
            alert("There was problem sending your request");

        }
    }



Here is my Kendo include files 


<link href="@Url.Content("~/Content/kendo.compatibility.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.918/kendo.dataviz.default.min.css")" rel="stylesheet" type="text/css" />    <script src="@Url.Content("~/Scripts/kendo/2013.2.918/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo/2013.2.918/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.2.918/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
        

3 Answers, 1 is accepted

Sort by
0
Ignacio
Top achievements
Rank 1
answered on 28 Oct 2013, 07:26 PM
Hi Sharif,

Please post your full html and js code as well as your controller code so that I can see what you are trying to achieve. (remember to use the Format Code Block tool on the editor :D )

Does it work correctly in chrome and firefox but not IE?
Is this happening after a form request?
Are you sure the form is being submitted as an AJAX post request? 
Or is it making a full http request/page reload?

Please answer these questions and I will do my best to help you out :)
0
Sharif
Top achievements
Rank 1
answered on 29 Oct 2013, 05:57 PM
I found $("form").submit() does full post. I changed my code to use $.ajax.  I  found there is an issue when I load partial view via javascript though. when it load if I have a button on the partial view I cannot access it from my main document. I have to write the javascript inside the partial view

Index

@{
    ViewBag.Title = "Home Page";
}
 
<div>
    <fieldset>
        <legend>Search</legend>
        <label> Last Name</label>
        <input type="text" id="txtLastName"/>
        <input type="button" id="btnSearch" value="Search" class="search"/>
 
    </fieldset>
     
     
    <div id="Display-Form">
         
 
    </div>
</div>
 
 
<script type="text/javascript">
 
    $(function () {
        $.ajaxSettings.cache = false;
        $('.search').on('click', function () {
            var Posturl = '@Url.Action("Employee","Home")?lastname=' + $('#txtLastName').val();
 
            $("#Display-Form").load(Posturl + ' #Display-Form', function (response, status, xhr) {
                $("#Display-Form").append(response);
                $("#Display-Form").show();
            });
        });
 
 
 
        // First issue this fucntion doesn't work becuase the button is in partial view
        // it works if I don't use Ajax form and use submit instead of button
        // If I want it to work I must move it to the partial view
/*
       $('.submit').on('click', function () {
            alert("clicked");
            $("form").kendoValidator();
        });
         
         
           function handleModalSubmit(response) {
 
             
               if ( response.Success) {
                   alert("Your request was sent Successfully");
                   $("#Display-Form").hide();
              
               } else {
                   alert("There was problem sending your request");
 
               }
             
       }
         
       */
    });
 
     
 
 
</script>


Partial view


@model KendoUIMvcApplication1.Models.Employee



@using (Ajax.BeginForm(new AjaxOptions { OnSuccess = "handleModalSubmit" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
<legend>Employee</legend>

@Html.HiddenFor(model => model.ID)

<div class="editor-label">
@Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.LastName)
@Html.ValidationMessageFor(model => model.LastName)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.PositionTitle)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.PositionTitle)
@Html.ValidationMessageFor(model => model.PositionTitle)
</div>

<p>
<input type="button" value="Save" class="submit" />
</p>
</fieldset>
}

<script type="text/javascript">



$('.submit').on('click', function () {
alert("clicked");
// $("form").kendoValidator();
// $("form").submit();
var validator = $("form").kendoValidator().data("kendoValidator");
alert(validator.validate());
if (validator.validate()) {
$.ajax({
type: 'POST',
data: 'args',
url: '@Url.Action("Edit","Home")',
success: function(data, textStatus, jqXHR) {
alert(data.Message);
if (data.Success)
$("#Display-Form").hide();

}
});
}
});


function handleModalSubmit(response) {


if (response.Success) {
alert("Your request was sent Successfully");
$("#Display-Form").hide();

} else {
alert("There was problem sending your request");

}

}

</script>


Home 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using KendoUIMvcApplication1.Models;

namespace KendoUIMvcApplication1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{

return View();



}


public PartialViewResult Employee(string lastname)
{

var employee = new Employee
{
ID = 1,
FirstName = "TEST 1",
LastName = "Test 2",
Email = "Test1.Test2@abc.com",
PositionTitle = "QA"

};
return PartialView( employee);
}
public ActionResult Edit( Employee employee)
{

return Json(new { Success = true, Message="test" }, JsonRequestBehavior.AllowGet);
}
public ActionResult About()
{
ViewBag.Message = "Your app description page.";

return View();
}

public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";

return View();
}
}
}

 
Employee class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace KendoUIMvcApplication1.Models
{
public class Employee
{
public int ID { get; set; }
[Required]
public string FirstName { get; set; }
[Required]
public string LastName { get; set; }
[Required]
public string Email { get; set; }
[Required]
public string PositionTitle { get; set; }

}
}

0
Dimo
Telerik team
answered on 30 Oct 2013, 08:38 AM
Hello Sharif,

Your questions seem to be of general nature and not related to Kendo UI, so I will leave them to the community. Let us know if you need more information.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Sharif
Top achievements
Rank 1
Answers by
Ignacio
Top achievements
Rank 1
Sharif
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or