IE tries to download Json result

4 posts, 0 answers
  1. Sharif
    Sharif avatar
    14 posts
    Member since:
    Jun 2013

    Posted 28 Oct 2013 Link to this post

    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>
            
  2. nikobellic
    nikobellic avatar
    46 posts
    Member since:
    Feb 2013

    Posted 28 Oct 2013 Link to this post

    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 :)
  3. Kendo UI is VS 2017 Ready
  4. Sharif
    Sharif avatar
    14 posts
    Member since:
    Jun 2013

    Posted 29 Oct 2013 Link to this post

    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; }

    }
    }

  5. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 30 Oct 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready